Productify – Frontend

Productify is a product management interface built with React and Vite, providing a clean and efficient UI for managing store products.
It supports filtering, adding, editing, and removing products, with responsive design and professional data handling.

---

Features

• Dynamic Filtering – Search by name, filter by product type, or by date range (synced with query string).
• Full CRUD Operations – Create, Read, Update, and Delete products with form validation.
• API Communication – All actions interact with the backend via Axios requests.
• Responsive UI – Designed with SCSS for flexibility and readability.

---

Tech Stack

• React 19
• Vite
• SCSS
• React Router DOM
• React Icons
• MUI (for selected UI components)
• Axios for API requests
• Day.js for date handling

---

Installation & Setup

1. Extract the project folder from the provided ZIP.
2. Open a terminal inside the extracted folder.
3. Install dependencies:

   npm install

4. Run the development server:

   npm run dev

   The app will be available at http://localhost:5173.

---

Project Structure

src/
 ├── assets/          # Static assets
 │   ├── favicon/     # Favicons
 │   ├── font/        # Fonts
 │   └── styles/      # SCSS files and variables
 ├── cmps/            # Reusable components
 ├── customHooks/     # Reusable hooks (e.g., useForm)
 ├── pages/           # Page-level components
 ├── services/        # API and utility services
 ├── App.jsx          # Root component
 └── main.jsx         # Application entry point

---

Filtering Logic

• Search term – Matches product name.
• Type filter – vegetable, fruit, or field.
• Date range – Filters products by marketingDate.
• Query string sync – Filter state is stored in the URL for easy sharing and persistence.

---

Extra Enhancements

• Advanced filter with multiple criteria.
• Clear separation of UI and logic for maintainability.
• Consistent error handling between frontend and backend.

---