🖥️ Code.Compiler.Project

📝 Project Overview

Elevate your coding experience with CodeCompiler, enabling real-time HTML, CSS, and JS coding, sharing, and collaboration. Seamlessly save, share, and download your projects while ensuring security with authentication and efficient project management through MongoDB integration. Explore, create, and innovate with ease – right from your browser. 🌐🚀

🚀 Features

Core Features

• 🌐 Real-Time Coding: Write and edit HTML, CSS, and JavaScript code with live previews.
• 💾 Project Management: Save your projects securely with MongoDB integration via MongoDB Atlas.
• ➕ Sharing & Collaboration: Share your code projects with others for feedback and collaboration.
• 🔒 Authentication: Sign up, log in, and manage your projects securely.
• 📥 Download Projects: Easily download your projects for offline use.

Technical Features

• ⚛️ React Setup: Utilizes JSX, hooks, and functional components for a modern coding experience.
• 🌐 React Router: Enables dynamic routing and smooth navigation between project pages.
• 🗂️ State Management: Managed with Redux Toolkit for scalable application state.
• 🔄 API Integration: Real-time data fetching from the Express backend for seamless performance.
• 🎨 Responsive UI: Built using Shadcn UI and Tailwind CSS, ensuring a user-friendly interface.
• ✏️ Code Editing: Integrated CodeMirror for an enhanced coding experience.
• 🧪 Testing: Basic functional testing implemented with Jest for reliable performance.
• 📦 Enhanced Project Sharing: Allow users to share projects via unique links.

🛠️ Tech Stack

• Frontend: ⚛️ React.js, 📝 JSX, 🌐 React Router DOM, 🗂️ Redux Toolkit, 💻 TypeScript
• Styling: 🎨 Tailwind CSS, 🎨 Shadcn UI
• Backend: 🌲 Node.js, 🚀 Express.js, 🍃 MongoDB Atlas
• Database Management: 📊 MongoDB Compass
• Code Editor: ✏️ CodeMirror
• Authentication: 🔐 JWT Authentication
• Testing: 🃏 Jest

🎨 UI Design & Build

• Design Tool: 🖌️ Figma
• Inspiration: 🌟 User-friendly layouts with a focus on modern design principles.
• Implementation: 📱 Responsive components built with Tailwind CSS.

📚 Key Learnings

• React Concepts: ⚛️ Understanding functional components, hooks, and component composition.
• TypeScript Integration: 🧩 Leveraging TypeScript for type safety and enhanced development experience.
• Routing Techniques: 🚦 Utilizing React Router for dynamic routing and nested components.
• Redux Insights: 🗂️ Actions, reducers, and selectors for effective state management.
• Performance Optimization: 🚀 Techniques for efficient rendering and user experience.

✨ Additional Features (Planned/Future Scope)

• 🔍 Code Search: Implement search functionality for easier project navigation.
• 📊 Analytics Dashboard: Visualize project statistics and performance metrics.
• 🌙 Dark Mode: Toggle dark mode for enhanced usability in low-light conditions.
• 📚 Code Snippets Library: Save and reuse code snippets for faster development.
• 💬 Collaboration Tools: Introduce live chat features for real-time collaboration.

📦 Installation

1. Clone the repository:

   git clone https://github.com/Taniya23Y/code-compiler-project.git

2. Navigate to the project directory:

   cd code-compiler-project
   

3. Install dependencies for both client and server:

   npm install
   

4. Setup Environment Variables: Create a .env file in the backend directory and add your environment variables:

   MONGO_URI=your_mongo_uri
   JWT_KEY=your_jwt_key
   PORT=4000
   CLIENT_URL="https://your-client-url"
   

5. Start client and server:

   npm run dev
   

6. Start the development server:

   npm start
   

🌐 Usage

• Open your browser and navigate to http://localhost:3000 to explore the application.
• Create a new project and start coding in HTML, CSS, and JavaScript.
• Share your projects with others for feedback and collaboration.
• Log in or sign up for a personalized experience.

🐞 Testing

• Run tests using Jest:

  npm test
  

🤝 Contributing

Contributions, issues, and feature requests are welcome! Feel free to check the issues page.