As a senior software developer create a complete, client-side E-commerce web

application. The application must be built using only HTML, modern CSS, and vanilla
JavaScript (utilizing ES6 modules). All backend functionality, including
authentication, data storage, and retrieval, must be handled by the Firebase v9
modular SDK.
The project will consist of two separate, single-page HTML files: one for the
customer-facing storefront (user.html) and one for the admin panel (admin.html).
Crucially, in the JavaScript code for both files, you must use a placeholder for
the firebaseConfig object. This allows for easy configuration with personal
credentials later. It should be structured as follows:
code
JavaScript
const firebaseConfig = {
apiKey: "YOUR_API_KEY",
authDomain: "YOUR_AUTH_DOMAIN",
databaseURL: "YOUR_DATABASE_URL",
projectId: "YOUR_PROJECT_ID",
storageBucket: "YOUR_STORAGE_BUCKET",
messagingSenderId: "YOUR_MESSAGING_SENDER_ID",
appId: "YOUR_APP_ID"
};
Part 1: The User Storefront (user.html)
This is the public-facing e-commerce website designed for customers.
1. Layout & Modern Styling:
Mobile-First & Responsive: The design must be fully responsive.
Fixed Headers/Footers: Implement a fixed top header containing the logo
(ShoppingApp) and a search icon. A fixed bottom navigation bar is essential for
core mobile navigation.
Bottom Navigation: The bottom bar should contain links for "Home," "Wishlist,"
"Cart," and a "Menu" button. The active link must be visually highlighted.
Modern CSS:
Use CSS variables (:root) for a consistent theme (colors, fonts, shadows, etc.).
Import and use the 'Poppins' font from Google Fonts.
Integrate Font Awesome for all icons.
SPA Navigation: The application must function as a Single Page Application.
Implement client-side routing using URL hash changes (e.g., #home, #cart, #search).
Only one page section should be visible at a time based on the active hash.
2. Authentication & User State:
Auth Modal: Create a single modal for both user Login and Registration using
Firebase Email/Password Authentication. Users should be able to toggle between the
login and register forms within this modal. Authentication errors from Firebase
must be displayed to the user.
UI State Changes: The UI must dynamically change based on the user's authentication
state.
Logged-in users see "Profile," "My Orders," and "Logout" links in the menu. A green
dot (#login-status-indicator) should appear in the top header.
Guest users see a "Login" link.
Local Storage to Firebase Sync: If a guest user adds items to a local cart or
wishlist (functionality to be implemented for logged-out users, though adding to
cart should primarily prompt login), upon logging in, these items must be
seamlessly merged into their Firebase user profile. After the sync, the local
storage should be cleared.
3. Pages & Functionality:
Home Page (#home):
Automated Image Slider: At the top, feature an image slider that automatically
transitions every 5 seconds. It must fetch image URLs from the /sliderImages node
in Firebase. It requires previous/next navigation buttons.
Fallback Slider: If no images are found in Firebase, the slider should display a
styled fallback slide with a gradient and the application's name.
Category Bubbles: Below the slider, display a horizontally scrolling list of
category filters. The categories should be dynamically generated from the category
field of all products in the database, with an "All" option included. The active
filter must have a distinct style.
Product Grid: Display all products in a responsive grid. This grid must update when
a category bubble is clicked to show only relevant products.
Product Display:
Product Cards: Each product should be displayed in a card containing its image,
name, price, an "Add to Cart" button, and an "Add to Wishlist" button (icon-based).
Product Detail Modal: Clicking anywhere on a product card (except the action
buttons) must open a modal (#product-detail-modal) showing a larger image, title,
price, and a full description. This modal should also have "Add to Cart" and "Add
to Wishlist" buttons. It must be closable.
Search Page (#search):
The search icon in the header should navigate to this page.
It should contain a single search input field. As the user types, the product grid
on this page must filter and display matching products in real-time.
Cart (#cart):
Users must be logged in to add items to their cart. If a guest tries, show the
login modal.
The cart page must list all items, showing their image, name, and total price per
item.
Implement quantity controls (+/- buttons) for each item to increase or decrease its
quantity. Updating the quantity to zero should remove the item from the cart.
Display the total price for the entire cart.
Include a "Proceed to Checkout" button.
Wishlist (#wishlist):
This page should list all items the user has added to their wishlist.
Each item must have a "Remove" button and a "Move to Cart" button, which transfers
the item to the cart and removes it from the wishlist.
Badges: The Cart and Wishlist icons in the bottom navigation must display a badge
with a live count of the items they contain.
Checkout & Orders:
Shipping Modal: Clicking "Proceed to Checkout" opens a modal asking for the user's
Full Name and Shipping Address.
Order Creation: Submitting this form must create a new entry in the Firebase
/orders/{userId}/{orderId} node. The order data should include all cart items,
total amount, shipping details, a timestamp, and a default status of 'Pending'.
After placing an order, the user's cart in Firebase must be cleared, and they
should be redirected to the #orders page.
My Orders (#orders): This page must display a list of the logged-in user's past
orders, showing the Order ID, date, total amount, and current status.
Menu Modal & Static Pages:
The "Menu" button on the bottom nav opens a full-screen modal (#menu-modal).
This menu contains navigation links that change based on auth state.
Include links to static pages: Profile (#profile) which shows the user's email,
About Us (#about), and Contact Us (#contact).
The Contact Us page should have a functional form (Name, Email, Message).
Submitting this form should save the message to the /messages node in Firebase for
admin review.
Part 2: The Admin Panel (admin.html)
This is a secure, private dashboard for managing the store.
1. Layout & Styling:
Admin Dashboard Layout: Use a classic layout with a fixed, dark-themed sidebar for
navigation on the left and a main content area on the right.
There must be NO hardcoded admin email. Any user who can successfully authenticate
using Firebase email/password credentials must be granted access to the admin
dashboard. The logic should not check if the user's email matches a specific
string.
Responsiveness: The layout must be responsive. On smaller screens, the sidebar
should collapse to a compact version showing only icons, and the navigation links
should align horizontally.
2. Pages & Functionality (via hash routing):
Dashboard (#dashboard):
This is the default view after login.
Display four prominent "stat cards" showing aggregate data counts fetched live from
Firebase: Total Products, Total Orders, Total Users, and Total Messages.
Product Management (#products):
Display all products from the /products node in a data table.
The table must have columns for Image (thumbnail), Name, Category, Price, and
Actions.
Full CRUD: Implement complete Create, Read, Update, and Delete functionality.
Add/Edit Modal: Adding a new product or editing an existing one must be done
through a single, reusable modal form. The form should include fields for name,
category, price, description, and image URL.
Order Management (#orders):
Display all orders from all users (fetched from /orders) in a comprehensive data
table.
The table must include columns for Order ID, Customer (showing both shipping name
and user email), Shipping Address, Date, Total Amount, Status, and Actions.
Status Control: The "Status" column for each order must contain a dropdown
(<select>) menu. Changing the selection (e.g., from 'Pending' to 'Shipped') must
instantly update that order's status in the Firebase database.
Implement a delete button for permanently removing an order.
Slider Management (#slider):
Provide a simple interface to manage the user storefront's homepage slider images.
Display the current slider images in a table with a preview and the image URL.
Include a button to open a modal where the admin can add a new image by pasting a
URL.
Include a delete button for each image.
Messages (#messages):
Display all user-submitted messages from the contact form, fetched from the
/messages node.
The table should show the Date, Sender's Name, Sender's Email, and the Message
content.
3. Firebase Realtime Database Structure:
Please structure the Realtime Database to support all the features listed above.
The ideal structure would be:
code
JSON
{
"products": {
"productId1": { "name": "...", "price": "...", "imageUrl": "...",
"description": "...", "category": "..." }
},
"sliderImages": {
"imageId1": { "downloadURL": "..." }
},
"users": {
"userId1": {
"cart": {
"productId1": { "quantity": 2, "name": "...", "price": "..." }
},
"wishlist": {
"productId2": { "name": "...", "price": "..." }
}
}
},
 "orders": {
"userId1": {
"orderId1": {
"orderId": "...",
"date": 167...,
"userEmail": "...",
"items": [ ... ],
"totalAmount": 199.99,
"status": "Pending",
"shippingName": "...",
"shippingAddress": "..."
}
}
},
"messages": {
"messageId1": { "name": "...", "email": "...", "message": "...", "date": 167...
}
}
}
strictly follow this : The project will consist of two separate, single-page HTML
files: one for the customer-facing storefront (user.html) and one for the admin
panel (admin.html) . Dont make any extra files beside this. Also the product view
should be in grid form in mobile view also each category bubbles should be of
different color