https://github.com/thomas465xd/frontend-product-management
The frontend for a product management app made using React, TypeScript, Valibot, and more that uses my own REST API made using Express, Node and TypeScript
https://github.com/thomas465xd/frontend-product-management
api react react-router rest-api tailwind tailwindcss tsx types typescript vercel vite
Last synced: 3 months ago
JSON representation
The frontend for a product management app made using React, TypeScript, Valibot, and more that uses my own REST API made using Express, Node and TypeScript
- Host: GitHub
- URL: https://github.com/thomas465xd/frontend-product-management
- Owner: Thomas465xd
- License: mit
- Created: 2024-10-28T01:27:22.000Z (over 1 year ago)
- Default Branch: master
- Last Pushed: 2024-10-31T00:06:30.000Z (over 1 year ago)
- Last Synced: 2025-05-30T18:21:20.014Z (about 1 year ago)
- Topics: api, react, react-router, rest-api, tailwind, tailwindcss, tsx, types, typescript, vercel, vite
- Language: TypeScript
- Homepage: https://frontend-product-management-six.vercel.app
- Size: 94.7 KB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Product Management Frontend
This is the frontend of a full-stack product management application. It is built with **React** and styled using **Tailwind CSS** to provide an attractive, intuitive user interface. The app allows users to view, add, edit, delete, and manage product availability by connecting to a REST API backend deployed in another domain.
## Table of Contents
- [Features](#features)
- [Tech Stack](#tech-stack)
- [Installation](#installation)
- [Deployment](#deployment)
- [Usage](#usage)
- [Future Enhancements](#future-enhancements)
- [License](#license)
## Features
- **User-Friendly Interface**: Built with **React** and **Tailwind CSS** for a clean and responsive design.
- **CRUD Functionality**: Full Create, Read, Update, Delete (CRUD) functionality for managing products visually.
- **API Integration**: Communicates with a REST API backend to handle product data efficiently.
## Tech Stack
- **React** - JavaScript library for building user interfaces.
- **Tailwind CSS** - Utility-first CSS framework for styling.
- **Vercel** - Platform used for deploying the frontend.
## Installation
1. **Clone the repository:**
```bash
git clone https://github.com/your-username/product-management-frontend.git
cd product-management-frontend
2. **Install Dependencies:**
```bash
npm install
```
3. **Environment Variables:** Create a .env file in the root directory and add the following:
```plaintext
VITE_API_URL=https://rest-api-product-management.onrender.com
```
4. **Run the App:**
```bash
npm run dev
```
The app will be available at `http://localhost:5173` by default.
## Deployment
The frontend is deployed on Vercel for production, ensuring scalability and high availability.
## Usage
- **Product Management:** Users can create, view, edit, and delete products.
- **Availability Toggle:** A patch endpoint allows toggling product availability, making it easy to manage stock visibility.
## Future Enhancements
- **User Authentication:** Add user accounts to secure product management.
- **Enhanced Filtering:** Add filters and search functionality to streamline product views.
- **Improved UX/UI:** Expand styles and add animations for a smoother user experience.
## License
This project is licensed under the MIT License - see the [LICENSE](LICENSE) file for details.
---
**Note:** For backend setup and API documentation, refer to the [REST API repository](https://github.com/Thomas465xd/rest_api-product-management).
---
**Made with ♥️ Thomas Schrödinger**