Stock App React

Overview

👨‍💻 In this project I mastered React skills. I used mainly REACT and Material UI, React Router, Redux, Redux/Toolkit, Redux/Persist, Axios Instance and Interceptors, React/Tremor, and Formik/Yup. You can see visual demo of the website below. The objective is to build out this real-like webpage and make it looking as professional as possible..

---

✨ Demo

---

📍You can see the live site from here!

## Project Skeleton 

- MyBlog App (folder)
|
|----readme.md         
SOLUTION
├── public
│     └── index.html
├── src
│    ├── router
│    │       ├── AppRouter.js
│    │       └── PrivateRouter.js
│    ├── components
│    │       ├── card
|    |       |    |----- BrandCards.jsx
|    |       |    |----- FirmCards.jsx
│    │       |   modals
│    │       |      |---- BrandsModal.jsx
│    │       |      |---- FirmsModal.jsx
|    |       |      |---- ProductsModal.jsx
|    |       |      |---- PurchasesMOdal.jsx
|    |       |      |---- SalesModal.jsx
│    │       |---- KpiCard.jsx
│    │       |---- LineChars.jsx
│    │       |---- LoginForm.jsx
│    │       |---- MenuListItem.jsx
│    │       |---- RegisterForm.jsx
│    ├── features
│    │       ├── authSlice.js
│    │       └── stockSlice.js
│    ├── helpers
│    │       └── toastNotify.js
│    ├── pages
│    │       ├── Dashboard.jsx
│    │       ├── Brands.jsx
│    │       ├── Login.jsx
│    │       ├── Firms.jsx
│    │       ├── Home.jsx
│    │       ├── Register.jsx
│    │       └── Products.jsx
│    │       └── Sales.jsx
│    │       └── Purchases.jsx
│    ├── assets
│    │       └── [images]
│    ├── app
│    │    └── store.jsx
│    ├── styles
│    │    └── globalStyle.js
│    ├── hooks
│    │    └── useAuthCalls.jsx
│    │    └── useAxios.jsx
│    │    └── useSortedData.jsx
│    │    └── useStockCalls.jsx
│    ├── App.js
│    ├── index.js
│    └── index.css
├── package.json
└── yarn.lock
```

Purpose of Project;

👨‍💻 The main aim of this project is to improve my REACT Custom Hooks, Redux and Redux/Toolkit Component/JS/git commands (push, pull, commit, add etc.) skills and responsive design abilities.

Objective

🎯

The project covers;

• HTML / Semantic elements

• Material UI - React Toastify

• REACT / Components , Props , Hooks , Router, Redux etc.

• Formik - Yup

• Redux/Persistor

• Axios Instance and Interceptor

• Authentication

At the end of the project, i will be able to;

• improve coding skills within HTML & CSS & JS & REACT.js

• use git commands (push, pull, commit, add etc.) and Github as Version Control System.

---

Used in this project

👉 HTML tags, Comments, CSS styling, REACT.js etc.

---

How to Use the Project

First download a code editor
Second open the files : My Docs
You should open vscode terminal and write "yarn or npm install" to make the project alive
You can use this tutorial : VS Code tutorial

Author

👤 Ali Aksoy

• Twitter: @alifeyza4017
• Github: @AliAksoyy