design-sparx/flick-city

An entertainment recommendation website built using React, Typescript & Mantine

Flick city entertainment application

Online Demo

About:

This is a web application built using React (Create React App), template - Typescript.

Available Pages

1. Home - landing page
2. Categories - lists all items based on categories, i.e. movies, upcoming, podcasts, tv series & video games
3. List - lists all items based on the sections selected on the home page
4. Search
5. Movie title - displays a selected movie information
6. Actor - displays an actor's basic information

APIs

The data on the application is from the following endpoint - https://rapidapi.com/SAdrian/api/moviesdatabase

Tech Stack:

• embla-carousel-react v7.0.3 - https://www.embla-carousel.com/get-started/
• mantine v5.5.0 - https://mantine.dev/pages/getting-started/
• react v18.2.0 - https://reactjs.org/docs/getting-started.html
• react-router-dom v6.4.1 - https://reactrouter.com/en/main
• react-icons v4.4.0 - https://react-icons.github.io/react-icons/
• react-photo-view v1.2.2 - https://react-photo-view.vercel.app/
• use-query-params v2.1.1 - https://github.com/pbeshai/use-query-params#readme
• react-helmet v6.1.0 - https://github.com/nfl/react-helmet#readme

Dev dependencies

• eslint v8.0.1 - https://eslint.org/docs/latest/user-guide/getting-started

Screenshot

Software

Before proceeding, please ensure you have the following software installed on your computer.

• Node
• Yarn (optional but recommended)
• Git command line tools

Useful links

• Download Git cli -
  • Windows: https://git-scm.com/download/windows
  • Mac: https://git-scm.com/download/mac
• Download Node - https://nodejs.org/en/
• Download Yarn cli - https://yarnpkg.com/lang/en/docs/install/
• Download VSCode - https://code.visualstudio.com/

Getting started

Please fork a copy of this repository. Forking a repository allows you to freely experiment with changes without affecting the original project. Alternatively download or clone the master branch.

Download & Install Dependencies on your machine

Clone the repo to your machine git clone <CloneURL>

Launch the frontend

1. Open a new terminal window and navigate in your root folder cd <../root> yarn install OR npm install
2. Run the start script yarn run start OR npm run start

Your app should be running on: http://localhost:3000

Versions

v1.0

• Default project implementation

Authors

1. Kelvin Kiptum Kiprop - https://github.com/kelvink96

License

This project is licensed under the MIT License - see the LICENSE file for details

flick-city's Issues

Optimizations

Is your feature request related to a problem? Please describe.
This request is based on Google Chrome lighthouse report

Describe the solution you'd like
Update application based on lighthouse report

Additional context

Navigation bar disposition when on devices of 1024px width

Describe the bug
A clear and concise description of what the bug is.

To Reproduce
Steps to reproduce the behavior:

1. Go to any page
2. Look at the navigation bar
3. See the UI error

Expected behavior
The navigation bar is not well aligned and positioned.

Screenshots

Desktop (please complete the following information):

• Browser [e.g. chrome, safari]

Error 400

Describe the bug
TypeError: Cannot read properties of undefined (reading 'credits')

To Reproduce
Steps to reproduce the behavior:

1. Go to '...'
2. Click on '....'
3. Scroll down to '....'
4. See error

Expected behavior
I expect to see the website home page

Screenshots

Desktop (please complete the following information):

• OS: [e.g. iOS]
• Browser [e.g. chrome, safari]
• Version [e.g. 22]

Smartphone (please complete the following information):

• Device: [e.g. iPhone6]
• OS: [e.g. iOS8.1]
• Browser [e.g. stock browser, safari]
• Version [e.g. 22]

Additional context
TypeError: Cannot read properties of undefined (reading 'credits') at qw (https://design-sparx.github.io/flick-city/static/js/main.0a26d920.js:2:455208) at Oi (https://design-sparx.github.io/flick-city/static/js/main.0a26d920.js:2:84082) at Sc (https://design-sparx.github.io/flick-city/static/js/main.0a26d920.js:2:141322) at bs (https://design-sparx.github.io/flick-city/static/js/main.0a26d920.js:2:130258) at gs (https://design-sparx.github.io/flick-city/static/js/main.0a26d920.js:2:130186) at vs (https://design-sparx.github.io/flick-city/static/js/main.0a26d920.js:2:130049) at as (https://design-sparx.github.io/flick-city/static/js/main.0a26d920.js:2:126829) at os (https://design-sparx.github.io/flick-city/static/js/main.0a26d920.js:2:125380) at k (https://design-sparx.github.io/flick-city/static/js/main.0a26d920.js:2:164878) at MessagePort.N (https://design-sparx.github.io/flick-city/static/js/main.0a26d920.js:2:165412)

Launching app failure

Describe the bug

• Previous api from https://rapidapi.com/SAdrian/api/moviesdatabase not working

To Reproduce
Steps to reproduce the behavior:

1. Go to any page
2. Loading movies error
3. See error - blank page

Expected behavior
Launch the app, nothing is showing

Screenshots
If applicable, add screenshots to help explain your problem.

Desktop (please complete the following information):

• OS: [e.g. iOS]
• Browser [e.g. chrome, safari]
• Version [e.g. 22]

Smartphone (please complete the following information):

• Device: [e.g. iPhone6]
• OS: [e.g. iOS8.1]
• Browser [e.g. stock browser, safari]
• Version [e.g. 22]

Additional context
API not working