Case Study

From Concept to Code: Creating the myFlix Backend

Overview:

Among my earliest endeavors as a budding student of web development stands the myFlix Backend. It was my very first API and database configuration—a journey of discovery where challenges were met with determination, and triumphs were celebrated with pride.

Purpose & Context:

The objective was clear: to build a robust API that could handle a vast collection of movies and provide users with seamless access to movie details. This was my first real taste of full-stack web development, and as such, I made sure to study the structure and flow of the language. When I’ve taught myself a new language in the past, whether programming or foreign, I focused on understanding how the puzzle pieces fit together instead of learning one block at a time. That experience would soon prove extremely beneficial.

App Screenshot

Preparation:

I started the journey simply: I wrote out which libraries, middleware, and database I wanted to use. I settled on Express, MongoDB, Passport.js, and Morgan. I took some time to read the documentation before I felt confident enough to set up my (first-ever) API index.js file. While importing the proper packages, I knew I would need some sample data to test my endpoints with. After all, what good is serving a request if there is nothing to serve? Whipping up an array of movie objects flew by, and before I knew it, I was ready to start stitching together my first endpoint!

Execution & Challenges:

Once the first endpoint was created, the rest was practice. I would take time to reflect on the functionality I wanted for my app, ensuring that I covered every base. I took a look at the console to see if there were any errors, and to my surprise, there were none! I opened Postman to begin testing the endpoints with different headers and credentials. I was soon met with hurdles that felt like mountains at the time. One of the significant challenges was ensuring that the API endpoints had the proper syntax and followed the model properly. After consulting the vast wealth of knowledge known as Google and AI, I decided I needed a second pair of eyes, so I messaged my tutor. Maybe I was too close to the project, maybe I had forgotten a dependency, maybe his seasoned eyes could see something I was overlooking. Sure enough, the problem was discovered, small but humbling nonetheless. A letter had been capitalized where it shouldn’t have been. After a laugh and a correction, everything was ready for production! …Right?

App Screenshot

Finalization:

Ok, so I may have been jumping the gun. One hurdle still remained in my learning. The last, but certainly not least, important part of web development: Security. The “Who are you” and “What are you allowed to do” of an application, or in layman’s terms, Authentication and Authorization. Not only did I need to add this critical aspect, but I also needed to persist the login so users wouldn’t be prompted to enter their credentials for every new page. Luckily, there were tools available for such a task. These tools were staple names: bcrypt, passport, and express-validator. By implementing these proven building blocks, my site was finally adhering to CORS policies, safe from threat, and at last ready for production!

App Screenshot

Conclusion:

This project was a critical step for me as a student. Throughout the ups and downs I faced, whether it be a miscased letter or new syntax to learn, I remained hopeful. The experience is something I will always reflect on: the journey, the learning, and the help I received. These aspects have become the foundation on which I will approach and grow with all future projects. I’m ever curious about where my (or your) next project will take me. I look forward to meeting it with an open mind and innovative solutions.