Code Mentor AI: An Interactive Programming Learning Platform
Code Mentor AI is a cutting-edge platform designed to revolutionize how we learn programming. Leveraging advanced APIs and a sophisticated tech stack, it offers an interactive and tailored learning experience. Features include support for multiple languages, real-time code evaluation, virtual tutors, and the ability to analyze code from diagrams among other notable features. Our mission is to make programming education universally accessible and adaptable to each learner's unique style, bridging the gap between concept mastery and practical application.
- Multi-Language Support: Code evaluation and tutoring for various programming languages
- Real-time Code Execution: Integrated code editor with live feedback
- AI-Powered Tutoring: Interactive virtual tutors for personalized learning
- Diagram-to-Code Analysis: Convert flowcharts and diagrams into executable code
- Interactive Learning Path: Structured curriculum with progress tracking
- Responsive Design: Optimized for desktop and mobile devices
The above diagram illustrates the overall system architecture and data flow within Code Mentor AI, showing how different components interact to provide a seamless learning experience.
src/
├── components/ # Reusable UI components
│ ├── LandingPage.js # Main landing page with hero section
│ ├── Navbar.js # Navigation component
│ ├── Footer.js # Footer component
│ └── ...
├── pages/ # Page-level components
├── hooks/ # Custom React hooks
├── services/ # API integration services
├── utils/ # Utility functions
└── App.js # Main application component
- React.js: Component-based architecture with hooks for state management
- Chakra UI: Modern, accessible component library for consistent design
- React Router: Client-side routing for single-page application navigation
- Axios: HTTP client for API communications
- Create React App: Build toolchain for development and production builds
- Steamship API: AI-powered backend services for code evaluation and tutoring
- RESTful APIs: Standard HTTP-based communication between frontend and backend services
- ESLint: Code linting for consistent code quality
- Prettier: Code formatting for consistent style
- VS Code: Recommended IDE with extension support
- Jest: JavaScript testing framework for unit testing React components
- React Testing Library: Testing utilities for React components
- 15 Total Tests: 9 unit tests and 6 integration tests ensuring code reliability
- GitHub Actions: Automated testing and deployment pipeline
- Automated Testing: Runs test suite on every pull request
- Continuous Deployment: Automatic deployment to Netlify on main branch updates
- Netlify: Frontend hosting with continuous deployment from GitHub
- Custom Domain: Professional domain setup with SSL certificate
- Performance Optimization: Built-in CDN and asset optimization
The application follows a modular React architecture:
- Landing Page: Hero section with animated GIF, feature highlights, and call-to-action
- Navigation: Responsive navbar with routing to different sections
- Component Library: Reusable UI components built with Chakra UI
- State Management: React hooks for local state, Context API for global state
- Routing: React Router for seamless navigation between pages
- Responsive Design: Mobile-first approach with breakpoint-based styling
The frontend integrates with external services through:
- RESTful API endpoints for code execution
- Real-time communication for interactive tutoring sessions
- Secure authentication and user session management
- Error handling and loading states for better user experience
- Avni Kapoor : avkap007
- Gursewak Singh: gursewaktut
- Henrik Sachdeva : henriksfu
- Jiya Garg : jiyaagargg
Please follow the following steps to run the app on your local environment:
- Node.js (v14 or higher)
- npm or yarn package manager
- Git
# Clone th
8309
e repository
git clone https://github.com/gursewaktut/TeamPines.git
# Navigate to project directory
cd TeamPines
# Install dependencies
npm install
# Start development server
npm startThe application will be available at http://localhost:3000
npm start # Start development server
npm test # Run test suite
npm run build # Create production build
npm run eject # Eject from Create React App (one-way operation)For full functionality, ensure you have:
- API keys configured for external services
- Proper CORS settings for backend integration
- Environment variables set for production deployment
Run the comprehensive test suite:
# Run all tests
npm test
# Run tests with coverage report
npm test -- --coverage
# Run tests in watch mode
npm test -- --watchThe project is configured for automatic deployment:
- Development: Push to feature branches triggers automated testing
- Staging: Pull requests run full test suite and preview deployment
- Production: Merging to main branch triggers production deployment to Netlify
- Fork the repository
- Create a feature branch (
git checkout -b feature/AmazingFeature) - Commit your changes (
git commit -m 'Add some AmazingFeature') - Push to the branch (
git push origin feature/AmazingFeature) - Open a Pull Request