Sometimes Envato’s live preview system temporarily breaks links. Please use the direct demo link with credentials mentioned below :

LIVE DEMO – Try Before You Buy!

Live Application: CodeLearn

User Demo Credentials:>

Live Application: CodeLearn

• Email:webbuddy2024@gmail.com
• Password:webbuddy2024

Overview

CodeLearn is a complete, production-ready web application that helps users learn programming through AI-powered tools. Built with Next.js 14, React 18, and TypeScript, this application provides a seamless experience for translating code between programming languages, learning through AI-generated lessons, practicing with coding challenges, and getting personalized help from an AI tutor. The platform features a modern, responsive design and includes everything needed to run a code learning SaaS business, from user authentication to payment processing.

⚠️ Important: External API Costs Disclaimer

Please note that this application requires external API services to function, and you will incur costs based on your usage of these services.

This application integrates with several third-party services that charge fees based on usage:

• OpenAI-Compatible AI Models – Charges per API request for AI-powered translation, lesson generation, challenge creation, and tutoring. Costs vary based on the AI model used and the number of tokens processed. You can use OpenAI, Anthropic, or any OpenAI-compatible endpoint. You pay directly to your chosen AI provider for each API request.
• Stripe – Charges a transaction fee of 2.9% plus $0.30 per successful payment transaction when users purchase subscriptions.
• MongoDB – Free tier available for development with 512MB storage. Production use may require a paid plan based on storage, bandwidth, and usage. MongoDB Atlas offers a free tier suitable for small applications. Check MongoDB Atlas pricing for current rates.

You are responsible for all costs associated with these external services. The purchase price of this application includes only the source code and does not include any API credits, service subscriptions, or usage fees. Before deploying this application, please review the pricing pages of all required services to understand the costs you will incur based on your expected usage volume.

While many services offer free tiers suitable for development and testing, production use will require paid plans. Ensure you have budgeted for ongoing API costs based on your expected user base and usage patterns.

Key Features

AI Code Translator

Instantly translate code between 50+ programming languages with AI-powered accuracy. The application uses OpenAI-compatible AI models to understand source code context, preserve logic, and generate syntactically correct code in the target language. Perfect for learning new programming languages, migrating projects, or understanding code written in unfamiliar languages.

Supported Languages

The translator supports a wide range of programming languages including:

• JavaScript, TypeScript, Python, Java, C, C++, C#
• Go, Rust, Swift, Kotlin, Scala, Ruby, PHP
• R, Dart, Haskell, Elixir, Clojure, Julia
• SQL, HTML, CSS, Bash, PowerShell
• And many more…

AI-Generated Lessons

Personalized lessons tailored to your skill level and learning goals:

• Choose from Easy, Medium, or Hard difficulty levels
• Select any programming language and topic
• AI generates comprehensive lesson content with explanations
• Code examples with detailed walkthroughs
• Practice exercises integrated into lessons
• Save and organize lessons for future reference

AI Practice Challenges

Generate unlimited coding challenges to sharpen your skills:

• Create challenges in any programming language
• Difficulty levels from beginner to advanced
• Organize challenges in custom folders
• AI-powered feedback on your solutions
• Track completion status and progress
• Built-in code editor with syntax highlighting

AI Tutor/Problem Solver

Get instant help with coding problems 24/7:

• Ask questions in natural language
• Get explanations for complex concepts
• Debugging assistance with code analysis
• Personalized guidance based on your level
• Conversation history for context continuity
• Support for all programming languages

User Management

Complete user management system with the following features:

• User authentication powered by NextAuth.js (email/password)
• User profiles with preferences and settings
• User dashboard for managing account and viewing statistics
• Translation history tracking with date-based organization
• Credit balance management and subscription tracking
• Secure session management with automatic token refresh
• Password reset functionality with email verification

Credit System

Flexible credit-based pricing system with three subscription plans:

• Free – 10 translations per month, GPT-3.5 model, 7-day history
• Pro ($19/month) – 500 translations per month, GPT-4 model, 30-day history, API access
• Enterprise ($99/month) – Unlimited translations, GPT-4 Turbo model, unlimited history, 24/7 support

Annual billing available with significant savings (Pro: $15/month, Enterprise: $79/month).

Payment Processing

Integrated Stripe payment system for secure subscription purchases. The application handles checkout sessions, webhook processing, and automatic subscription management upon successful payment. All payments are processed securely through Stripe’s infrastructure.

Pages and Navigation

The application includes the following pages:

