Create a Scalable URL Shortener App Using Nuxt 3, Supabase, and TainwilndCSS | Part 2/2
#nuxtjs #supabase #tailwindcss
Part 1/2: • Create a Scalable URL Shortener App U...
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 Recap
01:45 Topics
09:50 Getting User Agent from Request
11:09 Composable to get User Agent
20:53 Obtaining Location from User IP
23:00 Storing Click Info in Supabase
26:00 Setting up Row Level Security in Supabase
31:38 Supabse Functions & Triggers
38:40 Updating the UI with Analytics Data
39:07 Creating types for Supabase Schema
41:30 Showing data on the dashboard
42:50 Creating a Short URL details page
59:00 Summary
1:00:20 Deployment
1:08:10 Last Word
-- Recommended Videos --
How to use MongoDB/Mongoose in Nuxt 3: • How to use MongoDB/Mongoose in Nuxt 3...
Build a Nuxt 3 Tailwind CSS blog from scratch: • Build a Nuxt 3, Tailwind CSS Blog wit...
Deploy Nuxt3 Project on Digital Ocean: • Deploy Nuxt 3 App on Digital Ocean Ap...
Integrate Vuetify with Nuxt3: • How to add Vuetify (3) to Nuxt 3 Appl...
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!
About The Creator
This is Jahid, a System Architect and Full Stack Developer with a passion for startups. I have worked on a number of successful projects, both in large companies and as an Indie Hacker. Now sharing my knowledge with youtube on this channel.
Смотрите видео Create a Scalable URL Shortener App Using Nuxt 3, Supabase, and TainwilndCSS | Part 2/2 онлайн без регистрации, длительностью online в хорошем качестве. Это видео добавил пользователь Jahid Anowar 01 Январь 1970, не забудьте поделиться им ссылкой с друзьями и знакомыми, на нашем сайте его посмотрели 2,618 раз и оно понравилось 76 людям.