Gather - Storefront by Madhushree Rasal

GATHER is a seller-side product showcase designed to help sellers present their products in a clean, organized, and visually appealing storefront. Built using HTML5, Tailwind CSS, and JavaScript, the project allows users to add product details, including product ID, category, name, image, description, and price, and display them as dynamically generated product cards. Users can add products to either the beginning or end of the gallery, remove the first or last product, and update stock status by marking products as out of stock. The interface uses JavaScript arrays and nested arrays to manage product data, along with loops, conditional statements, template literals, and DOM manipulation to update the gallery dynamically. Tailwind CSS and Flexbox are used to create a responsive layout, while Remix Icon provides interface icons. The project was developed as a hands-on learning experience to strengthen fundamental JavaScript skills and apply them to a practical web development use case. Currently, product data is stored in a JavaScript array and is not preserved after the page session ends. GATHER serves as a foundation for future improvements, including product editing, search and category filtering, persistent data storage, enhanced form validation, and backend integration. The project is deployed using GitHub Pages and demonstrates the fundamentals of interactive, client-side product management.

← Back to Madhushree Rasal