Building an app: from concept to deployment using headless Rails-API and React with Next.JS — Part 1

Part 1. The concept, prototype, and schema

Background:

While learning to code in a Bootcamp, one of the projects we had to finish was a simple movie watchlist application. The application should introduce some movies to the user that they can add to a watchlist. I came up with an idea that turned out to be more complex than required and that if pursued, would take me more than the 2 days allocated for this. I completed an iteration of this idea, which was too simple for my taste, and barely met the class requirements.

Months after finishing the Bootcamp, while scrolling through my old repositories on GitHub, I came across this app and decided that with my skills at the time, I could improve it to a “portfolio-worthy” level, even make it an app I would use.

While the basic idea of the application remains the same, I decided to rewrite the whole thing and that this was an excellent opportunity to practice all sorts of skills related to building an application:

• UX/UI
• Coding
• Online research
• Asking questions online on sites like StackOverflow
• Working with external APIs
• Deployment

The app:

I am creating a movie watchlist application that allows users to discover or search for movies and, if logged in, to create watchlists and add or remove movies from them. Within the watchlist, users can mark the movies as watched.

The data on the movies will be obtained through TMDB’s APIs

The steps that I will follow to create this application are:

1. Define the concept, map the user journeys
2. Create a prototype on Figma
3. Finalize the schema
4. Write the backend as a headless Rails-API, using Postman for testing
5. Deploy the backend using Fly.io
6. Write the frontend using React and Next.JS
7. Deploy the frontend using Vercel

Pain points:

While there are many watchlist applications, I haven’t found one that has the features I mostly use or want, organized and displayed simply. I would like to see some specific information on the movies I look for including the streaming service provider, and for the watchlists, an average score of all the movies in it, as well as a total unplayed running time.

User Journeys:

The user, as a guest, will be able to search for movies and see the details of each movie, including an overview, score, genre, cast, director, trailer, recommended movies, and when available, the streaming service in the US that currently has that movie in their catalog.

The user will be able to create an account, and when signed in, will be able to create, edit and delete watchlists, add or remove movies in each watchlist, and mark each movie as watched or unwatched. Each watchlist will display the average score of all the movies in it as well as the total unwatched runtime.

Logged-in users will have easy access to their watchlists from the homepage as well as a history of the visited movies.

The Prototype:

I decided to go for a dark mode with red fonts, similar to Netflix, for familiarity.

Landing page

Watchlist detail page

Movie detail page

The full Figma design can be found here:

Watchlists on Figma

The database schema:

When creating schemas I find using the platform created by Ondřej Žára to be most useful, to the point, and visually clear. A blank schema can be created at:

WWW SQL Designer

Mine looks like this

I decided to use PostgreSQL as my database of choice, because of its integration with Rails, hence the foreign key connections.

My main tables will be:

• Movies
• Users
• Watchlists
• Cast
• Genres.

The reset will be joint tables.

In part 2 I will go into detail on how I built the backend with Ruby on Rails as a headless API app, using Devise and JWT for authentication.