Mini Project: GitHub Jobs Application

Date: 29 - Aug - 2020

Functions

• Display available Jobs from Github Jobs

Screenshot

Tech-Stack

• React
• react-bootstrap: UI
• axios: fetch API
• useReducer : store state
• react-markdown : converting markdown on URL to string

API Used

https://jobs.github.com/api

Plan Of Action

• Initial Project
• Setup react, axios, react-bootstrap
• create useFetchJob function to Fetch API
• create Job component
• create Pagination
• create Search
• Filter Job with full-time

After this project

I have improve my knowledge about

I have understand about

• use useReducer hooks to store state
• how to fix CORS error with https://cors-anywhere.herokuapp.com/[your_url]
• use cancelToken of axios to cancel get request when you typing every character.
• use react-bootstrap for style component without css file
• how to create pagination with react-bootstrap
• handle variable hasNextPage when fetchData to add Pagination nextPage
• create search form with bootstrap
• handle Params Change

Next Steps:

Directory Structure

.
├── .gitignore
├── package.json
├── README.md
├── public
└── src
    ├── components
        ├── Job
        ├── Pagination
        ├── SearchForm
        └── UI
            └── Spinner
    ├── hooks
        └── useFetchJob.js
    ├── App.js
    ├── App.css
    ├── index.css
    └── index.js

Set up

Use the cmd line to clone repo to your computer

git clone [github_repo_url]

Use the cmd line to install dependencies.

npm install

Run in cmd for start the dependencies server

npm start