React + TypeScript + Supabase + TailwindCSS = Full-Stack Landing Page | Coding Tutorial

Starter Code: https://github.com/ChadMCasey/GoTravelLandingPage Figma Design: https://www.figma.com/design/MAU49vY2kafCFFUP0v5HIr/GoTravel-Landing-Page---Tutorial?node-id=62-720&t=BudaRHTPRTEIei7R-0 Google Analytics: you must be signed into Gmail to access this link https://analytics.google.com/analytics/web/?authuser=1#/provision Deployed Website: https://gotravel-lp.netlify.app/ Hello Everyone! In todays tutorial we are going to be coding a full stack landing page, from scratch, using React, TailwindCSS, SupabaseJS, TypeScript, Framer Motion (Motion), React Query and Google Analytics. The landing page is designed around a hypothetical travel agency named GoTravel. It features stunning a web design with beautiful images, fun animations, and a modern aesthetic. This tutorial is fit for both beginners and intermediate programmers! The explanations are fairly thorough, making it accessible to a wide range of students looking to refine their full stack / web development skillset. So grab a coffee, sit back, open VSCode, and get coding :) Timestamps For Todays Tutorial: 0:00 - Intro 01:23 - Project Configuration 02:09 - Starter Project Overview 04:25 - Install Extensions 05:00 - Page Component 09:44 - Header Component 15:01 - Navigation Component 55:39 - Desktop Dropdown Component 01:12:38 - Hero Component 01:37:53 - Hero Benefit Component 01:52:04 - Main Component 01:55:43 - Steps Component 02:29:21 - Rating Component 02:51:26 - Services Component 03:07:25 - Service Component 03:14:58 - News Component 03:23:08 - Blog Post Component 03:42:12 - Explore More Component 04:07:33 - Location Card Component 04:25:42 - Location Card Continued 04:40:02 - Frequent Travelers 1 04:57:04 - Frequent Travelers 2 05:22:17 - Frequent Travelers 3 05:37:52 - Frequent Travelers 4 05:53:05 - Frequent Travelers 5 06:08:50 - Testimonials Component 06:31:48 - Footer Component 06:54:52 - Install Supabase & React Query 06:59:52 - Sign Up For Supabase 07:02:00 - Create Blog Post Storage Bucket 07:03:53 - Create Blog Post Table 07:06:33 - Load In Blog Post Data 07:08:09 - Point Blog Rows To Images 07:10:19 - RLS Policy For Blog Posts 07:12:43 - .env Var For Supabase 07:15:31 - Create Supabase Client 07:18:57 - Retrieving Blog Posts 07:25:29 - Creating Blog Post Query 07:31:11 - Calling useQueryBlogPosts() 07:36:13 - Formatting Date Function 07:38:11 - Error Component 07:45:58 - Loading Spinner Component 07:48:35 - Creating Location Table 07:51:10 - Load Rows And Images 07:54:02 - Policy For Locations Table 07:55:17 - Get Locations From Code 08:00:47 - Create Location Query 08:02:46 - Read Locations Into Explore More 08:07:42 - Create Leads Table 08:11:38 - Leads Table Policy 08:12:44 - Insert Lead To DB Function 08:17:50 - Lead Mutation 08:23:07 - Call Lead Mutation 08:37:31 - Mobile Menu Overview 08:38:36 - Bring In Responsive Design 08:43:27 - HTML & CSS For Menu 09:17:57 - Add Motion Animations To Menu 09:27:31 - Creating Menu Context 09:36:05 - Open And Closing Menu 09:39:44 - Deploy Landing Page With Netlify 09:41:42 - Setting Up Google Analytics 09:45:55 - Creating Analytics Event Functions 09:52:34 - Generating Pageview Events 09:56:58 - Form Submission Events 10:04:56 - See You All Next Time!