Wissen: E-learning Platform with Stripe Integration

Overview

Wissen is a modern e-learning platform that offers project-based coding courses. Users can browse and purchase individual courses or subscribe to Pro plans for unlimited access. The platform features secure authentication, payment processing with Stripe, and a seamless user experience built with Next.js.

Tech Stack

• Frontend: Next.js 15, React 19, TypeScript, Tailwind CSS, Radix UI
• Backend: Convex (serverless backend-as-a-service)
• Authentication: Clerk
• Payments: Stripe
• Email: Resend
• Dev Tools: ESLint, Turbopack

Setup & Installation

Prerequisites

• Node.js (v18 or higher)
• Convex account
• Clerk account
• Stripe account
• Resend account

Installation

1. Clone the repository:

   git clone <repository-url>
   cd wissen

2. Install dependencies:

   npm install

3. Environment Variables: Create a .env.local file with:

   NEXT_PUBLIC_CONVEX_URL=your_convex_url
   NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY=your_clerk_publishable_key
   CLERK_SECRET_KEY=your_clerk_secret_key
   STRIPE_SECRET_KEY=your_stripe_secret_key
   STRIPE_WEBHOOK_SECRET=your_stripe_webhook_secret
   RESEND_API_KEY=your_resend_api_key
   

4. Setup Convex:

   npx convex dev

5. Run the development server:

   npm run dev

Folder Structure

wissen/
├── convex/                 # Backend functions and schema
│   ├── _generated/         # Auto-generated Convex files
│   ├── auth.config.ts      # Clerk authentication config
│   ├── courses.ts          # Course-related queries/mutations
│   ├── purchases.ts        # Purchase handling
│   ├── schema.ts           # Database schema
│   ├── stripe.ts           # Stripe integration
│   ├── subscriptions.ts    # Subscription management
│   └── users.ts            # User management
├── src/
│   ├── app/                # Next.js app router
│   │   ├── api/            # API routes
│   │   ├── billing/        # Billing portal
│   │   ├── courses/        # Course pages
│   │   ├── pro/            # Pro subscription page
│   │   └── success/        # Purchase success pages
│   ├── components/         # Reusable UI components
│   ├── constants/          # App constants
│   ├── emails/             # Email templates
│   └── lib/                # Utility functions
├── coursesData.json        # Static course data
└── package.json

Key Features & Logic

Course Marketplace

• Browse and purchase individual coding courses
• Course details with pricing and descriptions
• Secure checkout process with Stripe

Pro Subscription Plans

• Monthly and yearly subscription options
• Unlimited access to all courses
• Exclusive community features and live sessions

User Authentication

• Secure login/signup with Clerk
• User profile management
• Purchase history tracking

Payment Integration

• Stripe checkout for one-time purchases
• Subscription management with Stripe Billing
• Webhook handling for payment events

Email Notifications

• Purchase confirmations
• Subscription updates
• Pro plan activation emails

My Contributions & Tweaks

• Implemented complete Stripe integration for both one-time and subscription payments
• Built responsive UI components with Tailwind CSS and Radix UI
• Integrated Clerk authentication with Convex
• Created email templates with React Email
• Added rate limiting and security measures

Learnings & Next Steps

• Mastered serverless backend development with Convex
• Gained expertise in Stripe payment flows and webhooks
• Improved skills in TypeScript and modern React patterns
• Learned to integrate multiple third-party services

Ideas for Future Enhancements

• Add course progress tracking
• Implement video streaming for course content
• Create instructor dashboard
• Add review and rating system
• Integrate with learning management systems

Credits

Based on: Ultimate Stripe tutorial by Codesistency