MindShelf - Online Bookstore

About Project: A fully responsive online bookstore website featuring product filtering, mobile navigation, and smooth animations. Built with modular JavaScript architecture for maintainability, CSS custom properties for consistent theming, and component-based structure where each section is independently rendered. The project includes featured collections, special offers with countdown timer, filter buttons for product categories, horizontal scrollable cards, and a sticky header with overlay navigation, and much more.

What I learned: Implemented modular JavaScript with ES6 imports/exports for component-based architecture, created filter functionality for product categories, used CSS Grid and Flexbox for responsive layouts, developed animated hero sections with background images, built reusable card components with hover effects and action buttons, and much more.

Personal Note: I started building HTML, CSS, and JavaScript projects in 2022.
At that time, I focused on learning first and began uploading to GitHub recently.
Now I'm working with React.js and Next.js, and seeking opportunities as a frontend or web developer.

Project More Details

What's Inside

• Header Section - Sticky navigation with search functionality, shopping cart icon with counter, mobile menu toggle, and user profile button
• Hero Banner - Full-width section with background image, call-to-action button, and responsive book illustration
• Feature Cards - Four service highlights including free shipping, secure payment, best price guarantee, and easy return policy
• Featured Collection - Grid layout showcasing new book arrivals with product cards, price tags, star ratings, and quick action buttons
• Special Offer Section - Promotional banner with countdown timer showing days, hours, minutes, and seconds
• Popular Collection - Horizontal scrollable product list with filter buttons to sort by Featured, New, and Upsell categories
• Blog Section - Latest articles with images, publication dates, comment counts, and read more links
• Footer - Company information, social media links, multiple navigation columns, and payment method icons
• Mobile Navigation - Slide-in sidebar menu with search bar, close button, and full-screen overlay
• Back to Top Button - Floating button appears on scroll for quick page navigation

Technologies Used

• HTML5 - Semantic markup with proper structure and accessibility attributes
• CSS3 - Modern styling with Grid, Flexbox, custom properties, animations, transitions, and media queries
• JavaScript (ES6) - Modular components with import/export, event handling, DOM manipulation, and filter logic
• Google Fonts - Work Sans and Jost font families for clean typography
• Ionicons - Icon library for UI elements like cart, menu, social media, and action buttons
• CSS Custom Properties - Color variables, typography scales, spacing systems, and transition timing functions
• CSS Animations - Keyframe animations for hero banner, button pulses, hover effects, and smooth transitions
• Media Queries - Responsive breakpoints at 575px, 768px, 992px, and 1200px for optimal viewing

Project Structure

    mind-shelf/
    │
    ├── index.html                # Main HTML with section root divs
    │
    ├── assets/
    │   ├── css/
    │   │   └── style.css        # Complete styles, animations, and responsive design
    │   │
    │   ├── js/
    │   │   ├── app.js           # Main entry point, imports all components
    │   │   ├── header.js        # Header component with navigation and mobile menu
    │   │   ├── hero.js          # Hero banner component
    │   │   ├── feature.js       # Feature cards component
    │   │   ├── featured.js      # Featured collection component
    │   │   ├── offer.js         # Special offer countdown component
    │   │   ├── popular.js       # Popular collection with filter logic
    │   │   ├── blog.js          # Blog section component
    │   │   ├── footer.js        # Footer component
    │   │   └── backTop.js       # Back to top button component
    │   │
    │   └── images/              # Hero banners, product images, blog photos, icons, backgrounds
    │
    └── README.md                # Project documentation
    

Key Features

• Fully Responsive Design - Works seamlessly on all devices from 320px mobile to 1920px+ desktop screens
• Modular JavaScript Architecture - Each section is an independent component with its own render function
• Product Filter System - Interactive buttons to filter products by Featured, New, and Upsell categories
• Sticky Header Navigation - Fixed header appears with slide animation after scrolling 100px down the page
• Mobile Slide Menu - Full-screen overlay navigation with smooth transitions and close button
• Horizontal Scrollable Cards - Product and blog sections with custom scrollbar styling
• Product Quick Actions - Hover overlay reveals view, wishlist, compare, and add to cart buttons
• Countdown Timer - Time-sensitive offer display with days, hours, minutes, and seconds
• Shopping Cart Counter - Badge showing number of items in cart
• Search Functionality - Search bars in both header and mobile navigation
• Star Rating System - Visual product ratings with icon display
• Hover Effects - Image scaling, color transitions, button animations, and transform effects
• Back to Top Button - Floating button appears after scrolling 300px with chevron icon
• Cross-Browser Compatible - Tested on Chrome, Firefox, Safari, Edge, and Opera
• Easy Customization - CSS variables and modular JS components for quick updates

Quick Start

1. Clone the repository:

   git clone https://github.com/nawazdevx/mind-shelf.git

  <li>
    <strong>Open the project:</strong>
    <ul>
      <li>Open <code>index.html</code> directly in your browser</li>
      <li>Or run a local server:</li>
    </ul>

    <pre><code>python -m http.server 3000</code></pre>
    Then visit <code>http://localhost:3000</code>
  </li>

  <li>
    <strong>Start Customizing:</strong>
    <ul>
      <li>Update bookstore name and content in component JS files</li>
      <li>Change colors in <code>style.css</code> using CSS variables</li>
      <li>Replace images in <code>assets/images/</code> folder</li>
      <li>Modify product data in individual component files</li>
    </ul>
  </li>
</ol>

Customization

• Text Content: Edit data objects in each JS component file - update book titles, descriptions, prices, and all text content
• Colors: Update CSS variables in :root selector at the top of style.css

  :root {
    --maximum-blue-green: hsl(184, 50%, 60%);   /* Primary accent color */
    --selective-yellow: hsl(42, 98%, 55%);      /* Secondary accent color */
    --xiketic: hsl(240, 100%, 6%);              /* Dark background */
    --white-1: hsl(0, 0%, 100%);                /* White text/backgrounds */
  }

• Images: Replace files inside assets/images/ with your own book covers and banners (keep same filenames or update references in component files)
• Fonts: Change the Google Fonts link in HTML <head> section and update --ff-work-sans and --ff-jost variables
• Products: Add or remove items by editing the products array in featured.js and popular.js files
• Blog Posts: Update the posts array in blog.js with new images, dates, titles, and descriptions
• Navigation Menu: Modify the menu array in header.js to add or remove navigation links
• Footer Content: Edit footerData object in footer.js for columns, links, and social media
• Filter Categories: Adjust product categories in popular.js by changing data-category attributes
• Countdown Timer: Update countdown values in offer.js component
• Animations: Adjust animation timing in @keyframes sections and transition properties in CSS

License: This project is licensed under the MIT License.

Contact: Connect with me on LinkedIn or visit my Portfolio.

Support: Found this helpful? Give it a ⭐ on GitHub! Thank you.

Project Preview

You can view the live project here ➜ Live Demo