ShopSwift is a modern, responsive e-commerce website frontend built with Tailwind CSS and JavaScript, designed for seamless shopping experiences on all screen sizes — from mobile to desktop.
It features dark/light mode auto-detection, a fully functional cart system, checkout logic, and real-time product search and filtering, giving users a realistic shopping experience in a lightweight interface.
🌐 Live Website:
https://kontractour.github.io/ShopSwift/
💾 GitHub Repository:
https://github.com/Kontractour/ShopSwift
ShopSwift is a frontend e-commerce demo project that showcases product listing, cart management, and checkout flow built entirely with HTML, Tailwind CSS, and Vanilla JavaScript.
The layout is fully responsive across all devices — desktop, tablet, and mobile — ensuring a consistent and visually appealing shopping experience for users on any screen size.
JavaScript dynamically manages product actions, local storage, and theme preferences, while Tailwind CSS ensures clean, scalable, and reusable styling for all sections.
- Add to Cart: Instantly add selected products to the cart.
- Remove Item: Delete any product from the cart dynamically.
- Update Quantity: Adjust product quantities directly in the cart.
- Total Calculation: Automatically updates subtotal and total prices.
- Checkout System: Displays a summary before completing purchase.
- LocalStorage Sync: Saves cart data persistently across sessions.
- Search & Filter: Quickly find items via keyword-based filtering.
- Theme Auto Detection: Switches between dark and light mode based on device settings.
- Built entirely with Tailwind CSS for fast, flexible styling.
- Clean grid-based product layout with responsive scaling.
- Interactive hover effects and smooth transitions.
- Dark/light mode contrast handled automatically via JS and CSS.
- Minimalistic, intuitive interface for ease of use.
| Technology | Purpose |
|---|---|
| HTML5 | Structure and semantics |
| Tailwind CSS | Styling and responsiveness |
| JavaScript (ES6) | Functionality and interactivity |
| LocalStorage API | Persistent data handling |
| GitHub Pages | Deployment and hosting |
- Clone this repository
git clone https://github.com/Kontractour/portfolio.git
Navigate into the project folder
bash
cd portfolio
Open index.html in your browser.
-
Integrate a backend (Node.js / Firebase / Supabase)
-
Implement product API fetching
-
Add payment gateway simulation
-
Improve accessibility (ARIA tags, keyboard navigation)
-
Add animations or loading states
Contributions are welcome! If you find any improvements or ideas, feel free to fork, modify, and submit a pull request.
🌟 Support If you find this project helpful:
⭐ Star this repo 👥 Follow @Kontractour for more projects 💬 Share your feedback or feature requests
This project is open-source under the MIT License — free to use, modify, and distribute.
Godswill Okereke
Frontend Developer & Content Writer
ShopSwift represents how simplicity and functionality can merge to create a real shopping experience using pure frontend technologies — it’s fast, responsive, and intuitive.