gusmagnago / knn

Data visualization project to show shipment informations with Redux-toolkit and redux-thunk

Shipment CRUD page

Data visualization project to show shipment informations.

Setup

Install dependencies

Once you've cloned the repository install the required dependencies:

npm install

Run

Development server

To run the project in development mode run:

npm start

To Visit App:

Open localhost:3000 to view it in the browser.

Project structure

The directory structure is the following:

├── public
├── src
│   ├── components
│   │   └──── error
│   │   └──── layout
│   │   └──── loader
│   │   └──── shipment-card
|   |   |   └──── ShipmentOverview.tsx
|   |   └──── card-item
|   |   |   └──── CardItem.tsx
|   |   └──── shipments-list
|   |   |   └──── components
|   |   |   |     └──── action-button
|   |   |   |     └──── pagination
|   |   |   |     └──── table
|   |   |   |     └──── table-row
|   |   |   └──── index.types.ts
|   |   |   └──── ShipmentsList.tsx
│   ├── utils
│   │   └──── api
|   |   |      └──── fetchShipmentsData.ts
|   |   |      └──── shipments.ts
|   |   |      └──── updateShipmentData.ts
│   │   └──── reducers
│   │   └──── store
│   │   └──── types.ts
│   ├── App.tsx
...

General Information

Goal: The goal of this project is to demonstrate:

• React knowledge
• CRUD skills
• Ajax request

Technologies Used

• JavaScript
• React
• Redux-Thunk
• Typescript
• Axios
• CSS template from Creative-tim
• Styles with TailwindCSS

Thank you!