This project is a fork of fuzzie-production, from the Youtube Video of Web Prodigies.
π Cheapest price to access Prodigies University: https://webprodigies.com/prodigiesuni...
Here is the discord if you want to hangout or get support: https://discord.gg/amjqmdyKHp Previous Video: Build A SAAS Website Builder, All in one CRM platform, Ticket tracking system, funnels, Stripe Connect, Sell Products through website builder etc: https://youtu.be/6omuUOZcWL0
IMPORTANT LINKS Clerk Authentication: https://go.clerk.com/qbebvpA Neon Tech: https://neon.tech/ Upload Care: https://uploadcare.com/?via=emmanuel Screen Studio: https://screenstudio.lemonsqueezy.com... Stripe Cheat Sheet: COMING SOON Google Drive App Link: https://console.cloud.google.com/mark... React Flow: https://reactflow.dev/ Start A SAAS For FREE Today: https://www.gohighlevel.com/?fp_ref=w... Github Code: https://github.com/webprodigies/fuzzi... License For Plura: https://webprodigies.com/license
Google Scopes for clerk // https://www.googleapis.com/auth/useri... // https://www.googleapis.com/auth/useri... // https://www.googleapis.com/auth/drive... // https://www.googleapis.com/auth/drive... // https://www.googleapis.com/auth/drive...
Features: FYI- all connection are setup from scratch we did not use an integration library π!!! We wanted to show you what it takes to create all this stuff. π€― B2C SaaS π’ Connect users Google Drive to the app π Watch for changes in google drive π Connect users slack to send notification and custom messages π» Connect users discord to send notification and custom messages π Connect users Notion to create entries in a database π Stripe to charge month to month subscriptions π Payments based on credits consumed π³ Beautiful redesigned node interface π¨ Drag and drop node builder π° Create automations flows π Create a sequence of actions to fire after a trigger event happens πΊοΈ Mini map to see all workflow nodes βοΈ Infinite Canvas β¨ Expandable sidebar with drag feature β‘οΈAceternity UI βοΈ Light & Dark mode π Functioning beautiful landing page
β° Timestamps: 0:00 - Intro 08:12 - AI Video Editor Screen Studio (Not paid sponsorship) 08:46 - Project Setup 09:29 - How to use Shadcn UI in Nextjs 14 11:49 - How to use Aceternity UI in Nextjs 14 14:46 - How to use https in localhost for Nextjs 14 17:04 - Navbar 20:30 - How to change fonts in Nextjs 14 24:12 - Setup Animations 24:55 - Landing Page 49:40 - How I made 40k through social media in 2 weeks 01:15:13 - Sidebar 01:26:39 - How to setup dark mode and light mode 01:32:48 - Settings Page 01:42:05 - Prisma And Neon Tech 01:49:07 - How to upload files in Nextjs14 with Uploadcare 01:59:09 - How to setup Authentication with Clerk 02:05:54 - Google Scopes 02:06:55 - How to setup Google Console 02:12:39 - How to use Ngrok in Nextjs 14 app 02:15:40 - Create Sign-in And Sign-up page 02:45:31 - Prodigies University (Become the best version of yourself) 02:51:37 - Implementing global state management for components for Integration & Automation
Intro Music - Perrin Joseph
Credits: Type: Web Prodigies Promotional Cinematic Audio. Music: High Alert by Soundridemusic Link to Video: https://www.youtube.com/watch?v=kscJH...
First, run the Next.js development server:
npm run dev
# or
yarn dev
# or
pnpm dev
# or
bun dev
Open http://localhost:3000 with your browser to see the result.
You can start editing the page by modifying app/page.tsx
. The page auto-updates as you edit the file.
This project uses next/font
to automatically optimize and load Inter, a custom Google Font.
To learn more about Next.js, take a look at the following resources:
- Next.js Documentation - learn about Next.js features and API.
- Learn Next.js - an interactive Next.js tutorial.
You can check out the Next.js GitHub repository - your feedback and contributions are welcome!
The easiest way to deploy your Next.js app is to use the Vercel Platform from the creators of Next.js.
Check out our Next.js deployment documentation for more details.