An app to get details of your favorite TV shows. See the live version here!
-
Server API: an Apollo Server that uses different data sources to serve the client requests. You can find it in the
server/
folder.- Data sources:
- OMDB Open REST API: external service to search for movies and movie details.
- Apollo In-Memory LRU or Redis Cache: caching service to save unnecessary calls to OMDB API source. Cached results have a max. age of 24 hours.
- Data sources:
-
Client App: a NextJS & React app that consumes a graphQL API with Apollo Client. Ideally it will be served from a CDN in production. It is in the
client/
folder.- Features:
- Search shows by title and type. Searches are tracked with the url query parameters, allowing you to go back and forth using the browser history and to share or save searches using the url.
- See show details: if you click in a show you will be redirected to a page with more details of the given show.
- Read instructions: to have a look at the code I recommend going to
pages/index
andpages/show/[id]
. They are the entry points of the app and from there you can dive deeper and understand everything.
- Features:
-
An OMDb api key is required to work locally. Provide it in
server/.env
as shown in theserver/.env.example
file. If you don't have one, you can get it here. -
Open a terminal in the
server
directory and runnpm install && npm run dev
. This will start the server in port 4000. This uses Apollo LRU in-memory cache. To set up caching with redis read here. -
Open a terminal in the
client
directory. -
Copy the
.env.example
file into.env.local
. With linux you can usecp .env.example .env.local
-
Install necessary packages and start the server with
npm install && npm run dev
.
If you want to use a redis cache, you must provide a REDIS_URL
EV in the dotenv file. If you have docker installed use redis://127.0.0.1:6379
and run npm run dev:redis
.
- There are jest tests in both client and server. To run them use
npm test
in both the client and the server folders. - I used
@graphql-codegen
to generate types out of the schema. You can re-generate them withnpm run codegen
. When usingdev*
scripts, they are re-generated whenever the schema files are changed.
Assuming you have installed heroku CLI and you are logged in:
- Create a heroku app with
heroku create -a <your-app-name>
- From the root folder, use
git subtree push --prefix server heroku main
. This will push just the server folder as an isolated app to the heroku remote. - Set the
OMDb_API_KEY
environment variable. - Optionally, to use a redis cache, run
heroku addons:create heroku-redis:hobby-dev -a <your-app-name>
. This should set up the redis instance and update theREDIS_URL
EV for you.
- Using vercel, just create a new project and set the client folder as the entry point.
- Add integration tests for the client.
- Currently the pagination system is the OMDb API pagination. This is not optimal because there are shows discarded by the server, so some pages are really small (example). To solve it I would create a different pagination system in the apollo graphql server.
- Add a users' feature, so users can sign up and make lists of shows (favourites, to-watch, etc.)