Create a Scalable URL Shortener App Using Nuxt 3, Supabase, and TainwilndCSS | Part 1/2

Video Description

#nuxtjs #supabase #tailwindcss Part 2/2: https://youtu.be/rAq9xJTB0P8 In this tutorial, we will be building a URL shortener web app using Nuxt.js, Supabase and Tailwind CSS. We will set up the development environment, integrate Supabase for database and user authentication, implement core functionality and learn how to use Nuxt's features to create a fast, efficient and scalable web app. By the end of this tutorial, you will have a solid understanding of how to use Nuxt, Supabase, and Tailwind CSS to build professional and functional web apps. Live: https://shrty.vercel.app/ -- Connect With Me -- Discord: https://discord.gg/sG8TYgxxK2 Twitter: https://twitter.com/jahiddev -- Project Links -- GitHub Link: https://github.com/jahidanowar/shrty Figma Design: https://www.figma.com/file/daEyVZgvMXVrhdf0KYH5af/shrty?node-id=0%3A1&t=d1EO6Omf0dvdQ7SN-1 -- Timestamp -- 00:00 Introduction 00:28 Project Demo 04:45 Topics 08:20 Nuxt Installation 12:30 Project Setup 12:40 Installing Tailwindcss 15:00 Installing Supabase 22:40 Setting Up Directory 28:30 Figma Design Reference 36:58 Page Style 43:00 Navigation Bar Design 56:00 Landing Page Design 01:09:00 Auth Page Design 01:25:00 Dashboard Design 01:35:57 Link Shortener Form Componenet 01:42:00 LinkItem Component 01:47:00 Database Schema Design 01:51:00 Supabase Database Design 02:00:00 Authentication 02:00:07 Github Login 02:07:29 Creating Middleware 02:11:00 Email Login 02:20:00 Signup Option 02:33:00 Creating the URL Shortener 02:41:30 Creating Types from Supabase Schema 02:52:00 Fetching data from Supabase 03:12:42 Creating a Dynamic Redirection Engine in Nuxt 03:34:15 Wrapping Up Part 1 03:36:00 To be continued... -- Recommended Videos -- How to use MongoDB/Mongoose in Nuxt 3: https://youtu.be/EidO0c9L6b0 Build a Nuxt 3 Tailwind CSS blog from scratch: https://www.youtube.com/watch?v=fY2sfrV2zho Deploy Nuxt3 Project on Digital Ocean: https://www.youtube.com/watch?v=hANbHC90xug Integrate Vuetify with Nuxt3: https://www.youtube.com/watch?v=67RZJyzvspg DigitalOcean free $200 credit link: https://m.do.co/c/82e70b3f86db -- Description -- In this 5-hour tutorial, we will be building a URL shortener web application using the powerful Nuxt.js framework, the real-time database and authentication platform Supabase, and the sleek and modern Tailwind CSS. We will begin by setting up the development environment and creating a new Nuxt project. From there, we will integrate Supabase to handle our database needs and handle user authentication. We will then implement the core functionality of our application, allowing users to shorten and share links. As we progress, we will learn how to use Nuxt's powerful features such as async data, middleware, and server-side rendering to create a fast and efficient web application. We will also explore Tailwind CSS and learn how to use its pre-defined classes to quickly create a beautiful and responsive layout. Throughout the tutorial, we will be building a scalable and robust web application that can handle high traffic and multiple users. We will also cover best practices for security and deployment, so you can confidently launch your own URL shortener. By the end of this tutorial, you will have a solid understanding of how to use Nuxt.js, Supabase, and Tailwind CSS to create a professional and functional web application. Whether you're a beginner or an experienced developer, this tutorial is designed to help you take your skills to the next level. So join us, and let's build a URL shortener together!