CodeFount - SaaS Code Editor - Next.js 15

CodeFount - An Online IDE

📋 Table of Contents

1. 🤖 Introduction
2. ⚙️ Tech Stack
3. 🔋 Features
4. 🤸 Quick Start

🤖 Introduction

CodeFount is a powerful online integrated development environment (IDE) built with modern technologies to streamline coding and collaboration. Designed for developers, it supports multi-language programming, offers advanced customization, and provides a seamless coding experience.

⚙️ Tech Stack

• React 19: The foundation of the project, ensuring high performance and scalability.
• Next.js 15: The foundation of the project, ensuring high performance and scalability.
• Convex: Provides a robust backend for real-time data handling.
• Clerk: Simplifies user authentication and management.
• TypeScript: Ensures type safety and improved developer experience.
• Tailwind CSS: Offers a customizable and responsive UI.
• Sentry: Offers Error & Bug Tracking.
• EmailJS: For emailing feature in support page.
• Lemon Squeezy: For payment.

🔋 Features

• 🚀 Cutting-Edge Tech Stack: Built with Next.js 15, Convex, Clerk, and TypeScript.
• 💻 Multi-Language Support: Code in 15 different programming languages.
• 🎨 Customizable Experience: Choose from 5 VSCode-inspired themes.
• ✨ Smart Output Handling: Display Success & Error states for code execution.
• 💎 Flexible Pricing: Free and Pro plans tailored to your needs.
• 🤝 Community-Driven Sharing: Share and discover code snippets.
• 🔍 Advanced Search: Filter and search for specific snippets or projects.
• 👤 Personal Profiles: Track execution history and user statistics.
• 📊 Dashboard: View comprehensive usage statistics.
• 📝 Custom Cursor: Custom Cursor for all devices.
• 📊 Mouse Follower: Mouse Follower for all devices (except mobile).
• ⚙️ Font Size Control: Customize your coding experience.
• 🔗 Webhook Integration: Seamlessly connect with external tools.
• 🌟 Deployment Guide: Step-by-step instructions for deploying your app.

🤸 Quick Start

Prerequisites

To run this project, ensure you have the following installed:

• Node.js (v16 or later)
• npm or yarn

Installation

1. Clone the repository:

   git clone https://github.com/ArhanAnsari/CodeFount.git
   cd CodeFount

2. Install dependencies:

   npm install

Configuration

1. Create a .env file in the root directory and add the following environment variables:

   NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY=
   CLERK_SECRET_KEY=
   CONVEX_DEPLOYMENT=
   NEXT_PUBLIC_CONVEX_URL=
   
   CLERK_WEBHOOK_SECRET=
   LEMON_SQUEEZY_WEBHOOK_SECRET=

2. Configure additional secrets in the Convex Dashboard:

   CLERK_WEBHOOK_SECRET=
   LEMON_SQUEEZY_WEBHOOK_SECRET=

3. Set up Convex:

   • Install the Convex CLI:

     npm install -g convex

   • Login to your Convex account:

     convex login

   • Initialize Convex in your project:

     convex init

   • Deploy your Convex functions:

     convex deploy

   • Copy the Convex deployment URL and add it to your .env file under CONVEX_DEPLOYMENT.

   • Or simply run:

   npx convex dev

   Then follow the instruction

Running the Application

Start the development server:

npm run dev

Visit http://localhost:3000 to explore the application.

Deployment

Follow the comprehensive deployment walkthrough provided in the app to set up your SaaS Code Editor on a production server.

Contributions

We welcome contributions from the community! Please follow these steps to contribute:

1. Fork the repository.
2. Create a new branch for your feature: git checkout -b feature-name
3. Commit your changes: git commit -m "Add new feature"
4. Push to the branch: git push origin feature-name
5. Open a pull request.

License

This project is licensed under the MIT License.

Support

For any issues or feature requests, please open an issue in the repository.

---

Enjoy using the CodeFount! 🚀