Main View
A Full Stack Case Study
myBond Flix
Chris Bond
Overview
Welcome to the journey through the creation of BondFlix, a dynamic web application designed to elevate the cinematic experience of James Bond enthusiasts. In this case study, we will delve into the intricacies the process that brought BondFlix to life, enriching users' interactions with the iconic world of 007.
BondFlix emerges from the intersection of technology and entertainment, offering a seamless platform for users to explore comprehensive information on all James Bond films while providing a personalized touch through a 'Favourites' feature. The project's primary goal is to provide an engaging, user-friendly interface that encapsulates the essence of the legendary spy franchise. It was developed using the MERN stack.
Purpose
This application was created as part of my web development course at CareerFoundry to demonstrate a full stack JavaScript project built using the MERN stack. Users can effortlessly navigate through the app to get a brief description of each film as well as information on the lead actor and director. The 'Favourites' functionality allows users to curate their own Bond film collection, adding a layer of personalization to their cinematic journey.
Objective
To create a full-stack project using the MERN stack that I can add to my professional portfolio.
Duration
The front end took longer than the backend by roughly one week as I wanted to fully grasp my understanding of React. I now feel I have a good understanding of React and would complete the front end part of the project in far less time next time
Roles
Lead Developer: Chris Bond
Tutor: Adewunmi Bamishigbin
Mentor: Sonia Rose Mary Karungi
Tools
- MongoDB
- Express
- Parcel
- Mongoose
- React
- React Bootstrap
- Postman
- Heroku
- Netlify
Server Side
First I created the REST API endpoints with Express which allows the front end to communicate with and make changes via CRUD to data on the database
Next I setup a non relational database using MongoDB. I decided to go with MongoDB over relational (SQL) datbase as it offers more flexibility and scalability.
Next I setup the business logic for the application. This is where code from the database is converted into code the rest of the application can use. I achieved this via Mongoose
Next step was adding some authentication to the application. For the initial login basic HTTP authentication was used. After this point JWT token based authentication was used on all further endpoint requests.
For further added security I next implemented Cross Origin Resource Sharing (Cors), to prevent access to the endpoints from unpermitted domains, hashing to make users password unreadable to potential bad actors and server side input validation to ensure no nifarious data is being sent in to the backend.
Backend code was then deployed to Heroku and local MongoDB data deployed to MongoGB Atlas to allow access outside my local environment.
Client Side
First step of building the client side step of the application was to decide what JavaScript front end framework to use. I decided React because it has strong documentation and support, you can create modular reusable UI components and it has 'React Router' which would aid in creating a single page application
Next I needed to setup a build tool to automate the process of compiling, assembling and transforming code and resources into a distribution ready format. I decided to use Parcel for its minimalist configuration and fast bundle times.
For styling I used React Bootstrap for its prebuilt UI components and for its responsive grid system
Finally the application was deployed to Netlify so it could be accessed online by all
Page Views
Login View
Movie View
Actor View
Signup View
Director View
Retrospective
What went well?
During this project I preferred working on the front end side more. Although I found React very challenging at first now it feels very intuitive.
What didn't go well?
The part I found most challenging was implementing server side authentication and security. This is a subject I plan to prioritise more in my current studies
Whats next?
I plan to try develop more applications using the MERN stack to better my understanding of all technologies involved