SPA created as a test prototype for an job interview. The website should make an API request to github public API, retrieve and render specific details about the user that was found.
The project had some rules like "mandatory use of routes", "error handling", "conditional rendering if user was not found". Since I was on the mood to push myself in this test, I learned and put in practice some technologies that I didn't knew, like Atomic Design and Styled Components.
The result was pretty satisfying, but it was highly time consuming. I spent 4 days from a deadline of 7 days, to work just on the project architecture, structure and componentization, including the learning curve to apply Atomic Design and Styled Components to the project.
As a conclusion of this project, I would only recommend Styled Components + Atomic Design, if your project is aiming to make a complete design system from scratch. Anything different than that, is best to go with some opinionated design like Bootstrap and Page/Container/Component structure.
Hope that someone enjoy this project as I did and can be of some sort of help. Even with the pitfall of time spent, I did a heavy effort on this and enjoyed the end result.
This site is hosted both in Heroku and Netlify. To check them, just use the link below. (someday I'll learn github pages, but today, is not this day)
As a reminder, Heroku uses the most recent and stable version of NodeJS, that is on this day, v13. Netlify on other hand, uses a LTS NodeJS v10.
My motivation to do two releases, is because Heroku shutdown the webserver after inactivity of 30 minutes. Netlify in other hand, serves the page from a dedicated CDN, but unfortunately uses an outdated LTS version from NodeJS. (currently LTS is v12). I love Heroku, but the shutdown on the server is just sad. =(
That said, here it is both links:
Heroku version: devmozao-github-app.herokuapp.com
Netlify version: devmozao-github-app.netlify.app
In order to run the project, you must have installed in your local machine:
- node v@ 13.x
- npm v@ 6.x
- yarn v@ 1.22.x
- git clone the repo
- cd into
github-app - run
yarnto install dependencies - run
yarn startto run the webserver development - to see the tests, just run
yarn test
- create-react-app - project boilerplate with zero config
- React - main SPA reactive library
- ReactDOM - React main render library
- React Router DOM - for routes on the project
- Styled Components - for css component library
- Axios - promises based fetch library
- React Extras - for conditional component rendering
- StandardJS - as a JavaScript Linter
- Atomic Design System - as a folder and component and code splitting
MIT License, 2020.
Diogo Fonseca, aka @devMozao