Stock App

Live Link: https://stock-app-fay.vercel.app/

🚀 Quick Start & Demo Login

Demo Credentials (Click to Auto-fill):

Admin Account:

• Email: admin@stockapp.com
• Password: admin123

Demo Account:

• Email: demo@stockapp.com
• Password: demo123

How to Test:

1. Login Page: Click on any credential above to auto-fill the form
2. Register Page: Create new accounts (fully functional)
3. Dashboard: View KPI cards, charts, and navigation
4. All Features: Products, Brands, Firms, Categories, Purchases, Sales

Features:

• ✅ Mock Backend: Works without external dependencies
• ✅ Responsive Design: Mobile-friendly interface
• ✅ Modern UI: Material-UI components
• ✅ Real-time Data: Mock data with realistic content
• ✅ Authentication: Login/Register with validation
• ✅ CRUD Operations: Create, Read, Update, Delete
• ✅ Charts & Analytics: KPI cards with Tremor
• ✅ Image Support: Product images with placeholders

Description

Welcome to the Stock Application! This powerful platform provides users with the ability to manage their stocks efficiently. Whether you are a business owner, store manager, or simply want to keep track of your personal inventory, Stock App has got you covered.

Features

• User Authentication: Seamlessly create an account or log in to access the full functionality of the application.
• Dashboard: Get an overview of your stock-related key performance indicators (KPIs) at a glance.
• Firm and Brand Management: Easily add, edit, and delete firms and brands to organize your inventory effectively
• Product Tracking: Keep track of your products, including purchases and sales, to maintain accurate stock levels..
• Interactive Charts: Visualize your stock data with interactive charts for better insights and decision-making.
• Responsive Design: Enjoy a smooth and intuitive user experience across various devices, including desktops, tablets, and mobile phones

Project Skeleton

.
├── README.md
├── package-lock.json
├── package.json
├── postcss.config.js
├── public
│   ├── favicon.ico
│   ├── index.html
│   ├── logo192.png
│   ├── logo512.png
│   ├── manifest.json
│   └── robots.txt
├── src
│   ├── App.js
│   ├── app
│   │   └── store.jsx
│   ├── assets
│   │   ├── loading.gif
│   │   ├── stockApp.gif
│   │   ├── stockApp1.gif
│   │   └── result.svg
│   ├── components
│   │   ├── BrandCard.jsx
│   │   ├── Charts.jsx
│   │   ├── FirmCard.jsx
│   │   ├── KpiCards.jsx
│   │   ├── LoginForm.jsx
│   │   ├── MenuListItems.jsx
│   │   ├── RegisterForm.jsx
│   │   └── modals
│   │       ├── BrandModal.jsx
│   │       ├── FirmModal.jsx
│   │       ├── ProductModal.jsx
│   │       ├── PurchaseModal.jsx
│   │       └── SaleModal.jsx
│   ├── features
│   │   ├── authSlice.jsx
│   │   └── stockSlice.jsx
│   ├── helper
│   │   └── ToastNotify.js
│   ├── hooks
│   │   ├── useAuthCall.jsx
│   │   ├── useAxios.jsx
│   │   └── useStockCall.jsx
│   ├── index.css
│   ├── index.js
│   ├── pages
│   │   ├── Brands.jsx
│   │   ├── Dashboard.jsx
│   │   ├── Firms.jsx
│   │   ├── Home.jsx
│   │   ├── Login.jsx
│   │   ├── Products.jsx
│   │   ├── Purchases.jsx
│   │   ├── Register.jsx
│   │   └── Sales.jsx
│   ├── router
│   │   ├── AppRouter.jsx
│   │   └── PrivateRouter.jsx
│   └── styles
│       └── globalStyle.jsx
└── tailwind.config.js

Expected Outcomes

Technologies and Libraries

• React.js: A powerful JavaScript library for building interactive user interfaces.

• Redux: A predictable state management library for managing complex application states.

• Axios: A popular HTTP client for making API requests and handling responses.

• Tailwind CSS: A highly customizable CSS framework for creating stunning designs with minimal effort.

• React Router: A popular routing library for React applications, allowing for dynamic and intuitive navigation between different pages within the application.

• Formik and Yup: Powerful JavaScript libraries used for form management and validation. Yup is used to define validation schemas for form data, specifying the expected shape and constraints. On the other hand, Formik simplifies form state management, submission handling, and validation. Together, they ensure robust form validation and streamlined form handling for user input data.

• Custom Hooks: Custom hooks have been implemented to encapsulate reusable logic and improve code organization and reusability. These custom hooks include:

  • useAuthCall: A custom hook that handles authentication-related API calls and state management.
  • useAxios: A custom hook that simplifies making HTTP requests using Axios and manages the loading and error states.
  • useStockCall: A custom hook that encapsulates the logic for making stock-related API calls and managing the stock-related states.

Getting Started

To run the application on your local machine, follow these steps:

1. Clone the project to your computer:

   git clone https://github.com/iamfatihay/Stock-app.git
   

2. Open your terminal and navigate to the project directory.

   cd STOCK-APP
   

3. Install the dependencies:

   npm install
   

4. Start both frontend and backend:

   npm run dev
   

   Or start them separately:

   npm run backend  # Starts JSON Server on port 8000
   npm start        # Starts React app on port 3000
   

5. Open your web browser and visit http://localhost:3000 to explore the Stock Application.

🚀 Quick Start & Demo Login

Demo Credentials (Ready to Use!)

Admin Account:

• Email: admin@stockapp.com
• Password: admin123

Demo Account:

• Email: demo@stockapp.com
• Password: demo123

Or create a new account using the Register page.

How to Test the App:

1. Clone and Install:

   git clone https://github.com/iamfatihay/Stock-app.git
   cd Stock-app
   npm install

2. Start the Application:

   npm run dev

   This starts both frontend (port 3000) and backend (port 8000)

3. Login and Explore:

   • Visit: http://localhost:3000
   • Use the demo credentials above
   • Explore all features: Dashboard, Products, Brands, Firms, Purchases, Sales

Demo Credentials

Contribution

Welcome contributions to enhance the Stock Application! If you find any bugs or have ideas for improvements, please open an issue or submit a pull request. I appreciate your valuable input!

License

The Stock Application is licensed under the MIT License. Feel free to use, modify, and distribute the code as per the terms of the license.