This is a lighter version of Github.

Notes from Author

The code was made in 3 days on go-horse mode, so flaw in archtecture aspects and automated tests, so take this into consideration

Challenge

A description of what is expected and what I marked as I could possibly do.

Requisites

• Connect to Github API;

• List all public repositories from an user (first version: reactjs user); -> Searched user

• List all the last 20 commits of repo after being clicked; -> Searched repo

• Commits list should have a search field;

Bonus Tasks

• Use some modern css solution (CSS Modules, Styled-components, etc); -> Styled-components

• Endless scrolling for the commits page; -> See Issues

• Make it possible to change the order the repositories are shown (By stars, name, etc);

• Component Library (Storybook.js, Styleguidist, etc);

• Server side rendering; -> NextJS

Solution

• Use reactjs, you can start with a simple create-react-app structure and work from there; -> create-next-app

• Use some state managing solution; -> Redux / Redux-thunk

• Use ES6+ features and write down in the readme why you used and for what, for at least 2 of them; -> It will be discussed in the end of README

• Write unit tests and any other test you may find helpful or important to have; -> Dont have time

• Keep performance and corner cases in mind;

• Be creative and show us what you got;

Personal Bonus Tasks

• List events;

• Search user repo;

• Search repo;

• Search user;

• Organize code, extracting solid components, APIs and entities/models

Stack

It will be used:

• CRA: The most common React boilerplate

• ReactJS: A modern web development framework

• Redux: For state management

• Github API: The API that the project is connected

• Material-UI: The most popular React UI framework - Removed, changed theming functions to styled-components

• Styled-Components: Styles CSS as a component

• TypeScript: Typed superset of JavaScript - Removed, already added NextJS for SSR (hard work)

• Jest: A JavaScript testing framework

• Storybook: Its a components exposed book

This is the main stack of the project, it will be based on scalability (not as a simple challenge!)

Available Scripts

In the project directory, you can run:

yarn dev

Runs the app in the development mode.
Open http://localhost:3000 to view it in the browser.

The page will reload if you make edits.
You will also see any lint errors in the console.

yarn build

Builds the app for production to the build folder.
It correctly bundles React in production mode and optimizes the build for the best performance.

The build is minified and the filenames include the hashes.
Your app is ready to be deployed!