/Langster

Langster is an interactive language learning platform 🗣️ with AI-generated voices, gamified elements 🎮 like points 🌟, a hearts system ❤️, and leaderboards 🏆. It features a subscription-based pro tier 💳, an admin dashboard 📊, and a responsive design 📱

Primary LanguageTypeScript

🏫 Langster - Language Learning as a Service

Welcome to Langster! This project is a language learning platform designed to make learning engaging and fun. Users can pick courses, dive into lessons, and interact with questions using AI-generated voices. Read on to learn more about our key features, setup instructions, and the technologies used to build this platform.

🌐 Website Link: Langster

🎥 Demo Video

Untitled.video.-.Made.with.Clipchamp.1.mp4

🛠 System Diagrams

System Diagram 3 System Diagram 2 System Diagram 1

✨ Key Features

  • 🗣 Interactive Lessons: Engage with lessons using AI-generated voices.
  • ❤️ Dynamic Heart System: Stay motivated with a heart-based system.
  • 🌟 Points and Leaderboard: Compete and earn points on the leaderboard.
  • 🔄 Practice Old Lessons: Reinforce learning by revisiting previous lessons.
  • 🛍 Shop System: Redeem points for hearts in the shop.
  • 💳 Pro Tier with Subscription: Unlock unlimited hearts with a subscription.
  • 🏠 Landing Page: Attractive landing page to welcome new users.
  • 📊 Admin Dashboard: Manage content efficiently with React-based dashboard.
  • 📱 Mobile Responsiveness: Enjoy seamless experience across devices.

🛠 Technologies Used

  • 🌐 Next.js 14: Framework for building the platform.
  • 🗣 Elevenlabs AI: AI-generated voices for interactive lessons.
  • 🎨 Shadcn UI: Component system for beautiful UI.
  • 🔐 Clerk: Authentication and authorization.
  • 💾 DrizzleORM: Object-Relational Mapping for database operations.
  • 🗄 NeonDB and PostgresDB: Database management.
  • 🚀 Vercel: Deployment platform.
  • 🧙 Stripe: Payment gateway for subscription.
  • 🎭 KenneyNL: Visual assets and characters.

🖼️ Screenshots

1 2 3 4 5 6 7 8 9 10 11 12 1 2 3 4 5 6 7 8 9 10

🚀 Getting Started

To get started with Langster, follow these steps:

  1. Clone the Repository:

    git clone https://github.com/DhruvSharma19/Langster.git
cd Langster

  2. Install Dependencies:

    npm install

  3. Set Up Environment Variables: Create a .env file in the root directory and add the necessary environment variables.

  4. Run the Development Server:

    npm run dev

    The application should now be running on http://localhost:3000.

  5. Build for Production:

    npm run build
npm start

🤝 Contributions

We welcome contributions to Langster! To contribute:

  1. Fork the Repository: Click the "Fork" button at the top right corner of the repository page.

  2. Clone Your Fork:

    git clone https://github.com/your-username/Langster.git
cd Langster

  3. Create a New Branch:

    git checkout -b feature/your-feature-name

  4. Make Your Changes: Implement your feature or fix the bug.

  5. Commit Your Changes:

    git add .
git commit -m "Add your commit message here"

  6. Push to Your Fork:

    git push origin feature/your-feature-name

  7. Create a Pull Request: Open a pull request from your forked repository's branch to the main branch of the original repository.

We appreciate your contributions and will review your pull request as soon as possible!

🙏 Acknowledgements

A big thank you to everyone who contributed to this project! We appreciate your support and feedback.

If you have any questions or need assistance, feel free to open an issue or reach out to the project maintainers. Enjoy using Langster and happy coding! ✨