If you are anything like me when it comes to keeping your social media profiles in sync, then you could benefit from this app. The purpose is to type your profile information once, and then send the updates to your profile in Twitter, GitHub & Facebook.

Just to note, this project is still in development and not ready for production usage, however it is up to a point where I feel comfortable to make it public. As of the time of this writing, you can already send updates to Twitter and GitHub.

Also, once the project is complete, I will create a series of blog posts tutorials on building this app, including Webpack configuration for development and production.

[topads][/topads]

Technologies/OSS Projects Used

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

GitHub Repo

profile updater

Setting up the app

Clone the repo

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

Environment variables (1)

Rename .env.example to .env in server and >client

[signupform][/signupform]

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.

Roadmap

In no particular order.

• Better “Page Not Found”
• Code splitting
• Input validation and sanitization
• Better error handling throughout the app
• I know there are others, but I forget right now
• Send updates to Facebook profile (will implement last)

Preview

[bottomads][/bottomads]