Youtube Clone App - Wizeline Academy 2021 React Bootcamp

Intructions: GIST.

Deployment: https://youtube-clone-lalovene.netlify.app/ (currently down, see latest PR for preview)

📖 Project Overview

Youtube Clone App built using React and the YouTube v3 API. Features:

• Main page with popular videos.
• Video detail page with related videos.
• User can login and mark videos as favorite (user: wizeline, password: Rocks!).
• Private page of favorites and favorite video detail view with favorite suggestions.
• Different Views for Desktop and Mobile.
• Implemented TDD using Jest.
• Added CI/CD with Github Actions and Netlify CD.
• Light / Dark mode using the context React Hook, Styled Components and the local storage.

📍 Table of Contents

• Technologies Used
• CI/CD
• Site Overview
• Usage
• Contributing

💻 Technologies Used

• React
• Hooks
• Custom Hooks
• Youtube v3 API
• Jest testing
• Github Actions
• JavaScript

🤖 CI/CD

This project has a full Continuous Integration and Delivery system.

• All code is tested with a lintern when a commit is made and in the moment a pull request is created. Github Actions also runs the Jest tests in the CI workflow.
• You can merge into main when all tests pass
• When a merge is done, the Continuous Delivery is triggered and Netlify deploys the code.

🔍 Site Overview

Mobile View

Main Page & Search

Video Detail

Login

Favorites

Developers can create a DevUp account to share their interests and languages, post about their projects, and contact other project owners.

💼 Usage

Create a .env file in the root app directory using the following template:

REACT_APP_YOUTUBE_KEY = "YouTube-API-v3-key"

Install the node dependencies

$ yarn

Run the app

$ yarn start

📝 Contributing

Contributions are welcome! Please refer to the Contributing guidelines.