Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/karamanburak/smart-stock
📦 This comprehensive reacts project aims to create a stock store application. The user can register to the store, log in, add the desired product to their inventory, buy or sell it, and keep track of the most current status of it instantly from the dashboard.
https://github.com/karamanburak/smart-stock
axios-instance formik-yup mui react-redux redux-persist toastify
Last synced: 2 days ago
JSON representation
📦 This comprehensive reacts project aims to create a stock store application. The user can register to the store, log in, add the desired product to their inventory, buy or sell it, and keep track of the most current status of it instantly from the dashboard.
- Host: GitHub
- URL: https://github.com/karamanburak/smart-stock
- Owner: karamanburak
- License: mit
- Created: 2024-04-14T12:57:45.000Z (7 months ago)
- Default Branch: main
- Last Pushed: 2024-05-01T19:26:46.000Z (7 months ago)
- Last Synced: 2024-11-16T21:14:04.455Z (2 days ago)
- Topics: axios-instance, formik-yup, mui, react-redux, redux-persist, toastify
- Language: JavaScript
- Homepage: https://smartstock-management.vercel.app/
- Size: 4.09 MB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# stock-management-app
[SmartStock Live](https://smartstock-management.vercel.app/)
## Description
📦 This comprehensive reacts project aims to create a stock store application. The user can register to the store, log in, add the desired product to their inventory, buy or sell it, and keep track of the most current status of it instantly from the dashboard. The user can choose to use the application in dark mode or light mode.
## Project Skeleton
```
- SmartStock Management App (folder)
|
|
SOLUTION
├── public
| ├── assets
├── src
| ├── apiCall
| │ └── apiCall.js
| ├── app
| │ └── store.jsx
| ├── assets
| ├── components
| ├── app
| │ └── store.jsx
| ├── assets
| │ └── [images]
| ├── components
| │ ├── Cards
| │ │ ├── BrandCard.jsx
| │ │ └── FirmCard.jsx
| │ ├── Commons
| │ │ ├── AuthHeader.jsx
| │ │ ├── AuthImage.jsx
| │ │ ├── DataTable.jsx
| │ │ ├── MyButton.jsx
| │ │ ├── MyTextfield.jsx
| │ │ ├── PageHeader.jsx
| │ │ ├── SelectControl.jsx
| │ │ └── StockModal.jsx
| │ ├── Dashboard
| │ │ ├── Charts.jsx
| │ │ └── KpiCards.jsx
| │ ├── Forms
| │ │ ├── BrandForm.jsx
| │ │ ├── FirmForm.jsx
| │ │ ├── LoginForm.jsx
| │ │ ├── ProductForm.jsx
| │ │ ├── PurchaseForm.jsx
| │ │ ├── RegisterForm.jsx
| │ │ └── SaleForm.jsx
| │ ├── Modals
| │ │ ├── BrandModal.jsx
| │ │ ├── FirmModal.jsx
| │ │ ├── ProductModal.jsx
| │ │ ├── PurchaseModal.jsx
| │ │ └── SaleModal.jsx
| │ ├── Navigatons
| │ │ ├── MenuListItems.jsx
| │ │ └── WeatherCard.jsx
| │ ├── Start
| │ │ ├── Footer.jsx
| │ │ └── StartNavbar.jsx
| │ ├── Tables
| │ │ ├── ProductTable.jsx
| │ │ ├── PurchaseTable.jsx
| │ │ └── SaleTable.jsx
| ├── features
| │ ├── authSlice.jsx
| │ └── stockSlice.jsx
| ├── helper
| │ ├── FormFields.js
| │ └── ToastNotify.jsj
| ├── hooks
| │ ├── useAuthCall.jsx
| │ ├── useAxios.jsx
| │ └── useStockCalls.jsx
| ├── pages
| │ ├── About.jsx
| │ ├── Brands.jsx
| │ ├── Dashboard.jsx
| │ ├── Firms.jsx
| │ ├── Home.jsx
| │ ├── Imprint.jsx
| │ ├── Login.jsx
| │ ├── Products.jsx
| │ ├── Purchases.jsx
| │ ├── Register.jsx
| │ ├── Sales.jsx
| │ └── StartPage.jsx
| ├── router
| | ├── AppRouter.jsx
| | └── PrivateRouter.jsx
| ├── styles
| │ ├── globalStyle.js
| | └── theme.js
| ├── App.jsx
| ├── frontend.env
| ├── index.css
| └── main.jsx
├── .gitignore
├── index.html
├── LICENSE
├── package.json
├── pnpm-lock-yaml
├── postcss.config.js
├── README.md
├── tailwind.config.js
├── vercel.json
└── vite.config.js
```
## Outcome
### Installed Packages
- MUI and MUI icons
- axios
- redux/redux toolkit
- react-toastify
- react-router-dom
- mui x data grid
# Redux Persist
```
import { createStore } from 'redux';
import { persistReducer } from 'redux-persist';
import storage from 'redux-persist/lib/storage'; // defaults to localStorage
for web
import rootReducer from './reducers';
const persistConfig = {
key: 'root',
storage,
};
const persistedReducer = persistReducer(persistConfig, rootReducer);
const store = createStore(persistedReducer);
```
1. Use the `persistStore` function to create `persistor`;
```
import { persistStore } from 'redux-persist';
const persistor = persistStore(store);
```
```jsx
import { PersistGate } from "redux-persist/integration/react";
import store, { persistor } from "./app/store";
// ... normal setup, create store and persistor, import components etc.
const App = () => {
return (
);
};
```
## Router Structure
```jsx
} />
} />
} />
} />
} />
}>
}>
} />
} />
} />
} />
} />
} />
```
## Axios Instance ve Interceptors
```
import axios from 'axios';
const instance = axios.create({
baseURL: '',
headers: {'Authorization': `Token ${token}`}
});
```
## Postman Documentation
[View Postman Documentation](https://documenter.getpostman.com/view/32987022/2sA3BuXVAD)