MyFlix (React)
A RESTful API built with Node.js and Express using an innovative modular approach.
Overview
Many movie enthusiasts struggle to keep track of their favorite films and access detailed information about them in one convenient location. My Flix addresses this issue by providing a seamless interface where users can discover, organize, and save their preferred movies while accessing in-depth details about each film. By integrating user accounts, favorites lists, and an intuitive browsing system, My Flix enhances the movie discovery experience, making it more personalized and engaging.
Technologies
- Express
- JWT
- MongoDB
- React
- REST API
Purpose & Objectives
This application was developed as part of the Full Stack Web Development course at CareerFoundry. Under the expert guidance of a Senior Developer Mentor for overall strategy and a dedicated Tutor for in-depth technical advice, the project was designed to encapsulate best practices and advanced methodologies in modern web development
Key Features
- - JWT authentication: Secure login and protected routes.
- - Rich browsing: Search, director/genre detail views, and pagination.
- - Responsive UI: MobileÔÇæfirst layout and accessible components.
- - REST API: Express routes and MongoDB models for movies and users.
- - Favorites persistence: Keep starred titles across sessions.
Architecture & Structure
- - React components: FeatureÔÇæbased structure and reusable UI units.
- - Service layer: Encapsulated fetch calls with standardized responses.
- - Routing: Protected views enforced by JWT checks.
- - Data models: MongoDB schemas for movies, users, favorites.
- - Performance: Batched updates and minimal reflows.
Technical Challenges
- - Auth flows: Handling token expiry and redirect UX.
- - State & routing: Managing protected navigation across views.
- - Data consistency: Syncing favorites between client and server.
- - Accessibility: Keyboard navigation and ARIA labels.
Accomplishments
I gained a comprehensive understanding of the multifaceted elements that form a complete applicationÔÇöfrom the foundational planning and design phases to the technical nuances of assembling each component. This project has significantly bolstered my confidence and competence as a Full Stack Developer.
Lessons Learned
I gained a comprehensive understanding of the multifaceted elements that form a complete applicationÔÇöfrom the foundational planning and design phases to the technical nuances of assembling each component. This project has significantly bolstered my confidence and competence as a Full Stack Developer.