ForYou

A concept that visualizes personal youtube profile data using React and Node.js built around googleapis; OAuth2 and youtube data api v3.

Table of Contents

• ForYou
  • Table of contents
  • Overview
  • Features
  • Demo
  • Screenshots
  • Tech Stack
    • Built with
  • Environment Variables
  • Run Locally and Setup
  • Roadmap
  • Author
  • Acknowledgments
    • Useful resources
  • License

Overview

Greetings Everyone! This project is made for the purpose of using the current Youtube data API and extending its powerful functionalities.

Features

• Youtube Profile Data
• Youtube feed video suggestions using puppeteer
• Light/dark mode toggle
• Device Responsiveness

Demo

Desktop:

Mobile:

Screenshots

See screens section.

Tech Stack

Client: React, Redux

Server: Node, Express

Built With

• Youtube Data API V3, Google APIs OAuth2
• Typescript
• React, Redux, React Router V6, SCSS Modules
• Node.js, Express
• Puppeteer
• Webpack

Environment Variables

To run this project, you will need to add the following environment variables to your .env file Get client credentials from project API credentials.

NODE_ENV = production

CLIENT_ID = XXXXX

CLIENT_SECRET = XXXXX

REDIRECT_URI = host-server:5000/auth/callback

Run Locally and Setup

1. Clone the project

  git clone git@github.com:almoratalla/foryou.git

2. Go to the project directory

  cd foryou

3. Install dependencies

  npm install

4. Register a project in google cloud console and enable the Youtube Data API. Proceed in creating authorization credentials. See Youtube Data API Authentication guide

5. Create an .env file in the root of the project using the format from .env.sample. Set up environment variables.

6. Start the server without build files (initial setup)

  npm run stage

or start the server with build files

  npm run start

Roadmap

• Add more features for videos, playlists and explore

Author

• Alain Moratalla

Acknowledgements

This project is heavily inspired by the project Spotify Profile by Britanny Chiang and the code structure of the app TakeNote. I would like to give huge appreciation to the aforementioned projects. This project also received major help from one of my colleagues, Larz Pal-ing, who consulted on styling and responsiveness. Also, ForYou is a project dependent and integrates with the Youtube data API V3. This app would no longer be useful if not for the availability of the Youtube data API that allows developers to incorporate Youtube functionalities to their app. Lastly, all these would not be made if not for the following resources:

Useful Resources

• Spotify Profile by Britanny Chiang - This is the major inspiration for this project. I tried a version of the app using YouTube functionalities instead.

• TakeNote - I searched for samples of apps that run on a MERN stack and found their structures to be suitable for this project. I loved it and made it the guide for the structure of this project.

• React Course by Academind - My fundamentals in React came from this course.

• Youtube Data API Reference - All samples and references in using the functionalities from Youtube data API came from this site.

• Demo Starter Template With SASS by Kevin Powell - Template guide for the styles of the app.

License

ForYou is MIT licensed