YouTube Clone with RapidAPI ▶

This web application is a simple clone of YouTube that uses Youtube v31 api from Rapid API. It has end to end tests using Cypress Framework that can be run in local environment or on continuous integration using the official Cypress GitHub Action.

Visit the deployed app at: YouTube Clone

Tech stack

This project was created using Create React App.

• Frontend library - react.js
• End to end tests - Cypress Framework
• Continuous Integration - GitHub Actions, check e2e.yml file
• Styles and UI - Material UI
• Build tool - Create React App
• Routes - React Router

Dependencies

Check other project dependencies and versions in the package.json file.

How to use this project

Development

1. Clone the project git clone git@github.com:augusticor/youtube-clone.git
2. Install the project dependencies using npm install
3. Rename .env.example file to .env.local
4. Create a Rapid API account to consume the api
5. Subscribe to Youtube v31 api
6. Copy and paste your X-RapidAPI-Key in the VITE_RAPIDAPI_KEY environment variable located in the file from step 3
7. Start the project using npm start

Testing

1. Follow steps 1 to 6 from development mode ⬆
2. Open cypress running npm cypress:open on your CLI and click on E2E testing on testing type
3. Select a browser and the spec file you want to run

Live Deployment

Just visit the deployed app at: YouTube Clone

Available Scripts

npm start

Runs the app in the development mode. Open http://localhost:5173 to view it in your browser.

npm cypress:open

Opens cypress on local testing, allowing to choose the testing type, in this case end-to-end tests. More information on official documentation.

npm cypress:run

Runs cypress tests, use it for continuous integration. More information on official documentation.

npm run build

Builds the app for production to the build folder.