Twitch Clone

I made this clone as a coding challenge to join the Provi team.

The challenge

Your challenge is to clone a page or pages of a product that you love. It can be anything (e.g: Spotify, Netflix, WhatsApp, you name it). Choose a product that you love and surprise us - you can even improve it with a feature that you would like to see.

Check out the live version here: TwitchClone

Check out the Challenge Here: Provi

Features

Front Page

I created the main part of the website, and it's completely responsive to mobile devices.

Recommended Channels Component

The <VideoGroup data={[]}/> component is completely reusable, it only takes a data array from the official Twitch API and shuffles the results (Some sort of recommended channels "algorithm")

Button Component

The <Button buttonType={'primary'|'secondary'}>Text Inside</Button> component takes a buttonType property that can be passed as 'primary' or 'secondary', the text inside it will be displayed as the button text.

Lighthouse Performance Score

Built With:

• Next.JS
• Typescript
• Axios
• Styled-Components
• TwitchAPI
• Deployed to Vercel

Disclaimer

This project is in no way affiliated with Twitch Interactive, Inc. Amazon.com, Provi, or any company mentioned on this page.

Run this locally

To run this project locally, you'll need Node.js installed.

Clone this repo using git clone https://github.com/Alissonsleal/twitch-clone

Go into your project directory cd twitch-clone

Install dependencies preferably with yarn but you can also use npm install

Create a .env file in the root of the folder based on .env.example.

Run your Next.JS App with yarn dev or npm run dev

Go to localhost:3000 and check out this amazing clone

Author Info

• Twitter - @alissonsleal dms are open
• Discord - Alisson#0629
• StackOverflow - Alisson Leal

Go to the top 🚀