UnU - Unsub-n-Unfollow

Table of Contents

Introduction	Features	Screenshots	Why This App?	Technologies Used
Setup Instructions	How to Use the App	Deployment & Production Notes	Future Improvements	Feedback	Contact

back to top ⬆️

Introduction

UnU is a full stack application that enables the user to unsubscribe or unfollow from multiple social media or video streaming accounts. Users log in and link accounts from multiple social media or streaming services. Once the accounts are linked, users can select one or more accounts they subscribe or follow and then click unsubscribe/unfollow.

Features

• Uses the YouTube Data v3 API so you can easily unsubscribe from more than one user in bulk.
• Multiple account handling through account linkage for more than one YouTube channel.

Screenshots

Landing page showcasing the application title, instructions, description, and future services.

Login page for creating your primary account with UnU.

Shows your account's subscription list after linking your account.

Why This App?

This web application solves a real world problem when users are subscribed to or are following hundreds of accounts. Services like YouTube, Instagram, or Twitch don't offer an easy and fast solution to unsubscribe/unfollow from these accounts in bulk. This web application makes it easy by retrieving each subscription/follow and simply clicking one more button to unsubscribe/unfollow.

Technologies Used

• Frontend:

  • Next.js
  • TailwindCSS
  • HeroUI
  • Javascript

• Backend:

  • Express.js
  • Sequelize

• Database:

  • PostgreSQL

• APIs:

  • YouTube Data v3

Frontend Choice Justification

Next.js was chosen because it uses the React framework. Next.js had just enough of what I needed if I wanted something easy to use and to learn. I did consider Vite and Svelte, but those didn't have the page routing that Next.js had.

TailwindCSS and HeroUI were chosen because they make it easier to make a website look more appealing even if you don't have a great handle on CSS. I'm planning on using MaterialUI in the next version of this project because it has components that align with the vision that I have for UnU.

Backend Choice Justification

Express.js was chosen because there are a wide range of libraries, references, and documentation for API usage and and web development in Javascript. It was also chosen because it's very straightforward and I already knew the basics. I went with technologies that I already knew because I knew that I'd be learning so many new things in this project. Adding more new technologies was something that was going to slow me down.

Sequelize was used because it didn't include any bloat. I did consider Prisma against Sequelize, but the type safety, definitions, and model definitions felt like it was overkill for a project of this size. At the end I only had three tables to work with.

Database Choice Justification

PostgreSQL was chosen because it's a relational database that is the most used and it also didn't have too much unnesecary bloat. I considered MySQL but the documentation and size of the database felt very enterprise-centered. It didn't suit the scale that this app needed.

API Choice Justification

YouTube Data v3 was used to request the user's subscription list, request the channel's subscriber count, and to unsubscribe from YouTube channels.

Setup Instructions

Database Setup (PostgreSQL)

1. Load the database in PostgreSQL with the unu-schema.sql file.
2. Make sure the user role you are using has the proper privileges.
3. If necessary, change the user role name as declared in the init_seqeulize() function in backend/lib/db_seq_lib/seq_lib.js
4. Make sure the database is running.

Backend Setup (Express.js)

1. Navigate to the backend/ directory.
2. Install the required packages:

npm install

3. Run the Express.js backend:

node main.js

4. The backend is now available in http://localhost:3001

Note: Make sure you have a Client ID, Client Secret, and a YouTube API Key to make the requests to the API (Use Google Cloud Console to get these strings). Don't forget to configure your users, scopes, and redirect urls.

Frontend Setup (Next.js App)

1. Navigate to the unu/ directory.
2. Install the required packages:

npm install

3. Run the Next.js frontend:

npm run dev

4. The frontend is now available in http://localhost:3000

How to Use the App

1. Log in to create a primary account.
2. Follow the Google prompts.
3. Click on "Link new account" to link a new account.
4. Follow the Google prompts and choose the YouTube account you want to link.
5. Click on the "Select Accounts" drop down to see and select your account.
6. Click on any listed accounts you want to unsubscribe from.
7. Click unsubscribe.
8. Done! You are now unsubscribed from those accounts and a new subscription list for your account should appear.

Deployment & Production Notes

The web application is planned for deployment after the refresh tokens are safely secured in the database. Proper error checks and documentation also need to be made to easily scale in the future.

Future Improvements

The features that are urgent enough are dealing with rate limiting and surpassing API quota usage. One way to solve this would be to use Redis for caching. Once I have that set up, I can focus on adding additional services.

One feature I wanted to add was having categories for different channels. This would be done with a topic modeling API that analyzes the channel's data. This feature would also force a UI change, which would mean either modifying the existing frontend or swapping HeroUI for MaterialUI.

Feedback

Any and all feedback is appreciated. Feel free to reach out if you encounter any issues.

Contact

Adrian Quiroz: adrianquiroz166@gmail.com

back to top ⬆️

---