Product Catalog Application with JSON Server

📋 Coder Information

Name: Antonio Carlos Santiago Rodriguez
Clan: Macondo
Email: santiagor.acarlos@gmail.com
Training: JavaScript Module 3 - Week 4

🚀 Project Description

A modern, advanced product catalog management application demonstrating JavaScript fundamentals: CRUD operations, DOM manipulation, event handling, HTTP requests, persistent storage, and a professional UI/UX. The system allows you to manage products with search, modals, confirmation dialogs, and real-time feedback, powered by a JSON Server backend.

🛠️ Technologies Used

HTML5: Semantic, accessible structure
CSS3: Modern styling, Flexbox, Grid, and animations
JavaScript (Vanilla): ES6+ features, async/await
JSON Server: RESTful API backend for data persistence
Fetch API: HTTP request handling
DOM API: Dynamic content and event management

📁 Project Structure

product-catalog-app/
├── index.html                      # Main HTML structure
├── db.json                         # JSON Server database file
├── assets/
│   └── styles/
│       └── styles.css              # Complete CSS styling
├── src/
│   └── dom_manipulation.js         # Core JavaScript application
└── README.md                       # Project documentation

🎯 Implemented Features

✅ CRUD Operations - Create, read, update, and delete products
✅ Server-First Approach - All changes sync with JSON Server
✅ Search Functionality - Real-time product search
✅ Session Action Counter - Tracks create/edit/delete actions per session
✅ Persistent Storage - LocalStorage and SessionStorage integration
✅ Responsive Design - Mobile and desktop compatible
✅ Modal System - Create/edit and confirmation modals
✅ Dropdown Menus - Product action menus
✅ Success/Error Messages - User feedback system
✅ Accessibility - Focus states and semantic HTML
✅ Smooth Animations - CSS transitions and transforms

🎮 How to Use

Prerequisites

Install Node.js: Download here
Install JSON Server:
```
npm install -g json-server
```

Getting Started

Start JSON Server:
```
json-server --watch db.json --port 3000
```
Server runs at: http://localhost:3000
Open the application:
- Open index.html directly in your browser, or
- Serve with Python for CORS:
```
python -m http.server 8000
```
  Then visit http://localhost:8000
Interact with the app:
- Add, edit, delete, and search products
- All changes are saved and reflected in the UI
- Session action counter tracks your actions

🌐 API Endpoints

GET /products - Retrieve all products
GET /products/:id - Retrieve a specific product
POST /products - Create a new product
PUT /products/:id - Update a product
DELETE /products/:id - Delete a product

🎨 UI/UX Features

Modern Design - Clean, professional interface
Responsive Layout - Works on mobile and desktop
Visual Feedback - Success/error messages, hover effects
Accessibility - Focus states, keyboard navigation
Interactive Elements - Modals, dropdowns, confirmation dialogs
Loading/Error States - User-friendly error handling

📝 Code Quality

JSDoc Documentation - Function documentation
ES6+ Features - Modern JavaScript syntax
Modular Design - Well-organized code
Error Handling - Validation and HTTP error management
Performance Optimized - Efficient DOM and async operations

🛠️ Development Notes

Server-First Pattern: All CRUD operations are performed on the server first, then local data/UI is updated.
Session Storage: Tracks user actions and search state for the session.
Local Storage: Persists product data for offline/refresh scenarios.
Console Logging: Key actions and errors are logged for debugging.

by Antonio Carlos Santiago Rodriguez

TonyS-dev/products-manager-with-JSONServer