https://github.com/codeace18/productn-variant-manager
https://github.com/codeace18/productn-variant-manager
Last synced: about 1 year ago
JSON representation
- Host: GitHub
- URL: https://github.com/codeace18/productn-variant-manager
- Owner: codeAce18
- Created: 2025-05-12T10:10:50.000Z (about 1 year ago)
- Default Branch: main
- Last Pushed: 2025-05-12T11:04:36.000Z (about 1 year ago)
- Last Synced: 2025-05-12T11:45:12.317Z (about 1 year ago)
- Language: TypeScript
- Homepage: https://productn-variant-manager.vercel.app
- Size: 72.3 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# 🛍️ Shopify-style Product Manager
A clean, responsive product management dashboard inspired by Shopify’s admin interface. Built with React, TypeScript, Vite, React Query, and styled using Shadcn UI (Tailwind CSS).
## 🚀 Tech Stack
- **React** + **TypeScript**
- **Vite** (for fast builds and HMR)
- **React Query** (for server state management)
- **Shadcn UI** (Tailwind + Radix UI components)
- **Zustand** (for lightweight state management) — _if used_
- **ESLint** + **Prettier** (code linting and formatting)
- **Vitest** (for testing) — _optional_
## 📦 Features
- 📃 Product listing with name, description, price, and category
- ➕ Add new products via modal form
- ✏️ Edit existing products inline
- 🗑️ Delete products
- 🔄 Import demo products from API (bonus feature)
- 🎨 Shopify-inspired UI using Shadcn UI components
- ⚡ Fast and responsive with React Query and Vite
- 📱 Mobile-friendly design
## 🛠️ Getting Started
### 1. Clone the repository
```bash
git clone https://github.com/codeAce18/Product-Variant-Manager.git
cd Product-Variant-Manager
```
### 2. Install dependencies
```bash
npm install
```
### 3. Start the development server
```bash
npm run dev
```
### 4. Build for production
```bash
npm run build
```
---
## 🌐 Live Demo
👉 [View Live on Vercel](https://productn-variant-manager.vercel.app/)
---
## 🧠 Folder Structure
```bash
src/
├── components/ # Reusable UI components
├── pages/ # Main app routes/views
├── hooks/ # Custom React hooks
├── lib/ # API and helper functions
├── styles/ # Global styling
├── types/ # TypeScript interfaces and types
└── main.tsx # App entry
```
---
## ✅ Evaluation Checklist
* [x] Code quality and architecture
* [x] Responsive and polished UI
* [x] Effective use of React Query & Shadcn UI
* [x] Clean, reusable components
* [x] Bonus: Extra features and external API integration
* [x] Public GitHub repo with README, screenshots, live deployed link
## 👨💻 Author
**Taiwo Joel**
[GitHub](https://github.com/codeAce18)
---
## 📄 License
```
MIT License – free to use, modify, and distribute.