Build a Duolingo Clone With Nextjs, React, Drizzle, Stripe (2024)

Key Concepts

• SaaS Language Learning Software: Building a subscription-based application for language education.
• Next.js: A React framework used for building the application.
• Shadcn UI: A collection of reusable components for building the UI.
• Tailwind CSS: A utility-first CSS framework for styling.
• Clerk: A service for user authentication.
• Neon: A serverless PostgreSQL database.
• Drizzle ORM: A TypeScript ORM for interacting with the database.
• Stripe: A payment processing platform for handling subscriptions.
• 11 Labs AI: An AI platform for generating realistic voices.
• Vercel: A platform for deploying web applications.
• Route Groups: Next.js feature for organizing routes without affecting URLs.
• Layout Components: Reusable components for consistent UI across pages.
• Server Actions: Functions that run on the server in Next.js.
• Webhooks: Automated HTTP requests triggered by events in another system (Stripe).

Detailed Summary

1. Introduction and Overview

• The video demonstrates how to build a language learning SaaS application with features like AI-generated voices, dynamic hearts, points, a shop, a leaderboard, and premium subscriptions.
• The application includes a landing page, an admin dashboard, and is fully responsive.

2. Setting Up the Next.js Application

• System Requirements: Checks for the necessary Node.js version.
• Automatic Installation: Uses a command to automatically set up the Next.js project.
• Project Structure: Explains the basic file structure, including the app folder, node_modules, public folder, and configuration files like tailwind.config.js and tsconfig.json.
• Shadcn UI Installation: Installs Shadcn UI, emphasizing that it's a collection of reusable components, not a component library.
  • Uses the CLI command npx shadcn-ui@latest init.
  • Selects the default style and Slate color.
• Running the Project: Uses npm run dev to start the application on localhost:3000.

3. Customizing the Application

• Changing the Font: Modifies the layout.tsx file to use the Nunito font from Google Fonts.
• Adding a Button Component: Adds a button component from Shadcn UI using npx shadcn-ui@latest add button.
• Component Library: Explains how Shadcn UI components are added directly to the project's source code, allowing for easy customization.
• Button Variants: Demonstrates how to modify button variants using the class-variance-authority library.

4. Building a Component Library for Buttons

• Route Creation: Explains how to create new routes using the app folder and page.tsx files.
• Route Groups: Introduces route groups using parentheses to create organizational folders that don't affect the URL structure.
• Layout Files: Explains how to use layout files to create reusable layouts with a children prop.
• Button Styling: Modifies the default button styles, including rounded corners, uppercase text, and letter spacing.
• Creating Button Variants: Styles different button variants like primary, secondary, danger, and super using Tailwind CSS classes.

5. Building the Marketing/Landing Page

• Route Groups and Layouts: Uses route groups to organize the marketing page and layout files to create a reusable header and footer.
• Header Component: Creates a header component with a logo and authentication options.
• Footer Component: Creates a footer component with language flags.
• Authentication with Clerk: Integrates Clerk for user authentication.
  • Installs the clerk-nextjs package.
  • Adds the Clerk provider to the layout.tsx file.
  • Configures the middleware to protect routes.
• Conditional Rendering: Shows different content based on whether the user is logged in or not.
• Hero Image: Adds a hero image and text to the landing page.

6. Adding Authentication to the Marketing Page

• Clerk Setup: Creates an account on Clerk and sets up a new application.
• Environment Variables: Copies the environment keys from Clerk and adds them to the .env file.
• Clerk Provider: Wraps the application with the Clerk provider in layout.tsx.
• Middleware Configuration: Adds middleware to protect routes, allowing only the landing page to be public.
• User Button: Adds a user button from Clerk for managing user accounts.
• Sign-in Button: Adds a sign-in button that opens a modal from Clerk.

7. Styling the Header and Main Content

• Responsive Design: Uses Tailwind CSS classes to create a responsive header and main content area.
• Logo and Navigation: Adds a logo and navigation links to the header.
• Hero Image and Text: Adds a hero image and text to the main content area.
• Conditional Buttons: Shows different buttons based on whether the user is logged in or not.

8. Adding the Footer Component

