This project is an advanced full-stack web application, written in Typescript using Next.js framework. App is fetching data from Twitch API for all live streams, saves them into MongoDB using Next.js API routes, and renders all data in a modern looking charts and tables.
I used in this app various of tools that NextJS provides, such as:
- ISR - used this in probably the most of all pages, because my data is changing each hour, and that is the exact revalidation time, that is triggering site regeneration. This ensures that data is always actual and up to date, and pages are loading surprisingly fast, due to prerendering.
- SSR - I used that tool just in one case. It is user for rendering content on server-side for each request, but at the same time lets you use your backend API routes. Really solved the problem behind getting tons of data from Twitch API each hour - moved that logic into API route.
- Dynamic Routes - essential tool that gives easy access to query parameters in URL, and in combination with SSR lets me generate dynamic content based on query.
Project is created with:
- Next.js Framework built around React, which adds SSG/SSR/ISR, API routes, routing and much more with minimum effort.
- React UI development library, build with creating reactive apps in Javascript (version: 18.2.0)
- Typescript Javascript superset, which add static typing to Javascript (version: 4.8.4)
- SASS CSS preprocessor, which adds mixins, functions, variables into CSS with ease (version: 1.55.0)
- Recharts Javascript library, which helps you create great looking charts for your website (version: 2.1.15)
- FORMIK Powerfull form-management library for React, that helps in tracking errors, states, changes in all forms (version: 2.2.9)
- YUP It is a schema builder for runtime value parsing and validation. Great addition to Formik (version:0.32.11)
- MongoDB MongoDB is an easy to use online Database, which helps in storing all important data in ready-to-use formats (version: 4.10.0)
- Jest Jest is really powerfull testing library, which was used in combination with React Testing Library to make essential unit tests (version: 29.3.1)
- Firebase-Auth BaaS service that makes adding user authentication really easy.
Clone this repo to your desktop and run this command to install all the dependencies:
npm install
In the meantime create file named
.env.local
which will contain all environmental variables. In file you need to include these variables:
NODE_ENV=<DEVELOPMENT/PRODUCTION>
TWITCH_CLIENT_ID= <YOUR TWITCH CLIENT ID>
TWITCH_CLIENT_SECRET= <YOUR TWITCH CLIENT SECRET KEY>
DB_CLIENT_ID= <YOUR DB CLIENT ID>
DB_CLIENT_PASSWORD= <YOUR DB CLIENT PASSWORD>
FIREBASE_KEY= <YOUR FIREBASE APP KEY>
To finally run application run this command:
npm run dev