Full-Stack Web Development:
A Case Study
IndieFilms is a client-side application written in JavaScript using React as a framework. It is connected to a movie database created in MongoDB. IndieFilms provides users with a list of independent films and information about each film, including an image of the movie poster, a summary, genre, and director. Users can create a profile, update information, and “favorite” individual films to store in a list on their profile page.
Purpose and Context
IndieFilms is a personal project I completed for my CareerFoundry Full-Stack Development course. The purpose of this task was to showcase my mastery of full-stack web development. I decided to create an app for independent film enthusiasts to have a niche website to keep track of their favorite films while having the opportunity to build a full-stack web app from scratch..
DocumentationServer Side
REST API
I aimed to design a REST API so that users could create a profile to keep track of their favorite independent films. First, I identified the different requests users might want to make and determined the appropriate HTTP methods for each request (GET, POST, PUT, DELETE). I then associated an endpoint with each of these methods.
Database
I subsequently created a non-relational database using MongoDB. I opted for a non-relational database for its flexibility when altering data. This flexibility proved useful as I frequently modified and added to the data as new ideas emerged.
Business Logic and User Security
To convert the code from MongoDB, I integrated Mongoose into my REST API. HTTP authentication is used when a user logs in, and a JWT is created for the user to securely navigate the site. All endpoints were tested using Postman, and I utilized Heroku to deploy my API.
Client Side
REACT
Before writing any code for the client side of my application, I considered which framework would work best for this project. Ultimately, I chose React due to its popularity and excellent documentation. As I learned while doing, I frequently referenced its documentation.
Design
I aimed for a single-page application for efficiency. Every time a change is made or a user clicks a button, the entire page will not have to reload, making the switch between views quicker. I used React Bootstrap for styling and responsiveness, which proved to be a significant time-saver.
Deployment and Hosting
Since I deployed my movie_api using Heroku, I decided to opt for a different deployment and hosting option, Netlify.
Challenges
I faced numerous challenges along the way, but I am grateful for the learning experience. React was a new framework for me, and I was still relatively new to JavaScript. Every day presented new situations and problems that I had to learn in the moment and troubleshoot. Overcoming these challenges and learning how to troubleshoot has made me a more confident developer overall.
Duration
So far, this project has been my favorite; however, it was the most time-consuming. It spanned a couple of months, at least twice as long as any other project during this course. Fortunately, I had guidance from my mentor during times when I felt stuck. Although it took a considerable amount of time to complete, I gained valuable experience compared to completing it quickly.
Credits
I want to thank my tutor at CareerFoundry as well as my mentor who provided the guidance needed as well as her time to show me how to troubleshoot when given a red error message, and reminding me that “The computer will only do what you tell it to do.”
Check out IndieFilms
Click below if you would like to see my project first-hand.
Login: films
Password: 12345