CINEMA.DATABASE: A CASE STUDY

Server-Side

Before coding anything, I listed out all the app’s functionalities that would need to interact with the database, like retrieving movie details or adding a movie to favorites, and then I translated these functionalities into HTML endpoints to build out the structure of my Express API. This preparation step kept the initial coding efficient and comprehensive, helping me know exactly where to start with my project.

I next wrote the database itself in MongoDB and updated my API to use it. An important part of this step was adding layers of security to protect the data, like JWT authentication which requires users to sign in to retrieve and write data, and password hashing that prevents anyone (even the owner of the database) from viewing a user’s password.

Client-Side

I began by building out the basic framework of the app in order to familiarize myself with React’s component structure, as well as test the functionality of the app without any data. Bootstrap's handy UI library sped up this process, and kept the design consistent.

When implementing app capabilities that involved user interaction, I took extra care to note UX concerns like form validation; this would become especially important as users needed to input information to the specifications of the API that was working behind-the-scenes.

As a final step before deployment, I collaborated with a designer to update the original design into something more eye-catching and content appropriate.

All testing on the server-side was done in Postman. Endpoint tests were saved for regular testing, which was carried out throughout the project each time functionality was added or changed.

Client-side testing was carried out continuously; I kept the project open on one screen to test immediate results as code was changed or added. Special attention to testing was given at integral parts of development, such as after laying out the basic framework, and after linking the app with my API.

Challenges

The most challenging part of this project was developing with new tools (React and Parcel) and learning how best to use them as I went.

Parcel’s quirks in particular slowed down production time significantly. From this challenge, I was able to readjust my production schedule to set aside time for learning how to best utilize this finicky tool, and I made sure to record my solutions for my future self or anyone else who might view my project (which you can view at the end of the ReadMe on Cinema.Database’s GitHub page.) This allowed me to move forward efficiently with the rest of the project.

Hindsight

Cinema.Database was only the second full web app I had developed, so I was focused mainly on learning React. Since developing this app, I have continued to learn much more about other development practices and tools, so if I were to begin this project again, I would likely use a different, less glitch-prone build tool like Create React App, which I used to build my next project, Meetup.

I also might prefer a more formalized testing process. While the informal test-as-you-go approach worked well for a small project like this, in the future I might utilize an automated, test-driven approach with a tool like Jest to keep myself practiced with common tools, and to make things easier down the line should I decide to increase the scope of the project.