https://github.com/tonystark-19/product-table-react
A simple and fully responsive product table built using React.js. This project allows users to filter products by name and stock availability. It is inspired by the React.dev documentation and helped me understand UI structuring and component-based development.
https://github.com/tonystark-19/product-table-react
css3 react-ui-components reactjs ui-components
Last synced: about 2 months ago
JSON representation
A simple and fully responsive product table built using React.js. This project allows users to filter products by name and stock availability. It is inspired by the React.dev documentation and helped me understand UI structuring and component-based development.
- Host: GitHub
- URL: https://github.com/tonystark-19/product-table-react
- Owner: TonyStark-19
- Created: 2025-03-24T15:58:38.000Z (about 2 months ago)
- Default Branch: main
- Last Pushed: 2025-03-25T15:00:58.000Z (about 2 months ago)
- Last Synced: 2025-03-25T15:45:56.256Z (about 2 months ago)
- Topics: css3, react-ui-components, reactjs, ui-components
- Language: JavaScript
- Homepage: https://product-table-gamma.vercel.app
- Size: 172 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# 🛒 Filterable Product Table (React.js)
A simple and **fully responsive** product table built using **React.js**. This project allows users to filter products by name and stock availability. It is inspired by the [React Docs](https://react.dev/) and helped me understand UI structuring and component-based development.
---
## 📸 Screenshot
---
## 🚀 Live Demo
Check out the live version of the project here: **[Product-table](https://product-table-gamma.vercel.app/)**
---
## 🎯 Features
✅ Search products by name
✅ Filter only in-stock products
✅ Categorized product listing
✅ Clean and interactive UI
✅ Fully responsive design
---
## 🛠Technologies Used
- **React.js**
- **CSS (Flexbox, Grid)**
- **Hooks (useState)**
- **JSX**
---
## 📖 What I Learned
This project helped me understand:
- Component-based development in React
- Props and state management
- Event handling in React
- Filtering data dynamically
- Building a clean and user-friendly UI
---
## 🚧 Future Improvements
🔹 UI enhancements (better styling, animations)
🔹 Add sorting feature
🔹 Improve accessibility
---
## 💻 Setup Instructions
1⃣ Clone the repository:
```bash
git clone https://github.com/yourusername/filterable-product-table.git
```
2⃣ Navigate to the project directory:
```bash
cd filterable-product-table
```
3⃣ Install dependencies:
```bash
npm install
```
4⃣ Run the development server:
```bash
npm start
```
The app will be running on `http://localhost:3000`
---
## 🎯 Contributing
Feel free to fork this repository and open a pull request with improvements! 🚀