Simon Scheepers - GitHub Profile Acquirer

A little admin portal to acquire GitHub user details for viewing

This project requires node >= 6.1.0 and uses a minimal setup to achieve the required functionality:

• Express (api)
• React, Redux
• Babel (ES2015, react, stage-3)
• Webpack

Getting started

Install dependencies

$ npm i

$ npm install -g sequelize-cli

Sequelize config and setup

For convenience create your database with the following config. Ensure the setup is on the default port. api->config->config.json contains the connection string as below.

{
  "development": {
    "username": "yourusername",
    "password": "yourpassword",
    "database": "scoobadive",
    "host": "localhost",
    "port": 5432,
    "dialect": "postgres",
    "operatorsAliases": false
  }
}

Run migrations to create tables and update scheme

$ sequelize db:migrate

Project structure

|-- gitdiver
    |-- api
    |   |-- api.js
    |   |-- config
    |   |   |-- config.json
    |   |-- migrations
    |   |   |-- *
    |   |-- models
    |   |   |-- index.js
    |   |   |-- profile.js
    |   |   |-- user.js
    |   |-- routes
    |   |   |-- middleware
    |   |   |   |-- index.js
    |   |   |-- authentication.js
    |   |   |-- index.js
    |   |   |-- profiles.js
    |   |   |-- register.js
    |   |   |-- users.js
    |   |-- services
    |       |-- index.js
    |-- src
    |   |-- App
    |   |   |-- App.jsx
    |   |   |-- index.js
    |   |-- index.jsx
    |   |-- index.html
    |   |-- Components
    |   |   |-- index.js
    |   |   |-- PrivateRoute.jsx
    |   |   |-- ProfileTable.jsx
    |   |-- helpers
    |   |   |-- authHeader.js
    |   |   |-- history.js
    |   |   |-- index.js
    |   |   |-- store.js
    |   |-- Pages
    |   |   |-- HomePage.jsx
    |   |   |-- index.js
    |   |   |-- LoginPage.jsx
    |   |   |-- RegisterPage.jsx
    |   |-- services
    |   |   |-- index.js
    |   |   |-- profile.js
    |   |   |-- user.js
    |   |-- utils
    |   |   |-- actions
    |   |   |   |-- alert.js
    |   |   |   |-- index.js
    |   |   |   |-- profile.js
    |   |   |   |-- user.js
    |   |   |-- constants
    |   |   |   |-- alert.js
    |   |   |   |-- index.js
    |   |   |   |-- profile.js
    |   |   |   |-- user.js
    |   |   |-- reducers
    |   |   |   |-- alert.js
    |   |   |   |-- authentication.js
    |   |   |   |-- index.js
    |   |   |   |-- profile.js
    |   |   |   |-- registration.js
    |-- .babelrc
    |-- .gitignore
    |-- LICENSE
    |-- README.md
    |-- app.js
    |-- package.json
    |-- webpack.config.js

Project breakdown

The project is broken down into a client (src) and backend (api). The API uses JWT Token to dish up an encrypted token which is stored in local storage and contains the user details (Id, First Name and Last Name): this token is passed to the client whereby authentication can happen via a Authorization header, it also allows our middleware to verify the token for user data requests or creation. The API is open to register a user and authenticate/login a user whereby the token is then created.

On the client side the use of JWT Decode allows for the decoding of the token, presenting the user details to add to the state. A user is forced to login or alternatively register their details to create a login in order to have access to the portal. Once a user has successfully logged in they are presented with the GitHub profiles that they have previously added: the user always has the option to add a new GitHub user or delete any existing. Once the user has had enough GitHub profile acquiring they can logout whereby the token is removed from localStorage.

Approach

My approach was to re-use an existing API for ticketing project i started a while back. I simply had to replace Mongo with Postgres and add in the profile routes. The API is a great foundation based on the fact it utilises Token authentication which in my view allows for a better user experience when navigating the client interface. Whilst this is a test, security should still be demonstrated and was a key focus through the client-side as well.

On the client side the focus was also on trying to create a fun experience through communication through the initialising, success or failure of an action.

Omitted features

• Due to time constraints the form validation is just looking for required fields, the fields themselves are all required
• There is no password strength testing and the password is not encrypted for storing in the DB
• The user is not navigated to the dashboard after registration, they are redirected to the login page as the implementation isn't complete. Whilst a token is returned on registration and the router pushes the home page, the state isn't updated in the process and the user is logged out (token is removed removed from localStorage)
• No data sanitising
• Whilst the API catches errors, the error messages themselves aren't meaningful
• No unit tests were written
• No production build

Improvements

• The side of the reducer files is getting quite large
• As mentioned above, the user is logged in after Registration
• Pagination for the profiles
• Error messages need improving
• API url is hard coded into client-side service, needs to be updated into config

How to run

$ npm start

• Concurrently runs client and server
• Uses Webpack for client
• Uses nodemon for restarting the server on save

Production builds

• No product builds available

Testing production builds

• No testing builds