React project, using GitHub API to search users and their repos

Click for Demo

First things first! Make sure you create a .env file using the variable from .env.example (base url of GitHub API (https://api.github.com).

Then run npm command to install all dependencies needed and npm start to run the app on your local machine.

npm install


npm start

Technologies and libraries used during app development include the following:

• HTML5
• CSS3
• TypeScript
• ReactTS
• Styled Components
• Prettier
• esLint

App was built using create-react-app with typescript template  

To test out the app, developers must clone the following repository:

git clone https://github.com/seficohen1/github-repo-challenge.git

cd project-folder/

npm install

.
├── public                  # HTML entry point
├── src                     # Source files 
|   ├── components          # App components
│   ├── context             # Managing state with Context
│   ├── helpers             # Helper functions
│   ├── hooks               # Custom hooks
│   ├── interfaces          # Interfaces used in App
│   ├── pages               # Pages (also main components)
│   ├── services            # Connecting to GitHub API
│   ├── UI                  # Defining reusable styled components
|   ├── App.tsx             
|   ├── Index.tsx
|   ├── react-app-env.d.ts 
├── .env.example            # API BASE URL
├── .eslintrc               # esLint configuration file 
├── .prettierrc             # prettier configuration file 
├── tsconfig.json           # TypeScript compiler configuration 
└── README.md

• Understanding the fundamentals of TypeScript, what is it used for what problem it solves.  Sources I used to grasp my head around TypeScript concepts:     -  Ninja Net TypeScript tutorial - Free.     -  Codecademy Learn TypeScript Course - Free, the free version of the course does the job just fine with exercise and explanations     -  FrontendMasters - TypeScript Fundamentals - Paid course, I'm half way there, but learnt a lot from it.

• Understanding how to use TypeScript around React environment, handling events and functions, managing state with context and reducer and understanding which react elements are passed as props. Sources I used a part of hours of googling:     - Fernando Herrera's React + TypeScript tutorial - Free and very much informative. Note: videos are  in Spanish

• Testing in TypeScript
• Scaling to a bigger projects using state management libraries

• Sefi Cohen