React project, using GitHub API to search users and their repos
The following project is a small app that allows a user to make use of GitHub API and search for Github members and their repositories. This app was developed as part of an interview process in which I have received this tech challenge. The main requirement of the project was for it to be written in TypeScript and, on a personal note I can share that for me, this was the first time tackling TypeScript (ohh first starts, don’t we love them?), so a part of this README being informative about the “dull’ info, it is more of a documented post regarding some of the key concept I have learnt in the process.
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