Nitflex is a Netflix clone UI with many features excluding streaming of course. Building by myself from scratch using the various documentations as help.
- ReactJs
- Scss with a 7-1 pattern (almost)
- tmDB Api for the programs data
The project has been deployed on Netlify, you can view the demo at : Nitflex V1
Thanks to Javascript's asynchronous and also React hooks like useEffect, the application makes specific API requests to give a conditional display when it "mounts". These different requests are made according to the components or the page to display. For example, if you are on the movies page, API requests will relate to movie data.
- Home
- Favorites
| Components | |
|---|---|
| Nav | Contain links to other pages, searchbar to fetch programs by name. This component is also responsive. |
| Header | This component fetch and render a random banner from a list of trendings movies/TvShows |
| Row | Each row map a list of particular category of fetched programs |
| QuickView | Pop up component on click to view more information about a specific program with the capability to add this one to favorites |
| SearchResult | Custom component to fetch and render custom query from the searchbar |
| Footer | Static render displaying in the whole application |
| Pages | |
|---|---|
| Home | This is the main page that renders a banner, as well as programs related to movies and series in rows |
| Movies | Similar to the homepage but with queries only related to movies |
| TvShows | Similar to the homepage but with queries only related to Tv Shows |
| Favorites | This page get favorites programs ID from localstorage and make a specific request to get each programs details from the API. Each favorites program can be deleted from favorites in this page. |
- ✅ Filtering data on fetch to remove programs without backdrop_path(image), in order to prevent 404 error and bad UX
- ✅ Create customs css rules(breakpoints) in the base SCSS files for variables(colors, background ...) and responsive
- ✅ Creation of a custom logo resembling the official logo, with a responsive variant
- ❌ In rare cases, the banner does not display, you have to refresh the page.
- ❌ For unknown reasons, potentially related to the database, a 404 error may appear for requests related to images, without disturbing the rendering.
- ❌ The search bar is very short in the responsive mode of the Nav.
- ⚙️ Add a lazy loader to limit unnecessary queries.
- ⚙️ Modify components to make them more reusable (example: for the row).
- ⚙️ Use clearer naming for component endings with .jsx
- ⚙️ Create a specific folder for every constants.
- ⚙️ Create more dynamic rendering, some hard coded data could be mapped.
| /src/config | Contain every requests excepted specific request for details mades with an id. |
| /src/styles | Contains all styling logic in scss, compiled to css in an index |
| /src/assets | Contains the minimum in assets, so everything that does not come from the API |