Overview
Time Travel Films Database is a web application,
developed using the MERN stack (MongoDB, Express, React,
Node). After initial registration a user can add films
to 'favourites' or to 'watch list' and score movies.
Also, a user can visit the profile of other users plus
the option to edit their own personal data.
Purpose & Context
Time Travel Films Database is a personal project built
as part of the Full-Stack Web Development course at
Career Foundry to showcase my skills developing a
full-stack JavaScript application. The idea comes from
my love of time travel films and the difficulty to find
new films to watch. The purpose was to create a database
with every time-travel-related film, so other people can
create their own list of films to watch from this genre.
Objective
On the technical part: To develop a Full-Stack web
application following the MERN stack. Starting in the
back-end with the database and node and the front-end
with React.
On the functional side: To create an easy to use website
where users can log in and discover films.
Approach
I started by making a list of the features that I wanted
to include in the app.
- Register users
-
Login users and keep session open with Local Storage
and JSON Web Token (JWT)
- Users can modify or delete their account data
- User can access and search a films database
-
Users can favourite, add to "plan to watch" and rate
the films
-
Users can open other users profiles to see their
favourite films
Back-end
Using Node.js I created first the schematics for the
MongoDB database linking the different collections and
creating an array of objects in the user for the
"myMovies" data. Creating next, the database in
cloud.mongodb.com. Then I wrote all the endpoints with
Express which mange all the requests and supply the data
from the database. I used Passport.js for the user
authentication (local and JWT).
I documented all the endpoints using JSDoc and Swagger. Everything
was hosted in Heroku.
Also, for testing I used Postman.
This is the link to the endpoints
documentation
Front-end
I developed the interface where users can access the
films data by using React and a basic UI with Bootstrap.
I used a combination of React Components, Hooks and
Redux to create the different pages: main-page,
registration, login, profile and movie-details. It's
hosted on Netlify movie-client2.netlify.app
Challenges
I enjoyed building the API and creating the database
structure. The documentation was very challenging as it
needed to comply with the OpenAPI Specification. I had
to learn YAML syntax as part of this process, but it was
fulfilling to see how professional the final result
looked once complete. On the front-end I really enjoyed
the routing on React and it took me a lot of work making
Redux work as I needed it to. In the end, it was well
worth learning how powerful a tool like Redux can be.
Future Steps
I'd like to improve the UI, add more films to the
database and provide tools to the users so they can
upload new films to the database, together with a system
where trusted users can approve the uploads.
Credits
Role: Lead Developer
Mentor: Akunna Nwosu