Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/fadhildwia/youtube-clone-react-mui
This project is an example of using Vite + React + TS, Material UI, React Query, and Rapid API.
https://github.com/fadhildwia/youtube-clone-react-mui
axios material-ui muiv5 rapid-api react-query react-router-dom youtube-clone
Last synced: 1 day ago
JSON representation
This project is an example of using Vite + React + TS, Material UI, React Query, and Rapid API.
- Host: GitHub
- URL: https://github.com/fadhildwia/youtube-clone-react-mui
- Owner: fadhildwia
- Created: 2024-07-18T10:45:10.000Z (4 months ago)
- Default Branch: main
- Last Pushed: 2024-07-19T06:54:35.000Z (4 months ago)
- Last Synced: 2024-07-19T16:02:39.077Z (4 months ago)
- Topics: axios, material-ui, muiv5, rapid-api, react-query, react-router-dom, youtube-clone
- Language: TypeScript
- Homepage: https://youtube-clone-react-mui.vercel.app
- Size: 6.87 MB
- Stars: 0
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
Youtube Clone
This project is an example of using `Vite + React + TS`, `Material UI`, `React Query`, and `Rapid API`.
---
### Home, Search, Channel Detail, and Video Detail Page
## 📱 Features
- Create layout using components from Material UI
- Integration of Youtube V3 API from Rapid API
- Create hooks for fetching data using React Query
## 🚀 Technologies & Resources
- [x] [React + Vite + TypeScript](https://vitejs.dev/)
- [x] [Material UI](https://mui.com/material-ui/getting-started/)
- [x] [Axios](https://axios-http.com/docs/intro)
- [x] [React Query](https://tanstack.com/query/v3)
- [x] [Rapid API](https://rapidapi.com/ytdlfree/api/youtube-v31)
## 💻 Installation
1. #### Clone the repository:
```bash
git clone https://github.com/fadhildwia/youtube-clone-react-mui.git
```
2. #### Navigate to the project directory:
```bash
cd youtube-clone-react-mui
```
3. #### Install the dependencies:
```bash
yarn
#or
npm install
```
4. #### Make a copy of `.env.example` to `.env`:
```bash
# Put your Rapid API credential in .env file
cp .env.example .env
VITE_APP_X_RAPIDAPI_HOST=[key]
VITE_APP_X_RAPIDAPI_KEY=[key]
```
5. #### Run the project:
```bash
yarn dev
#or
npm run dev
```
---
Feel free to explore the code and adapt it to suit your needs! If you encounter any issues or have suggestions for improvements, please don't hesitate to open an issue or submit a pull request.