'%3e%3cg%20id='LOGO'%3e%3cpath%20d='M218.682,452.163L111.153,452.304L111.153,374.157L484.347,374.157L484.347,452.304C450.657,452.257%20432.581,452.21%20376.881,452.163'%20style='fill:none;stroke:rgb(0,171,169);stroke-width:14.7px;'/%3e%3c/g%3e%3c/g%3e%3c/svg%3e)
'%3e%3cg%20id='LOGO'%3e%3cpath%20d='M1439.38,212.633L1439.38,276.743L1041.14,276.743L1041.14,212.633L1439.38,212.633ZM1435.22,216.8L1045.3,216.8L1045.3,272.577L1435.22,272.577L1435.22,216.8Z'%20style='fill:rgb(0,171,169);'/%3e%3c/g%3e%3c/g%3e%3c/svg%3e)
React Frontend // REST API // MongoDB Data Model
Fullstack Web App
Kraftflix MERN Stack
A fullstack application for browsing movies, managing user accounts and saving favourites, combining a React SPA with a custom REST API and MongoDB database.
Overview
Kraftflix MERN Stack is a full end-to-end web application that I built across both backend and frontend. It includes a custom Node.js and Express API, a MongoDB database modeled with Mongoose and a responsive React client on top of that foundation. Users can browse a movie catalogue, explore details about movies, directors and genres, manage their profile and save favourites.
The project was developed as part of my full stack web development training and reflects a hands-on learning phase where I built the backend, API logic, database layer and later the React frontend myself. It gave me practical experience in shaping data structures, authentication flows, endpoints and interface behaviour across the full stack.
Looking back, I would structure parts of the code and refine the visual design differently today, but that is precisely what makes the project valuable: it documents a real stage of growth in both engineering and product thinking.
Key Features
Browse movies, directors and genresCreate accounts and manage profilesAdd and remove favourite moviesAuthenticate with JWT-protected routesConnect a React SPA to a custom REST API
Core Stack
ReactNode.jsExpressMongoDBMongooseJWT Auth
Build Focus
Fullstack architectureREST API designAuthentication flowsResponsive React UI
Assignment Context
- Built during my full stack web development training as a two-part project.
- I first built the server-side foundation myself, including the REST API, MongoDB database, Mongoose models, authentication and deployment.
- The React client followed afterwards and was also developed by me against the API and database layer I had already created.
- Together, both phases formed the final MERN stack portfolio project.
Required Scope
- Return all movies plus detailed movie, genre and director data.
- Support user registration, profile updates and account deletion.
- Allow users to add and remove favourite movies.
- Implement authentication, authorization, validation and secure data handling.
- Build a React SPA with search, routing, login, signup, single movie and profile views.
Authentication & User Management
- Register new users and validate incoming account data.
- Authenticate users with JWT-based login flows.
- Update profile data including username, password, email and birth date.
- Add and remove favourite movies from the user profile.
- Delete user accounts when requested.
Backend Capabilities
- Expose REST endpoints for all movies in the database.
- Return detailed information for single movies, genres and directors.
- Model movie and user data in MongoDB with Mongoose.
- Protect private routes with Passport strategies and token-based access.
- Handle validation, logging and environment configuration on the server side.
Frontend Experience
- Render a responsive React single page application with routed views.
- Display movie lists, single movie details and profile screens.
- Persist session data in localStorage for returning users.
- Allow users to manage favourites directly from movie and profile views.
- Use component-based UI patterns to keep the frontend reusable and maintainable.
Backend Tech & Security
- Built the server side with Node.js, Express, MongoDB and Mongoose as the core backend stack.
- Protected the API with Passport authentication using both local and JWT strategies.
- Hashed passwords with bcrypt and issued tokens with jsonwebtoken.
- Validated incoming request data with express-validator before persisting user changes.
- Handled cross-origin requests with CORS, request logging with Morgan and environment configuration with dotenv.
- Deployed the backend application to Heroku during the project phase.
Frontend Views & Flows
- Main View displays the full movie list with search and filter functionality.
- Main View lets users open detailed movie information and navigate to the profile view or log out.
- Single Movie View shows description, genre, director and image data for the selected movie.
- Login View authenticates returning users with username and password.
- Signup View registers new users with username, password, email and birthdate.
- Profile View displays personal data, favourite movies, profile updates, favourite removal and account deletion.
- Users can add and remove favourites both from the main movie flow and from detailed movie views.
What I Learned
- This was one of the first projects where I developed the backend, database and frontend as one complete product.
- It strengthened my understanding of how authentication, API design, database structure and UI state depend on each other.
- Today I would improve parts of the code structure, visual polish and maintainability, but the project remains an important milestone in my fullstack learning process.
Tools & Libraries
React RouterReact BootstrapPassportpassport-localpassport-jwtbcryptjsonwebtokencorsexpress-validatormorgandotenvlocalStoragePropTypesParcelHeroku