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

#nuxtjs #supabase #tailwindcss

Part 2/2:    • Create a Scalable URL Shortener App Using ...  

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:   / discord  
Twitter:   / jahiddev  

-- Project Links --
GitHub Link: https://github.com/jahidanowar/shrty
Figma Design: https://www.figma.com/file/daEyVZgvMX...

-- 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:    • How to use MongoDB/Mongoose in Nuxt 3 | Nu...  

Build a Nuxt 3 Tailwind CSS blog from scratch:    • Build a Nuxt 3, Tailwind CSS Blog with Wor...  

Deploy Nuxt3 Project on Digital Ocean:    • Deploy Nuxt 3 App on Digital Ocean App Pla...  

Integrate Vuetify with Nuxt3:    • How to add Vuetify (3) to Nuxt 3 Application  

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!