AutoLearn Studio is an interactive, web-based platform designed to teach automotive protocols (CAN, UDS, LIN) through hands-on simulation. It provides a realistic environment to explore vehicle architectures, diagnose simulated faults, and understand network communication without needing physical hardware.
Frontend: https://anant1711.github.io/AutoLearn/
Backend: https://autolearn-cwhp.onrender.com
Note: The backend is hosted on Render's free tier and may take 30-60 seconds to wake up on first connection.
- Virtual Cockpit: Real-time Speedometer and RPM gauges.
- Physics Engine: Simulate vehicle acceleration and braking dynamics.
- Traffic Monitor: Watch raw CAN frames (ID, DLC, Data) stream in real-time.
- Service Control: Send standard UDS requests (ISO 14229).
0x10Diagnostic Session Control0x19Read DTC Information0x22Read Data By Identifier (DID)0x27Security Access (Seed & Key)
- Flow Visualizer: Chat-style interface to view Request/Response pairs and Negative Response Codes (NRCs).
- Visual Topology: Interactive map of a modern vehicle network.
- Multi-Domain Support: Powertrain, Chassis, Body, Infotainment, and ADAS.
- ECU Inspector: Click on any node (e.g., ECM, BCM, Radar) to view its function and signals.
- Tutorials: Step-by-step guides on automotive protocols.
- Community: Share scenarios and DBC files (Coming Soon).
- Frontend: React 18, Vite, TypeScript, Tailwind CSS, Framer Motion.
- Backend: Node.js, Express, Socket.io.
- Communication: WebSocket (Real-time full-duplex communication).
- Deployment: GitHub Pages (Frontend) + Render (Backend).
- Node.js (v16 or higher)
- npm (v8 or higher)
-
Clone the repository
git clone https://github.com/Anant1711/AutoLearn.git cd AutoLearn -
Install Backend Dependencies
cd backend npm install -
Install Frontend Dependencies
cd ../frontend npm install
-
Start the Backend Server
cd backend npm startServer runs on
http://localhost:3000 -
Start the Frontend Client (in a new terminal)
cd frontend npm run devClient runs on
http://localhost:5173 -
Open in Browser Navigate to http://localhost:5173 to start learning!
- Use the Accelerate and Brake buttons to control the virtual car.
- Observe the gauges and the scrolling CAN Log to see how user input translates to network data.
- Select a service (e.g., Session).
- Click a sub-function (e.g., Extended Session).
- Watch the Diagnostic Flow to see the
TX(Transmit) andRX(Receive) messages. - Try Security Access: Request a Seed, then calculate and send the Key to unlock the ECU.
- Pan and zoom around the vehicle topology.
- Identify different bus types by color (Red = High Speed CAN, Blue = Low Speed CAN).
- Select an ECU to learn about its role in the vehicle.
This project is deployed using a split architecture:
- Frontend: GitHub Pages (static hosting)
- Backend: Render (Node.js hosting)
For detailed deployment instructions, see:
- DEPLOYMENT.md - Complete deployment guide
- QUICK_DEPLOY.md - Quick reference for deployment
- Fork this repository
- Deploy the backend to Render (free tier available)
- Enable GitHub Pages in your repository settings
- Add your backend URL as a GitHub secret (
VITE_SOCKET_URL) - Push to
mainbranch to trigger automatic deployment
Contributions are welcome! Please feel free to submit a Pull Request.
- Fork the repository
- Create your 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
This project is licensed under the MIT License.
- Built with modern web technologies for automotive education
- Inspired by real-world automotive diagnostic tools
- Designed for students, engineers, and automotive enthusiasts
Made with ❤️ for the automotive community