https://github.com/thenaubit/example-react-tmdb-api

🎉 A little example / portfolio using React.js, Typescript, React Query, Chakra... to display in a beautiful way the top movies and series from the TMDB API
https://github.com/thenaubit/example-react-tmdb-api

chakra-ui react react-router react-router-v6 reactjs reactquery tmdb-api typescript

Last synced: 29 days ago
JSON representation

🎉 A little example / portfolio using React.js, Typescript, React Query, Chakra... to display in a beautiful way the top movies and series from the TMDB API

• Host: GitHub
• URL: https://github.com/thenaubit/example-react-tmdb-api
• Owner: TheNaubit
• Created: 2022-11-10T20:54:47.000Z (about 2 years ago)
• Default Branch: main
• Last Pushed: 2022-11-11T14:32:12.000Z (about 2 years ago)
• Last Synced: 2024-12-29T10:05:20.622Z (about 1 month ago)
• Topics: chakra-ui, react, react-router, react-router-v6, reactjs, reactquery, tmdb-api, typescript
• Language: TypeScript
• Homepage: https://wonderapi.nauverse.com/
• Size: 1.1 MB
• Stars: 2
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# 🎉 Wonder Film!

A little example / portfolio using React.js, Typescript, React Query, Chakra... to display in a beautiful way the top movies and series from the TMDB API.

![](https://github.com/NauCode/example-react-tmdb-api/blob/c4a5276c439569f643449c73c3a9f56d75cbc12c/demo-page.png?raw=true)

## Live Demo

You can check this project deployed here: [https://wonderapi.nauverse.com/](https://wonderapi.nauverse.com/)

## Stack Used

- React.js

- Typescript

- React Router v6

- Chakra UI

- Framer Motion

- React Query (with infinite pagination!)

- And much more! 🚀

## How to install and run by yourself?

- Clone this repo in your computer and inside the root folder of this project, install the libraries (you can use ```npm i```, ```yarn``` or even ```pnpm i```)

- Once the libraries are installed, you need to create a ```.env``` file in the root folder of the project with a var called ```VITE_TMDB_API_KEY``` and it must have the value of your TMDB API key (if you don't have one, you can check how to get one [here](https://developers.themoviedb.org/3/getting-started))

- Now, launch the project with ```npm run dev```, ```yarn dev``` or ```pnpm run dev```

- That's it!