A responsive webapp to visualize the current TV shows and movies trends :
- Shows the trends sorted by genres
- Save favorite shows in your own-crafted list
App used to step in dev world. My main focuses were:
- understand the mechanics of a JS react framework : NextJs v13 with the App router does the trick
- have a responsive designed web application (for mobile and desktop)
- have an automatic deployment pipeline
- store data in a cloud database
- build a continuous integration & deployment pipeline
Using:
- NextJs @13.4.19 to organize the app, using the App Router
- The Movie DataBase API to fetch trends when needed
- Next-Auth to easily setup a signin/signup/signout mechanism with Github provider
- MongoDB to store authentication and app data (user logged in and fav'ed shows currently)
- Prisma to connect to MongoDB
- TailwindCSS for pages styling
- Github to host app sources
- GitHub Actions to automate continuous integration & fire Vercel deployment
- Vercel to deploy automatically (after each push on main) @see here
PlaywrightCypress to write UI and API tests. They are started in Preflight (GitHub Action) before deploying to Vercel
$ npm i react@latest react-dom@latest [email protected]
We use gmail-tester to get signin mails.
To set it up or in case you see an invalid_grant error, please follow the steps 2. and 3. of the gmail-tester npm page.
You need to set the credentials.json and token.json files in the directory mail-tester at the root of the application. See mail-tester.example
We use TMDB API to fetch live data of trending movies and tvshows. You need to get your own API_KEY in order to make it work.
We use MongoDB Atlas as mongodb host. You can get your own and set up the uri.
We use a gmail account to send magic links to the users who want to signin. To set this up, you need to create & use an app password. Preferably, you will use a side-account to do that. Do not use your main. You also can use a custom smtp server.
$ npm run dev
Latest deployment of main branch on Vercel
After each push on main branch, we build, lint, run tests and then build. On success build, we deploy on prod env.
MIT © 2023 Thibault Houel