Code Endelea

Inspiration

The idea for Code Endelea was born out of a simple frustration we had while learning to code: switching between video tutorials and our code editor disrupted our flow and focus. We wanted a learning platform where code and video could exist in the same space, where learners could watch, interact, and build,all in one interface. We were also deeply inspired by the growing number of learners in Africa with access to mobile internet but limited exposure to interactive educational tools. We saw an opportunity to create a platform tailored to curious, underserved learners who needed more than static content. They needed hands-on, immersive experiences.

What it does

Code Endelea is an interactive learning platform that synchronizes video tutorials with an in-browser code editor. It allows learners to watch instructional videos, write and test code, and take quizzes all in one place, without switching tabs or applications. The platform is designed to provide a seamless, hands-on learning experience, with features like code-synced video highlights, inline assessments, and real-time notifications.

How we built it

Code Endelea is architected as a system of six main microservices that communicate asynchronously via Kafka:

Watch Service: Handles video playback.

Codespace Service: Embeds Monaco Editor for inline coding.

Auth Service: Manages secure authentication using JWT.

Examination Service: Supports interactive quizzes.

Upload and Transcode Service: Processes instructor videos.

Notification Service: Sends real-time updates.

The system uses MongoDB for flexible data storage and Redis to cache frequently accessed data for improved performance. All services are containerized with Docker and hosted on AWS, with S3 used for video storage.

Challenges we ran into

Microservices Coordination: Managing inter-service communication was a significant hurdle. Kafka was powerful but had a steep learning curve.

Video & Code Synchronization: Aligning specific code segments with precise video timestamps was technically complex and took several iterations to perfect.

Performance Optimization: We faced memory issues with large video files and had to implement chunked uploading and transcoding to maintain a smooth user experience.

Frontend Complexity: Embedding Monaco Editor with features like live collaboration and auto-save introduced challenging frontend synchronization bugs.

Accomplishments that we're proud of

We are proud of successfully designing and implementing a scalable microservices architecture to support a complex, real-time application. A key accomplishment was solving the difficult challenge of synchronizing video playback with code highlights, creating the core interactive experience we envisioned. Most importantly, we built a platform that directly addresses a common frustration for aspiring developers and provides an accessible, hands-on educational tool for underserved communities.

What we learned

System Design: Architecting a modular and scalable system using microservices.

Distributed Systems: Implementing asynchronous communication with Kafka and using Nginx as a reverse proxy and load balancer.

Modern Dev Tools: Working extensively with Docker, Redis, MongoDB, and understanding CI/CD pipelines, caching, and replication.

Human-Centered Design: Applying user feedback and iterative prototyping to design a frictionless and intuitive UI.

What's next for Code Endelea

Code Endelea is more than just a project. It’s a mission to make learning code more accessible and empowering. We plan to integrate LLM-based mentorship features to guide learners through their coding journey with smart suggestions and explanations. This journey taught us the power of curiosity, persistence, and community. And it all started with the question: “What if we could watch and code in one place?”

Built With

• and-postgresql-for-structured
• docker
• document-based-data
• dynamodb
• dynamodb-for-scalable-key-value-storage
• golang
• integrating-with-the-openai-api-(gpt-4)-to-power-the-llm-based-mentorship-features
• jwt
• kafka
• mongodb
• nginx
• node.js
• openai
• providing-smart-suggestions-and-explanations-to-learners.-databases:-we-plan-to-use-a-mix-of-databases-to-suit-different-needs:-mongodb-for-flexible
• python
• react
• redis