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
