Project Overview
EduHub is a comprehensive full-stack web application designed to connect parents with quality after-school lessons for their children. The platform provides a seamless experience for browsing, filtering, and booking educational classes across various subjects including STEM, Arts, Sports, and Languages.
This project was developed as part of CST3144 Full Stack Development coursework, demonstrating proficiency in modern web development technologies and best practices. The application showcases a complete solution from database design to user interface implementation.
Technical Architecture
Frontend Stack
- Vue.js 2.7.8 (Progressive JavaScript Framework)
- Custom CSS with CSS Variables
- Bootstrap 5 Components
- AOS (Animate On Scroll) Library
- Font Awesome 6 Icons
- LocalStorage for State Persistence
- GitHub Pages Deployment
Backend Stack
- Node.js Runtime Environment
- Express.js 4.21.1 Framework
- MongoDB Atlas (Cloud NoSQL)
- Helmet.js Security Middleware
- CORS & Rate Limiting
- Express Validator
- RESTful API with MVC Pattern
- Render.com Deployment
Key Features
Dynamic Lesson Discovery
- Real-time search across topics and locations
- Category-based filtering (STEM, Arts, Sports, Languages)
- Sort by price, availability, or alphabetically
- Visual indicators for lesson availability
Shopping Experience
- Intuitive cart management with slide-out panel
- Quantity controls with live space tracking
- Persistent cart using browser localStorage
- Clear visual feedback for all actions
Booking Process
- Streamlined checkout flow
- Form validation with helpful error messages
- Order confirmation with unique reference numbers
- Transaction integrity with database transactions
Security & Performance
- Input validation on client and server
- CORS configuration for production
- Rate limiting to prevent abuse
- Responsive design for all devices
Technical Implementation Details
Database Design
The application uses MongoDB with two main collections: Lessons and Orders. The schema design supports flexible field names for backward compatibility while maintaining data integrity through validation rules.
API Architecture
Built following RESTful principles with clean separation of concerns. The backend implements:
- Controllers for business logic
- Models for data structure
- Routes for endpoint management
- Middleware for validation and security
- MongoDB transactions for data integrity
- Async/await pattern for clean asynchronous code
Frontend Architecture
The Vue.js frontend utilizes:
- Component-based design for modularity
- Reactive data binding for real-time updates
- Computed properties for efficient calculations
- Watchers for automatic data synchronization
- Modern ES6+ JavaScript features
Development Challenges & Solutions
Challenge: Database Field Compatibility
Problem: Legacy database used 'space' while new code expected 'spaces'
Solution: Implemented field normalization middleware to support both formats transparently
Challenge: Real-time Availability Synchronization
Problem: Keeping lesson availability synchronized across multiple users
Solution: API calls on cart operations with optimistic UI updates and rollback handling
Challenge: Transaction Integrity
Problem: Preventing race conditions in concurrent bookings
Solution: MongoDB transactions with proper rollback handling and atomic operations
Challenge: Responsive Design Complexity
Problem: Complex layout requirements for multiple screen sizes
Solution: Mobile-first approach with CSS Grid and Flexbox, progressive enhancement
Project Metrics
Learning Outcomes
Through this project, I demonstrated comprehensive full-stack development capabilities:
- Complete application development from database to user interface
- RESTful API design and implementation
- Modern frontend framework proficiency with Vue.js
- Database design and optimization with MongoDB
- Security best practices implementation
- Cloud deployment and DevOps experience
- Responsive web design and UX considerations
- Version control and collaborative development
- Documentation and code organization
- Problem-solving and debugging skills
Future Enhancements
Potential improvements to showcase continuous development:
Authentication System
- JWT-based authentication
- User profiles and booking history
- Role-based access control
- Social login integration
Payment Integration
- Stripe/PayPal integration
- Secure payment processing
- Invoice generation
- Refund management
Advanced Features
- Email notifications
- Calendar integration
- Review and rating system
- Instructor profiles
Technical Improvements
- GraphQL API option
- WebSocket for real-time updates
- Progressive Web App features
- Automated testing suite
Experience EduHub
Explore the live application and see the codebase on GitHub