Project Description:
Arabica Café is a modern, fully interactive coffee shop website designed and built from scratch using HTML, CSS, and JavaScript. The project simulates a complete mini e-commerce experience, allowing users to explore a variety of coffee products, view detailed product previews, manage a shopping cart, and mark favorites—all with persistent data stored in localStorage.
Key Features:
Responsive Design: Seamless user experience across desktop, tablet, and mobile devices.
Product Popups: Eye icon on each product opens a detailed product popup with image, name, and description.
Favorites System: Users can add/remove products from favorites with real-time UI updates and persistence using localStorage.
Shopping Cart: Fully functional cart system with add/remove logic, live item count, total pricing calculation, and a checkout alert.
Theme Toggle: Dynamic switch between Dark Mode and Light Mode with persisted state using localStorage, including visual adjustments for background, text, and icons.
Search Functionality: Smart scroll-to-product behavior when users search for any part of a product's name.
Contact Form: A functional contact form with input validation and animated alerts.
Animated UI: Smooth transitions, scroll behavior, and dynamic content rendering to enhance UX.
Custom Alerts: Styled, non-blocking alert messages for checkout and contact confirmation.
Tech Stack Used:
HTML5 – for semantic structure and layout
CSS3 – for responsive design and theme styling
JavaScript (Vanilla) – for full interactivity, UI logic, DOM manipulation, and localStorage data handling
Font Awesome – for icons
Google Maps Embed – for location section
Live Server – for local development and testing
My Role & Contributions:
Customized and enhanced a starter UI template by rebuilding the logic from scratch using JavaScript.
Implemented real-world UI behaviors such as cart state management, favorites syncing, and scroll-based search navigation.
Designed a clean theme toggle system with saved user preferences.
Refactored and organized the codebase to follow best practices for readability and scalability.