A React App to Update Your Social Medial Profiles: Twitter, GitHub & Facebook
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
client
controllers
library
routes
.env.example
.gitignore
LICENSE
README.md
package.json
server.js
setup.js
yarn.lock

README.md

profile updater

Real world example app. Updates social profiles: GitHub, Twitter and Facebook

The purpose is to type your profile information once, and then send the updates to your profile in Twitter, GitHub & Facebook.

Technologies/OSS Projects Used

  • React
  • React Router
  • Webpack
  • Firebase for authentication and database
  • React Semantic UI
  • Node/Express
  • & tons of other NPM packages

Setting up the app

Clone this repo

git clone https://github.com/esausilva/profile-updater.git

Install server and client dependencies

yarn && cd client && yarn

Environment variables (1)

Run the following script to create the necessary .env files for the client and server. This will copy the contents of .env.example into the respective .env files.

yarn setup

Firebase

  1. Create an app. https://console.firebase.google.com/
  2. Select Database > Rules and change the default to this:
{
  "rules": {
    ".read": "auth != null",
    ".write": "auth != null"
  }
}

Twitter

  1. Create an app and take note of the Consumer and Secret keys. https://apps.twitter.com/
  2. Go back to Firebase Authentication > Sign-In Method; select Twitter and switch to Enable, then paste the Consumer and Secret keys from Twitter; finally copy the callback URL
  3. Back in Twitter paste the callback URL where required
  4. Change the access levels to Read and Write

GitHub

  1. Register a new app and take note of the Client ID and Secret. https://github.com/settings/developers
  2. Go thru the same dance as with Firebase authentication with Twitter
  3. Back in GitHub paste the callback URL where required

Facebook

  1. Add a new app and take note of the App ID and Secret. https://developers.facebook.com/
  2. Go thru the same dance as with Firebase authentication with Twitter
  3. Back in Facebook paste the callback URL where required (Under Products > Facebook Login > Settings)

Environment variables (2)

Go back to the .env files and paste the required keys. For the CRYPTOJS_KEY just create a random alphanumeric string, the longer the better.

Running the app

yarn dev

Will launch Node and React apps concurrently.

To run with Webpack Bundle Analyzer

yarn dev:bundleanalyzer

Roadmap

In no particular order.

  • Better "Page Not Found"
  • Current connected providers and profile information in side menu
  • Code splitting
  • Update to React 16 and Webpack 3
  • Better error handling throughout the app
  • Unlink an auth provider from an user account
  • Send updates to Facebook profile (will implement last)

Preview

GIF

GIF

GIF