|
1 |
| -This is a [Next.js](https://nextjs.org) project bootstrapped with [`create-next-app`](https://nextjs.org/docs/app/api-reference/cli/create-next-app). |
| 1 | +# Codeo |
| 2 | + |
| 3 | +Codeo is an advanced online code editor that allows users to write, run, and share code snippets in various programming languages. Users can save their code, share it with others, and engage in discussions through comments. This project leverages Next.js, Convex, and other modern technologies to provide a seamless coding experience. |
| 4 | + |
| 5 | +## Features |
| 6 | + |
| 7 | +- **Multi-Language Support**: Write and execute code in multiple programming languages. |
| 8 | +- **Code Sharing**: Share your code snippets with others and allow them to view, save, and comment on them. |
| 9 | +- **Customizable Editor**: Personalize your coding environment with themes, font sizes, and more. |
| 10 | +- **Persistent State**: Automatically save your preferences and code to local storage. |
| 11 | +- **Real-Time Collaboration**: Collaborate with others in real-time (upcoming feature). |
| 12 | + |
| 13 | +## Technologies Used |
| 14 | + |
| 15 | +- **Next.js**: A React framework for building fast and user-friendly web applications. |
| 16 | +- **Convex**: A powerful backend as a service (BaaS) that simplifies data storage and real-time communication. |
| 17 | +- **Monaco Editor**: The code editor that powers Visual Studio Code, integrated into the browser. |
| 18 | +- **Zustand**: A small, fast, and scalable state management solution for React. |
| 19 | +- **Tailwind CSS**: A utility-first CSS framework for rapidly building custom designs. |
2 | 20 |
|
3 | 21 | ## Getting Started
|
4 | 22 |
|
5 |
| -First, run the development server: |
| 23 | +### Prerequisites |
| 24 | + |
| 25 | +Ensure you have the following installed on your system: |
| 26 | + |
| 27 | +- Node.js (>=14.x.x) |
| 28 | +- npm or yarn |
| 29 | + |
| 30 | +### Installation |
| 31 | + |
| 32 | +1. Clone the repository: |
| 33 | + ```bash |
| 34 | + git clone https://github.com/kirtiraj22/codeo.git |
| 35 | + ``` |
| 36 | +2. Navigate to the project directory: |
| 37 | + ```bash |
| 38 | + cd codeo |
| 39 | + ``` |
| 40 | +3. Install dependencies: |
| 41 | + ```bash |
| 42 | + npm install |
| 43 | + # or |
| 44 | + yarn install |
| 45 | + ``` |
6 | 46 |
|
| 47 | +### Running the Project |
| 48 | + |
| 49 | +To start the development server: |
7 | 50 | ```bash
|
8 | 51 | npm run dev
|
9 | 52 | # or
|
10 | 53 | yarn dev
|
11 |
| -# or |
12 |
| -pnpm dev |
13 |
| -# or |
14 |
| -bun dev |
15 | 54 | ```
|
| 55 | +Open [http://localhost:3000](http://localhost:3000) in your browser to see the application in action. |
| 56 | + |
| 57 | +## Usage |
16 | 58 |
|
17 |
| -Open [http://localhost:3000](http://localhost:3000) with your browser to see the result. |
| 59 | +1. **Select a Language**: Choose your preferred programming language from the dropdown. |
| 60 | +2. **Write Code**: Use the editor to write your code. The editor supports syntax highlighting and autocompletion. |
| 61 | +3. **Run Code**: Execute your code directly within the browser and view the output. |
| 62 | +4. **Save and Share**: Save your code snippets and share them with others using a unique link. |
| 63 | +5. **Comment and Collaborate**: Engage with other users by commenting on shared snippets. |
18 | 64 |
|
19 |
| -You can start editing the page by modifying `app/page.tsx`. The page auto-updates as you edit the file. |
| 65 | +## Configuration |
| 66 | + |
| 67 | +### Environment Variables |
| 68 | + |
| 69 | +Create a `.env.local` file in the root of your project and add the following variables: |
| 70 | + |
| 71 | +```env |
| 72 | +NEXT_PUBLIC_API_URL=your_api_url_here |
| 73 | +CLERK_WEBHOOK_SECRET=your_clerk_webhook_secret_here |
| 74 | +``` |
20 | 75 |
|
21 |
| -This project uses [`next/font`](https://nextjs.org/docs/app/building-your-application/optimizing/fonts) to automatically optimize and load [Geist](https://vercel.com/font), a new font family for Vercel. |
| 76 | +### Customization |
22 | 77 |
|
23 |
| -## Learn More |
| 78 | +You can customize the editor's theme, font size, and language through the settings menu. Your preferences will be saved and applied on your next visit. |
24 | 79 |
|
25 |
| -To learn more about Next.js, take a look at the following resources: |
| 80 | +## Contributing |
26 | 81 |
|
27 |
| -- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API. |
28 |
| -- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial. |
| 82 | +We welcome contributions! Follow these steps to contribute to Codeo: |
29 | 83 |
|
30 |
| -You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js) - your feedback and contributions are welcome! |
| 84 | +1. Fork the repository. |
| 85 | +2. Create a new branch: |
| 86 | + ```bash |
| 87 | + git checkout -b feature/your-feature-name |
| 88 | + ``` |
| 89 | +3. Make your changes and commit them: |
| 90 | + ```bash |
| 91 | + git commit -m 'Add some feature' |
| 92 | + ``` |
| 93 | +4. Push to the branch: |
| 94 | + ```bash |
| 95 | + git push origin feature/your-feature-name |
| 96 | + ``` |
| 97 | +5. Open a pull request. |
31 | 98 |
|
32 |
| -## Deploy on Vercel |
| 99 | +## Contact |
33 | 100 |
|
34 |
| -The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js. |
| 101 | +For any questions or feedback, please reach out to [[email protected]](mailto:kirtirajthakor064@gmail.com). |
35 | 102 |
|
36 |
| -Check out our [Next.js deployment documentation](https://nextjs.org/docs/app/building-your-application/deploying) for more details. |
|
0 commit comments