LearnNext - An Online Learning Platform

• A feature-rich online learning platform that allows users to explore and purchase, and learn from courses of their choice through videos.
• Built using NextJs and powered by TypeScript for enhanced code quality and maintainability.
• Utilizes Prisma along with MySQL for efficient database management.
• Achieved a sleek and responsive design using shadcn/ui (Radix UI) and TailwindCSS for an optimal user interface.
• Integrated MUX for seamless video streaming and Clerk for secure user authentication.
• Employed Zustand for dynamic state management, enhancing the platform's scalability.
• Implemented Stripe for smooth and secure payment processing, ensuring a comprehensive user experience.
• Ensured type-safe user input and form schema validations using Zod and React Hook Form.
• Implemented toast notifications, drag and drop feature, text editors, confetti animations and lots of other features to elevate user experience and engagement.
• Fully featured admin dashboard for adding courses and related resources along with a sales analytics section.

Screenshots

Environment Variables

NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY - ClerkJS environment variable

CLERK_SECRET_KEY - ClerkJS environment variable

NEXT_PUBLIC_CLERK_SIGN_IN_URL - /sign-in

NEXT_PUBLIC_CLERK_SIGN_UP_URL - /sign-up

NEXT_PUBLIC_CLERK_AFTER_SIGN_IN_URL - /

NEXT_PUBLIC_CLERK_AFTER_SIGN_UP_URL - /

DATABASE_URL - Database URL

UPLOADTHING_SECRET - UploadThing environment variable

UPLOADTHING_APP_ID - UploadThing environment variable

MUX_TOKEN_ID - MUX environment variable

MUX_TOKEN_SECRET - MUX environment variable

STRIPE_API_KEY - Stripe API Key

NEXT_PUBLIC_APP_URL - URL of the app

STRIPE_WEBHOOK_SECRET - Stripe webhook key

NEXT_PUBLIC_INSTRUCTOR_ID - userId of Admin (from Clerk)

Tech Used

NextJS, TailwindCSS, Typescript, MySQL, Prisma