My Sweet Config

Visualize your dev environment

Deployed: sweet-config.herokuapp.com
Backend: sweet-api
Demo: youtu.be/iARdItO02y8

Description

Purpose

I built this as an extension to my command line app, ballin scripts, which includes (among other things) a way to automatically backup your developer environment (.bash_profile, brew list, etc.) to a gist by simply typing $ gu in the command line.

Pain

GitHub gists are awesome because they are private and store revision history, but they don't provide a good user experience when you want to look at your files within the gist.

Solution

My Sweet Config, named after the pride (sweet) we take in our (my) configs, allows you to view your files by category in a clean interface designed specifically for ballin scripts.

Desktop Screenshots

Mobile Screenshots

Tech Stack

React Frontend

• React.js (user interface library)
  • Built with Create React App
• React Router
  • Document titles used for navigation history
  • static.json file supports visiting links/routes directly
• Redux (state container)
• Extensive (custom) form validation
• Loading spinners
• Bootstrap/reactstrap
• Dynamic navbar based on user being logged in, highlights the page currently on
• Ability to edit/delete profile with custom alert boxes which require password confirmation
• Proper auto-complete configuration to support browser/password manager auto-fill

Node.js Backend

• Express.js (Node.js Web Framework)
• Knex.js (SQL Query Builder)
• PostgreSQL
• Advanced Authentication and Authorization
  • bcrypt (only storing hashed passwords)
  • JSON Web Token (sent as cookies with every request, only thing stored client-side)
  • httpOnly & secure (https) cookies
  • CORS (Restricted API access)
  • Front-end simulates sessions and refresh tokens by attempting to login using token stored in cookies
  • Password protected user edits/deletion
• 32 custom errors
• 66 integration tests (SuperTest/Mocha/Chai)
• Model-View-Controller design pattern
• ESLint (Airbnb style guide)
  • Also used on frontend, which required custom configuration to work with Create React App

External API's

• GitHub

Deployment

• Travis CI (automated testing)
• Heroku
  • Pipelines and review/staging apps
  • Auto-deploy post CI success (automatic db setup)
  • Production build of React
  • Proper React Router configuration

Future Goals

• Social network
  • Friends
  • Likes
  • Granular privacy settings by file (public, friends, private)
  • News feed
  • Notifications
• Discovery/search
  • "What are the most popular VS Code configs?"
• View revision history
• Edit, delete, and add files

Demo Login

email: demo@gmail(.com) password: hello

Usage

$ yarn install
$ yarn start

Note: API must be running as well.

Testing

$ yarn test

Footnotes

All articles linked were written by me.