Build a Full Stack SASS AI Portfolio Builder with React, Nextjs, TypeScript in 2025 - Frontend

In this video, we’ll build a cutting-edge AI-powered Full-Stack Portfolio Builder SASS AI from scratch using Next.js 15, Tailwind CSS, Shadcn UI, MongoDB, and advanced AI integrations.


🔹 What You’ll Learn

Backend (API):

Scalable backend with Next.js API routes
Authentication & Authorization (Clerk / Auth systems)
MongoDB + Mongoose integration
REST API design & secure middleware (CORS, CSRF)
AI features (Open AI API for portfolio generation & smart suggestions)
Payments with Stripe
Production best practices: logging, error handling & validations (Zod)

Frontend:

Modern UI with Next.js App Router, Tailwind CSS & Shadcn UI
Reusable components (forms, modals, dashboards)
API calls with Axios
Portfolio editor with real-time AI content generation
Responsive & accessible design
Deployment of frontend + backend for production

💡 By the end, you’ll be able to connect frontend + backend + AI into one powerful app that users can actually deploy and use to build and share their portfolios.

👉 Perfect for developers who want to upgrade their full-stack skills in 2025 and learn how real SaaS products are built.


📚 Get files & Links

🔴FRONTEND WEBSITE
👉Source code https://github.com/sylvaincodes/10min...
👉Demo https://10minportfolio.app
👉Figma https://www.figma.com/design/hnubJRSA...


👉 Next js : https://nextjs.org
👉Clerk auth: http://clerk.com
👉MongoDB: https://www.mongodb.com

🔗 FOLLOW ME ON
------------------------------------------------

💻 Github: https://github.com/sylvaincodes
🔴 Patrean   / sylvaincodes  


⏱️ Timestamps
---------------------------
00:00:00 - Frontend before
00:00:39 - Frontend in 2025
00:02:02 - What you are going to learn ?
00:03:38 - Intro
00:05:48 - Dev environment
00:06:25 - Project Structure
00:14:27 - Figma Integration
00:42:19 - Layout System
00:54:54 - StoryBook
01:26:00 - i18n
01:56:57 - Clerk Auth
02:04:12 - Landing page
03:29:30 - Public portfolio page
04:45:55 - Admin dashboard
07:58:42 - User Dashboard




🔗 MUSIC
-------------------------------
MySelft

⚠️ DISCLAIMER
The disclaimer video is intended for educational purposes only. Copyright Disclaimer Under Section 107 of the Copyright Act 1976, allowance is made for "fair use" for purposes such as criticism, comment, reporting current affairs, teaching, scholarship and research. Fair use is permitted by copyright law that might otherwise be infringing. Non-profit, educational or personal use tips the balance in favor of fair use.

#nextjs
#frontend
#nextjstutorial
#reactjs
#backend
#sass
#react