A simple and intuitive web application for managing a product inventory. This frontend serves as a user interface to interact with an Express.js backend and a FastAPI backend, enabling CRUD (Create, Read, Update, Delete) operations on sales items.
- Display Sales: Fetch and display a list of all sales items with price, delivery, and total.
- Add New Sales: Fill out a form to create and add new sales items to the database.
- Update Sales: Edit existing sales items directly from the list.
- Delete Sales: Remove sales items from the database.
- Responsive UI: Clean, responsive design built with Tailwind CSS.
- Form Validation & Error Handling: Ensures input correctness and shows errors for failed API calls.
Follow these instructions to get the project running locally.
Ensure you have the following installed:
- Node.js (LTS version recommended)
- npm or Yarn
- Clone the repository:
git clone https://github.com/Cema2019/sales-frontend.git
cd sales-frontend- Install dependencies:
npm installor
yarnThis frontend application is designed to work with a backend API whether Express.js or FastAPI. Make sure the backend server is running at:
http://localhost:3000
CORS must be enabled on the backend for http://localhost:5173.
To start the development server:
npm run devThe application will open in your browser at:
http://localhost:5173
- React – Library for building user interfaces.
- TypeScript – Strongly typed language built on JavaScript.
- Tailwind CSS – Utility-first CSS framework for rapid UI development.
- Fetch API – For making API requests to the backend.
- Zod - Runtime schema validation used to safely parse API responses and ensure correct data types.
- Add Product: Fill in
Name,Price, andDelivery, then click Add Product. - Edit Product: Click Edit, modify the fields, then click Update Product.
- Delete Product: Click Delete to remove a product.
- Reset Form: Click Reset to cancel editing.
MIT