Deployed
Deep Coding
Programming education platform with full-stack architecture and advanced course management system
React.js · Node.js · Express.js · MongoDB · Mongoose · TanStack Query
Architecture design and full-stack development
Personal project — under development with new features being added
React.js · Node.js · Express.js · MongoDB · Mongoose · TanStack Query
Overview
Deep Coding is a full-stack programming education platform implemented as a SPA with React, featuring three separate panels (student, instructor, admin) with a complete course management, user management, and learning progress system.
01
Problem
Most educational platforms focus primarily on video display and lack structured management systems for courses, users, and learning progress. The goal of this project was to design a system that provides a smooth user experience for students while offering powerful management tools for instructors and admins.
02
Approach & Technical Decisions
Designing RESTful API with Express and modular structure (routes, controllers, models)
Implementing authentication with JWT and protecting routes in both backend and frontend
Database modeling with Mongoose for managing relationships between User, Course, and Lesson
Managing server data in frontend with TanStack Query (caching, refetching, optimistic updates)
Implementing video playback and management system for courses
Building course search and filtering system on the client side to improve UX
03
Challenges
Challenge 01
Video management and playback in courses
Implementing video storage and display structure in each course, handling URLs, optimal loading, and coordination between different sections (course/lesson) for a smooth user experience.
Challenge 02
Adding and managing videos by instructors
Designing a system where instructors can easily add or edit videos in courses, with changes syncing in real-time in the UI via TanStack Query.
Challenge 03
Course search and filtering in frontend
Implementing search and filter system (by title, category, etc.) on the client side while maintaining performance and preventing unnecessary re-renders.
Challenge 04
Server state management
Keeping data synchronized between client and server with TanStack Query, especially in CRUD operations that require refetching and cache invalidation.
Challenge 05
Implementing secure authentication
Managing JWT, controlling user access, and protecting endpoints against unauthorized requests.
Challenge 06
Database structure design
Scalable modeling for relationships between users, courses, lessons, and learning progress.
04
Result
A full-stack educational platform with a clean and extensible architecture featuring three separate panels, a video management system, and advanced search and filtering capabilities that can be transformed into a real SaaS product.