• Landing Page (Home) – Marketing page with features, pricing, testimonials, and FAQ
• Dashboard – Main interface with translation tool, quick stats, and recent activity
• Translator Page – Full-featured code translation interface with Monaco Editor
• Lessons Page – Browse, create, and study AI-generated lessons
• AI Practice Page – Create and solve coding challenges
• AI Tutor Page – Chat interface for coding assistance
• History Page – View and manage past translations
• Billing Page – Subscription plans and credit purchase
• Settings Page – User preferences and account settings
• Login/Signup Pages – Secure authentication flows
• Forgot Password/Reset Password Pages – Password recovery functionality
• About, Blog, Contact, Privacy, Terms, Cookies Pages – Informational pages

Technical Specifications

Technology Stack

• Framework: Next.js 14 with Pages Router
• Language: TypeScript
• UI Library: Tailwind CSS
• Code Editor: Monaco Editor (@monaco-editor/react)
• Database: MongoDB
• Authentication: NextAuth.js
• Payments: Stripe with webhooks
• AI Integration: OpenAI-compatible API models (configurable base URL and API keys)
• Icons: Lucide React, FontAwesome
• State Management: Zustand
• Notifications: React Hot Toast
• Markdown Rendering: React Markdown
• Date Handling: date-fns

System Requirements

• Node.js 18 or higher
• npm or yarn package manager
• MongoDB database (MongoDB Atlas recommended)
• API keys for required services (OpenAI-compatible AI provider, Stripe)
• Email service for password reset (Nodemailer configured)

Deployment Options

The application can be deployed on:

• Vercel (recommended for easy deployment with Next.js)
• AWS EC2 (for more control and custom server configuration)
• Any Node.js hosting platform that supports Next.js

API and Service Requirements

To run this application, you will need to create accounts and obtain API keys from the following services. Some services offer free tiers suitable for development and small-scale production use.

Required Services

OpenAI-Compatible AI Provider

OpenAI-compatible AI models provide the AI capabilities for code translation, lesson generation, challenge creation, and tutoring. You can use:

• OpenAI (GPT-4, GPT-3.5, GPT-4 Turbo, etc.)
• Anthropic (Claude models)
• Local models with OpenAI-compatible API (Ollama, LM Studio, etc.)
• Any other OpenAI-compatible endpoint

Pricing varies based on the provider and model chosen. Check your chosen provider’s pricing page for current rates.

MongoDB

MongoDB handles database storage for user data, translations, lessons, challenges, and progress tracking. MongoDB Atlas offers a free tier with 512MB storage suitable for development and small applications. Paid plans start if you exceed the free tier limits. Visit MongoDB Atlas pricing page for detailed pricing information.

Stripe

Stripe processes credit card payments for subscription purchases. Stripe charges a transaction fee of 2.9% plus $0.30 per successful transaction. There are no monthly fees for standard accounts. Visit Stripe pricing page for complete fee structure.

Email Service (Optional but Recommended)

An email service is required for password reset functionality. The application uses Nodemailer and can be configured with various email providers (Gmail, SendGrid, AWS SES, etc.). Some providers offer free tiers suitable for development.

Installation and Setup

The application includes comprehensive documentation covering:

• Environment variable configuration
• MongoDB database setup and connection
• NextAuth.js authentication setup
• OpenAI-compatible API configuration
• Stripe payment setup and webhook configuration
• Email service configuration
• Deployment guides for Vercel and other platforms
• Frontend customization guide
• Pricing and credit configuration
• User guide and feature documentation

All setup instructions are provided in documentation files included with the purchase. The documentation includes step-by-step guides with code examples.

What’s Included

• Complete Next.js 14 application source code
• TypeScript source files
• All UI components and styling (Tailwind CSS)
• API routes: translations, lessons, challenges, tutor chat, user profile, authentication (login, register, logout, password reset), Stripe (checkout, subscription management), history, and progress tracking
• MongoDB database integration
• NextAuth.js authentication
• Stripe payment processing integration
• OpenAI-compatible AI integration (configurable)
• Monaco Editor integration for code editing
• Comprehensive documentation
• Environment variable templates
• Deployment configuration files
• Error handling and validation
• Credit management system
• Translation and learning history
• Progress tracking system

Customization

The application is fully customizable:

• Modify subscription pricing and credit amounts
• Adjust translation limits per plan
• Customize AI prompts for translation, lessons, and tutoring
• Modify AI model configurations
• Change color schemes and branding
• Modify UI components and layouts
• Add custom features and functionality
• Add or remove supported programming languages
• Customize lesson difficulty levels
• Modify challenge categories and types
• Customize the landing page content

Support and Updates

This is a complete, production-ready application. The code follows Node.js best practices and Envato submission requirements. All code is well-structured, documented, and ready for deployment. The application includes comprehensive error handling, input validation, and secure authentication mechanisms.