• Flag Images: Adds flag images to the footer to represent the languages offered in the application.
• Footer Styling: Styles the footer component using Tailwind CSS classes.

9. Creating the Learn Page Layout

• Route Group for Main Application: Creates a route group called (main) to separate the main application routes.
• Layout File for Main Application: Creates a layout file for the main application with a sidebar and main content area.
• Sidebar Component: Creates a sidebar component with navigation links and a user button.
• Mobile Header Component: Creates a mobile header component with a menu icon to open the sidebar.
• Shadcn UI Sheet Component: Installs the Shadcn UI sheet component to create a drawer for the sidebar on mobile devices.
• Responsive Design: Uses Tailwind CSS classes to create a responsive layout that adapts to different screen sizes.

10. Building the Sidebar

• Sidebar Structure: Adds a logo, navigation links, and a user button to the sidebar.
• Sidebar Item Component: Creates a reusable sidebar item component with a label, icon, and link.
• Dynamic Styling: Uses Tailwind CSS classes to style the sidebar items based on whether they are active or not.
• Logout Button: Adds a logout button to the sidebar.

11. Developing the Learn Page Layout

• Sticky Sidebar: Creates a sticky sidebar that stays in place while the user scrolls through the main content area.
• Feed Wrapper: Creates a feed wrapper to hold the main content area.
• Header Component: Creates a header component with a title and back button.
• User Progress Component: Creates a user progress component with information about the user's active course, hearts, and points.

12. Setting Up the Database with Neon and Drizzle ORM

• Neon Database Setup: Creates a new project and database on Neon.
• Environment Variables: Adds the database URL to the .env file.
• Drizzle ORM Installation: Installs Drizzle ORM and the Neon database serverless adapter.
• Drizzle Kit Installation: Installs Drizzle Kit as a dev dependency.
• Database Configuration: Creates a database folder and configures Drizzle ORM to connect to the Neon database.
• Schema Definition: Creates a schema.ts file to define the database schema, including the courses table.
• Drizzle Config: Creates a drizzle.config.ts file to configure Drizzle Kit.
• Pushing the Schema: Uses npm run database push to push the schema to the Neon database.
• Drizzle Studio: Uses npm run database studio to open the Drizzle Studio and view the database.

13. Adding Data to the Database

• Drizzle Studio: Uses the Drizzle Studio to add data to the courses table.
• Queries File: Creates a queries.ts file to define queries for fetching data from the database.
• Get Courses Query: Creates a get courses query to fetch all courses from the database.
• Courses Page: Creates a courses page to display the courses from the database.
• List Component: Creates a list component to render the courses.
• Card Component: Creates a card component to display each course.

14. Implementing User Progress

• User Progress Table: Creates a user_progress table to store the user's active course, hearts, and points.
• Relations: Defines relations between the user_progress and courses tables.
• Get User Progress Query: Creates a get user progress query to fetch the user's progress from the database.
• Redirect: Redirects the user to the courses page if they don't have an active course.
• Upsert User Progress Action: Creates a server action to upsert the user's progress in the database.
• Revalidate Path: Uses revalidatePath to clear the cache and update the UI.

15. Seeding the Database and Improving the UI

• Seed Script: Creates a seed script to populate the database with initial data.
• Database Reset: Explains how to completely reset the database by deleting it from Neon and creating a new one.
• Dynamic Header: Updates the header to display the user's active course and progress.
• Loading States: Adds loading states to the UI to improve the user experience.

16. Expanding the Database Schema

• Units Table: Adds a units table to store the units of each course.
• Lessons Table: Adds a lessons table to store the lessons of each unit.
• Challenges Table: Adds a challenges table to store the challenges of each lesson.
• Challenge Options Table: Adds a challenge_options table to store the options for each challenge.
• Challenge Progress Table: Adds a challenge_progress table to store the user's progress on each challenge.
• Relations: Defines relations between all the tables.

17. Building the Learn Page

• Get Units Query: Creates a get units query to fetch the units, lessons, and challenges for a course.
• Normalization: Normalizes the data to include a completed field for each lesson.
• Unit Component: Creates a unit component to display the units and lessons.
• Lesson Button Component: Creates a lesson button component to display each lesson.
• Dynamic Styling: Uses Tailwind CSS classes to style the components based on their state.

