DummyJSON Dashboard

A responsive frontend dashboard built for a college assignment using pure HTML5, CSS3 and JavaScript (ES6) — no frameworks, no build tools. It fetches live data (users, products, carts and quotes) from the free DummyJSON REST API using the Fetch API with async/await.

---

✨ Features

• Sticky responsive navbar on every page with the active link highlighted
• Mobile hamburger menu that animates into a close (X) icon
• Home page with a hero section and dashboard cards that navigate to each page
• Users — avatar, name, email, phone, gender and company · search by name · filter by gender · sort A–Z / Z–A
• Products — image, title, price, rating, brand and category · search by name · filter by category · sort by price
• Carts — user ID, total products, total quantity, total price and discounted total · search by user ID · sort by price
• Quotes — quote and author · search by author · sort author A–Z / Z–A
• Loading spinner while data is fetched
• Friendly "no results" message when a search/filter matches nothing
• Error handling with a Try Again button when an API request fails
• Fully responsive, mobile-first layout — cards automatically adapt from 1 to 4 columns, and search/filter controls stack on phones
• Smooth scrolling, hover effects, shadows and rounded corners

🛠️ Tech Stack

Technology	Purpose
HTML5	Semantic page structure
CSS3	Styling with Flexbox, CSS Grid and media queries
JavaScript (ES6)	Fetch API (async/await), DOM manipulation
DummyJSON API	Free mock REST API for the data

📁 Project Structure

DummyJSON-Dashboard/
│
├── index.html          # Home page (hero + dashboard cards)
├── users.html          # Users page
├── products.html       # Products page
├── carts.html          # Carts page
├── quotes.html         # Quotes page
│
├── css/
│   ├── style.css       # Global styles: variables, buttons, hero, states
│   ├── navbar.css      # Sticky responsive navbar
│   ├── footer.css      # Footer
│   ├── cards.css       # Card grid + user/product/cart/quote cards
│   └── responsive.css  # Media queries (mobile-first)
│
├── js/
│   ├── index.js        # Home page logic
│   ├── users.js        # Users page logic
│   ├── products.js     # Products page logic
│   ├── carts.js        # Carts page logic
│   └── quotes.js       # Quotes page logic
│
├── images/
│   └── favicon.svg
│
├── netlify.toml        # Netlify static-site config
├── README.md
└── .gitignore

Note: because this is a plain static site (no build step), the navbar and footer markup are identical across all five pages. To edit them, change one page and copy the updated block to the others.

🗂️ Pages Overview

Page	URL	Fetches from	Controls
Home	index.html	—	—
Users	users.html	https://dummyjson.com/users?limit=0	Search · Gender filter · Sort A–Z / Z–A
Products	products.html	https://dummyjson.com/products?limit=0	Search · Category filter · Sort by price
Carts	carts.html	https://dummyjson.com/carts?limit=0	Search by user ID · Sort by price
Quotes	quotes.html	https://dummyjson.com/quotes?limit=0	Search by author · Sort author A–Z / Z–A

The ?limit=0 query returns all records from DummyJSON so searching, filtering and sorting can be done entirely in the browser.

🚀 Getting Started

Option 1 — Open directly

Just double-click index.html. All pages and scripts load from relative paths, so no server is required.

Option 2 — Local development server (recommended)

# from the project folder
python -m http.server 8000

Then open http://localhost:8000.

🌐 Deploying to Netlify

1. Push this repository to GitHub (or GitLab / Bitbucket).
2. Go to app.netlify.com → Add new site → Import an existing project.
3. Select the repository.
4. Netlify reads netlify.toml, which sets the publish directory to . — no build command needed.
5. Click Deploy site. Your live URL (e.g. https://your-site.netlify.app) is ready in under a minute.

🧠 Learning Outcomes

• Making HTTP requests with the Fetch API and async/await
• Handling loading, empty and error states gracefully
• Filtering, searching and sorting arrays with ES6 methods (filter, sort, map, Set)
• Building a mobile-first responsive layout with CSS Grid, Flexbox and media queries
• Keeping HTML, CSS and JavaScript in separate, well-organised files

📄 License

This project was created for educational purposes. Data is provided by DummyJSON.