🎥 Upcoming Movies

This project is a fullstack coding challenge that I found somewhere which consumes TheMovieDatabase API to display upcoming movies and searched movies.

Demo: https://upcoming-movies.onrender.com/ (it might take a while to wake up the hosting service)

Features

• MaterialUI for faster prototyping
• Yarn workspaces for monorepo management
• Atomic Design for components structure
• Continuous Deploy with Github Actions to Heroku Render.com
• Type safe with Typescript

How to Develop

• Clone this repository
• Copy .env.example to .env and fill its credentials
• Run yarn
• Run yarn dev or yarn dev:client/yarn dev:server
• Access http://localhost:3000 for client or hit http://localhost:8080 for server

How to Deploy

• The application is deployed directly into Heroku using Github Actions
• Using Render.com

Challenges/Wishlist

React State Management

At first I thought that useState hooks would be enought to manage states for this simple application, however I've considered using Redux when developping the Movie Details Modal and even the Query/setQuery states. However it would looked being too much and I went for a Context API and Props Drilling approach, respectively.
I'd like to have this Mark Erikson video about Redux and his draft React cheatsheet about State Managment for future references. Really cool material.

Layout Design

UI and UX are not my strong points, so I've used MaterialUI to help me for a faster development. It surelly worked, but sometimes I've wished using my own components for a better understanding on how tags and styles were working

Shared package

There were times where I wanted to use the same types I've declared on both client and server applications and it sound tempting creating a new package just for this. In the end, I've just imported it directly from the other package.
I would be also great to share ESLint settings.

Useful links:

• Using Yarn Workspaces
• Creating react-app from scratch
• Pitfalls of overusing React Context

Check out my other projects

• Health Plan Listing: a fullstack application made in VueJS and ExpressJS
• Residence Heat Map: a ReactJS app with JSONServer + ExpressJS
• Corvo Astral: a Discord Bot being used in over 200 servers
• Nest: a microservices project using MolecularJS to integrate my personal APIs
• YT-DlAndCut: an Electron app that downloads and cut Youtube videos
• Quiz: a quiz page made with NextJS and ReactJS