18. Adding Interactivity and Audio Feedback

• React Use: Installs the react-use library for its collection of useful hooks.
• Use Audio Hook: Uses the useAudio hook to play audio files when the user clicks on a card.
• Use Key Hook: Uses the useKey hook to trigger actions when the user presses a key.
• Mobile Header Component: Creates a mobile header component with a menu icon to open the sidebar.
• Shadcn UI Sheet Component: Installs the Shadcn UI sheet component to create a drawer for the sidebar on mobile devices.

19. Implementing the Quiz Logic

• State Management: Uses the useState hook to manage the state of the quiz, including the active index, selected option, and status.
• On Select Method: Creates an onSelect method to handle the selection of a challenge option.
• Footer Component: Creates a footer component with a check button to submit the answer.
• Dynamic Styling: Uses Tailwind CSS classes to style the components based on their state.

20. Implementing Challenge Progress and Error Handling

• Upsert Challenge Progress Action: Creates a server action to upsert the user's progress on a challenge.
• Reduce Hearts Action: Creates a server action to reduce the user's hearts if they answer a challenge incorrectly.
• Revalidate Path: Uses revalidatePath to clear the cache and update the UI.
• Error Handling: Adds error handling to the server actions and displays toast messages to the user.

21. Implementing the Finish Screen and Practice Mode

• Finish Screen: Creates a finish screen to display when the user completes a lesson.
• Practice Mode: Implements a practice mode that allows the user to regain hearts and points without losing them.
• Use Mount Hook: Uses the useMount hook to trigger actions on component mount.

22. Implementing the Shop Page and Stripe Subscriptions

• Shop Page Layout: Creates a shop page layout with a sticky sidebar and main content area.
• Get User Subscription Query: Creates a get user subscription query to fetch the user's subscription status from the database.
• Stripe Configuration: Configures Stripe to handle subscriptions.
• Create Stripe URL Action: Creates a server action to create a Stripe checkout URL.
• Webhooks: Implements a webhook to handle Stripe events, such as successful payments and subscription renewals.

23. Setting Up Stripe Webhooks

• Stripe CLI: Installs the Stripe CLI and uses it to forward events to the local development environment.
• Webhook Endpoint: Creates a webhook endpoint in the Next.js application to receive Stripe events.
• Event Handling: Handles the checkout.session.completed and invoice.payment_succeeded events to create and update user subscriptions in the database.
• Security: Verifies the Stripe signature to ensure that the webhook is legitimate.

24. Finalizing the Application

• Addressing To-Do Items: Reviews and addresses all the to-do items in the code.
• Code Cleanup: Cleans up the code and removes any unnecessary comments or code.
• Testing: Thoroughly tests the application to ensure that all features are working correctly.

25. Building the Admin Dashboard

• React Admin: Installs React Admin and its data provider.
• API Routes: Creates API routes for all the entities in the application.
• Resource Definition: Defines resources for each entity in the React Admin dashboard.
• List and Edit Views: Creates list and edit views for each resource.
• Authentication: Protects the admin dashboard with authentication.

26. Deploying the Application

• GitHub Repository: Creates a GitHub repository for the application.
• Vercel Deployment: Deploys the application to Vercel.
• Environment Variables: Configures the environment variables in Vercel.
• Stripe Webhook: Configures the Stripe webhook to point to the deployed application.

27. Conclusion

• The video provides a comprehensive guide to building a language learning SaaS application with Next.js, Shadcn UI, Clerk, Neon, Drizzle ORM, and Stripe.
• The application includes a landing page, an admin dashboard, and is fully responsive.
• The video covers a wide range of topics, including UI design, data modeling, authentication, payment processing, and deployment.

Synthesis/Conclusion of Main Takeaways

This video provides a detailed, step-by-step guide to building a complex SaaS application. It emphasizes the importance of using modern tools and frameworks like Next.js, Shadcn UI, and Drizzle ORM to streamline development. The tutorial also highlights the need for careful planning, data modeling, and security considerations when building a production-ready application. By following the instructions and examples provided, developers can gain valuable insights into building scalable and feature-rich web applications.