jahil-khalfe/refactored-parakeet

About the project

Frontend App.

The core focus of this part of the solution:

• A Speedy implementation of the requirements.
• Get the repo list.
• Display the list of repos in an infinite scroll ( Loads more when scrolling until there is no more data ).
• Add a Single repo page.
• Fetch single repo data to preserve on reload and get the slug from url params.
• There is a search which does dummy search. The orgs endpoint does not support searching through repos for an org.

(back to top)

Technologies and Libraries used

The core libraries are listed here:

• ReactJS
• react-query
• MaterialUI
• Typescript
• CreatReactApp
• Sentry
• ESLint
• Prettier

ESLint and prettier are set up as combined config. Formatting will run as part of linting rules.

(back to top)

Getting Started

Prerequisites

node version set to LTS
yarn package manager

Installation

1. yarn

2. You should have no errors after installation and that is pretty much it for installation.

(back to top)

## Usage

Here will follow steps to run the project.

• To start the application in watch mode

  yarn start

• To lint and format the code

  yarn lint

• To run tests

  yarn test

• To fix linting and formatting

  yarn lint:fix

(back to top)

Implementation

Library Selection

• ReactJS - The required tool for the job.
• React-Query - Easy and straightforward data synchronization.
• Typescript - For some added Type safety to tighten up the data contract across various segments of the app. Also aids in catching bugs that you might have missed.
• Prettier - Formats the code.
• ESLint - Enforce som standards and rules. Basic configuration.
• ESLint - Do not let unwanted things slip through.

Start Command yarn start (Refer to the usage section)

General

Given more time I would Implement the following.

• Add a better Error Page.
• Test all the things that can end should be tested.
• Add storybook here and import ui-kit stories.
• Add custom error handling for Client side and Api errors.
• Add the support for internationalisation react-intl.
• Add some custom test renderers to wrap components with providers.
• Add pre-flight step github action for test, lint etc.
• Depending on production setup I would containerise this application to quickly scale it.
• Mock useQuery and push coverage higher.
• Implement path aliases for module imports.
• Gather coverage and add badges Coveralls etc.
• If there should be more routes, we can lazy load them.
• Add global notification's system for toasts warnings etc.
• Make use of Materia UI theme spacing in more places for standard spacing everywhere and or have ui-kit.
• Any other unclear decisions can be discussed in a follow-up.

(back to top)