Skip to content

Full stack social media aggregator application built in 4 days of coding and planning.

Notifications You must be signed in to change notification settings

blue-ocean-picard/soapbox

Repository files navigation

Table of Contents

Soapbox

Social media aggregation application allowing the user to view post and analytics data from various social media platforms. Current functionality includes YouTube and Twitter social media platforms. Users can switch between social media outlets and view their home timeline (Twitter) or view their currently uploaded videos (YouTube).

Metrics and analytics for Twitter and YouTube can be seen below:

  • Twitter

    • Average number of retweets/likes per hashtag usage
    • Average number of retweets/likes per url link usage
    • Recent hashtags' percentage of total retweets
    • Recent url links' percentage of total retweets
    • Metrics on number of retweets and favorites per tweet on home timeline
  • YouTube

    • Likes
    • Dislikes
    • Views
    • Favorites
    • Comments

Metrics and analytics for Twitter include retweets, hashtags, and URL tracking . Metrics and analytics for YouTube includes likes, dislikes, views, favorites, and comments.

Functionality

Below outlines major functionalities for a minimum viable product, achieved over a four-day period of coding and planning.

Register and Login:

Twitter Home Timeline:

YouTube Feed:

Batch Posting:

Getting Started

  1. Fork this repository and clone it to your local disk. Navigate to the project folder on your computer.
  2. In the project root directory and client directory, run these commands
npm install

cd client
npm install
  1. The project is bundled with webpack, split between production and development configurations for optimization. Run these commands from the client directory.
npm run build-dev
npm run build-prod
  1. Lastly, open up a new terminal and navigate to the root directory. Start the server with these commands. This will also start the scheduler with Cron.
npm run server
  1. See Requirements to learn how to set your environment variables. In summary, you will need to set up Twitter Developer and Google Developer profiles for tokens.
  2. Navigate to http://localhost:3000

Tech Stack

Client is built with React Router and MaterialUI, compiled with Babel, and bundled with webpack. Recharts library is used to generate charting for platform analytics, and other various libraries are used for utility.

Server is built with Express, and MongoDB is interacted through Mongoose. Initial authentication is implemented via Passport and various local strategies, alongside with the use of JSON Web Tokens. Interaction with YouTube and Twitter are done through external libraries for security and convenience. Scheduler for scheduled posting is done with Cron.

Dependencies and devDependencies can be found here:

Architecture

For more information on client and server code / logic, you can find them here

Requirements

Google Developer account to have access to Google Oauth2 credentials.

  1. Create account with Google developers, and then create a new project
  2. Click Enable API and Services, and enable YouTube Data API v3
  3. Create credentials for OAuth client ID
  4. Configure consent screen and set up application
  • Fill in the required fields with Authorised domains as http://localhost:3000
  • Add scopes for all YouTube v3 related API
  • Add users by their emails (very important step)
  1. Click Create OAuth client ID again and you will be asked to add redirect URIs
  1. Copy client_id, client_id_secret, and the redirect URIs into your .env file

Twitter Developer account to have access to Twitter Oauth2 credentials.

Team

About

Full stack social media aggregator application built in 4 days of coding and planning.

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages