Sam Antique Store

Overview

Sam Antique is a web application designed for an antique store, providing both a customer-facing interface and an admin dashboard for managing the store's inventory. The application allows users to browse a curated collection of antiques, while the admin dashboard facilitates item management, including adding, editing, and deleting items.

Live Demo

View Live Website View Frontend Source Code

Key Features

Customer Interface

  • Dynamic Item Display
  • Smooth Navigation
  • Responsive Design

Admin Dashboard

  • Secure Authentication
  • Item Management
  • Image Upload and Preview
  • Real-time Updates

Technical Stack

Frontend

  • HTML5
  • CSS3
  • JavaScript

Backend

  • Node.js Server
  • MySQL Database
  • File Upload System

Development & Deployment

  • Authentication System
  • Port Forwarding
  • Web Hosting

Implementation Details

Frontend Architecture

  • Responsive design using modern CSS techniques
  • Dynamic content loading with JavaScript
  • Client-side form validation for admin dashboard
  • Image preview functionality for item uploads
  • Smooth animations and transitions for better UX

Backend Integration

  • Node.js runtime environment for server-side operations
  • MySQL database for storing item information and admin credentials
  • Secure authentication system for admin access
  • Port forwarding configuration for local-to-online connectivity

Key Files Structure

  • index.html - Main customer-facing interface
  • admin-login.html - Secure admin authentication page
  • admin-dashboard.html - Item management interface
  • styles.css - Custom styling and animations
  • script.js - Core functionality and interactions
  • database.js - Database operations

Challenges and Solutions

Local-to-Online Connectivity

One of the main challenges was connecting the local MySQL database with the online frontend. This was solved by implementing port forwarding, allowing secure communication between the hosted frontend and the local backend server.

Image Management

Handling image uploads and previews required careful consideration of file size limits and format validation. A custom preview system was implemented to provide immediate feedback during the upload process.

Future Enhancements

  • User Authentication for Customers
  • Enhanced Admin Analytics
  • SEO Optimization