Build Full Stack Project with Nextjs, React, Tailwind, Next Auth

In this tutorial, I walk you through building ShortLink - a professional URL shortener with advanced features including AI-powered safety checks, user authentication, custom short codes, QR code generation, and click tracking!

🤝 CONNECT WITH ME:
My portfolio : https://www.fiston.net
Discord:   / discord  

💼 Business: fiston.turner@outlook.com

🚀 What You'll Learn:
Setting up a modern Next.js 15 project with TypeScript
Implementing Drizzle ORM with PostgreSQL for type-safe database operations
Creating server actions for secure data handling
Implementing Next-Auth for robust user authentication
Building a beautiful UI with Tailwind CSS and Shadcn UI components
Adding AI-powered URL safety checks with Google's Gemini AI
Implementing role-based access control (user & admin roles)
Creating a complete dashboard with analytics and URL management
Generating QR codes for shortened URLs
Adding advanced features like custom short codes

🧰 Tech Stack:
Frontend: Next.js 15, React 19, Tailwind CSS, Shadcn UI
Backend: Next.js Server Actions, Next-Auth
Database: PostgreSQL, Drizzle ORM
AI Integration: Google Gemini API
Authentication: Next-Auth with JWT strategy
Deployment: Ready for Vercel deployment

⏱️ Timestamps:
00:00 - Introduction & Project Overview
02:47 - Setting up Next.js & Dependencies
06:00 - Basic Url Shortener Form
26:00 - Database Schema with Drizzle ORM
42:55 - URL Shortening Functionality
01:22:57 - Authentication With Next Auth
03:08:25 - User Dashboard
06:29:27 - Url Link Page
08:05:26 - Admin Dashboard

🔗 Important Links:
Demo Site: https://www.rname.ink
GitHub Repository: https://www.rname.ink/r/shortlink
Drizzle ORM: https://www.rname.ink/r/drizzle
Next Auth: https://www.rname.ink/r/next-auth
Next.js Documentation: https://www.rname.ink/r/nextjs
Shadcn UI: https://www.rname.ink/r/shadcn
Google Gemini AI: https://www.rname.ink/r/gemini


Don't forget to LIKE 👍 and SUBSCRIBE 🔔 for more full-stack development tutorials!