React Typescript example Project with Axios and Web API

Build a React Typescript and Axios example to consume Web API with Router & React-Bootstrap.

Functions:

• List all characters view
• Display an indicator to know if a character is in favorites list
• Filter characters by name, status or gender
• Detail character’s view
• Display a button to add the character to a favorites list, in case the character is in favorites list it will be removed from favorites list
• 404 Page

Rules Build the frontend using:

• React with Hooks
• Context as state management tool
• react-bootstrap library
• Typescript

Additional JS libraries:

• axios Axios is a simple promise based HTTP client for the browser and node.js. Axios provides a simple to use library in a small package with a very extensible interface.
• react-icons Include popular icons in your React projects easily with react-icons, which utilizes ES6 imports that allows you to include only the icons that your project is using.

This project was bootstrapped with Create React App.

Set port

.env

PORT=8081

Project setup

In the project directory, you can run:

npm install
# or
yarn install

or

Compiles and hot-reloads for development

npm start
# or
yarn start

Open http://localhost:8081 to view it in the browser.

The page will reload if you make edits.