CodeMonkey.js is a place to learn and practice coding with AI integrated code editor featuring Shepherd.js for guided tours. The platform is designed to help users learn coding in a fun and interactive way.
The repository uses the CodeMonkey Backend for the backend server. The frontend is built using Next.js and the code editor is powered by Monaco Editor with the help of @Monaco-editor/react package.
It uses Google's Gemini for the AI integration in the code editor.
CodeMonkey.js.mp4
Note: The platform is still under development and some features are not yet implemented, as you can see in the demo. The hosted version may not be available at all times due to the limitations of the free backend hosting service, so you can follow the installation instructions to run the platform locally.
- AI Integrated Code Editor: The code editor is integrated with Google's Gemini AI to provide code suggestions and help users learn coding. Editor tools include:
- Code Optimization: The AI helps users optimize their code by providing suggestions to improve the code.
- Code Debugging: The AI helps users debug their code by providing suggestions to fix errors.
- Code Help: The AI provides help to users by suggesting how the problem can be solved. But it does not provide the solution directly.
- Guided Tours: The platform uses Shepherd.js to provide guided tours to help users learn coding in an interactive way.
- Problem Sets: Users can solve problem sets to practice coding and improve their skills.
- CodeChimp: CodeChimp is an AI assistant that helps users solve problems and provides hints and solutions.
- StudyPlanner: Work in progress 🚧
- Roadmap: Work in progress 🚧
- InterviewPrep: Work in progress 🚧
- Frontend: React.js, Next.js, JavaScript, Tailwind CSS, @Monaco-editor/react, Shepherd.js, Shadcn-ui.
- Authentication: Clerk.dev.
- Backend: Node.js, Express.js, MongoDB, Mongoose, Google's Gemini.
- Clone the repository:
git clone https://github.com/RohittCodes/codemonkey.js.git- Change the directory:
cd codemonkey.js- Install the dependencies:
yarn- Create a
.env.localfile in the root directory and add the following environment variables:
NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY={CLERK_PUBLISHABLE_KEY}
CLERK_SECRET_KEY={CLERK_SECRET_KEY}
NEXT_PUBLIC_CLERK_SIGN_IN_URL=/sign-in
NEXT_PUBLIC_CLERK_SIGN_UP_URL=/sign-up
NODE_ENV="development"
NEXT_PUBLIC_API_URL=http://localhost:5000/apiNote: Don't forget to clone the CodeMonkeyBackend repository and follow the instructions to set up the backend server provided in the README of the repository.
- Start the development server:
yarn dev- Open http://localhost:3000 to view it in the browser.
Contributions are welcome! Feel free to open an issue or submit a pull request if you have any ideas or suggestions. You can also reach out to me on Twitter if you have any questions or feedback.