SwiftCart

SwiftCart - E-Commerce Website

🔗 Live Links

Netlify Link: https://rad-kashata-5f89af.netlify.app/

GitHub Pages Link: https://khanmahfuj34.github.io/SwiftCart/

---

❓ JavaScript Questions & Answers

1) What is the difference between null and undefined?

undefined mane variable declare kora hoise kintu value assign kora hoy nai. null mane intentionally empty value, mane ami nijer iccha te bole disi je ekhane kono value nai.

2) What is the use of the map() function in JavaScript? How is it different from forEach()?

map() use hoy array er protita element ke change kore notun array bananor jonne. forEach() shudhu loop chalay, kintu notun array return kore na. Simple vabe: map = new array dey, forEach = just loop.

3) What is the difference between == and ===?

== sudhu value compare kore (type convert korte pare). === value + type duita i strictly compare kore. So === beshi safe and recommended.

4) What is the significance of async/await in fetching API data?

async/await use korle API call asynchronous vabe clean and readable hoy. Eta promise handle kora easy kore and code dekhte synchronous moto lage, tai error handle o easy hoy (try-catch diye).

5) Explain the concept of Scope in JavaScript (Global, Function, Block)

Scope mane variable kothay access kora jabe. Global scope = sob jayga theke access kora jay. Function scope = sudhu oi function er vitore use kora jay. Block scope = { } block er vitore (let, const) use kora jay.

📋 Project Description - SwiftCart

About the Project

SwiftCart is a modern e-commerce website built using Tailwind CSS and DaisyUI. It fetches real product data from the FakeStore API and provides a complete shopping experience for users.

🛠️ Technology Stack

• HTML5 - Semantic markup
• Tailwind CSS - Utility-first CSS framework
• DaisyUI - Pre-built component library
• Vanilla JavaScript - Dynamic features and API integration
• FakeStore API - Product data source

✨ Features and Functionality

1. Responsive Navbar

• Logo on the left side
• Menu items on desktop (Home, Products, About, Contact)
• Hamburger menu on mobile
• Shopping cart icon on the right with item count badge

2. Hero/Banner Section

• Full-height section with background image
• Attractive title and subtitle
• “Shop Now” call-to-action button
• Smooth gradient overlay

3. Why Choose Us Section

• 4 feature cards highlighting benefits:
  • Free Delivery
  • 24/7 Support
  • Secure Payment
  • Easy Returns
• Each card includes relevant icons and descriptions

4. Trending Products

• Dynamically fetches products from FakeStore API
• Displays in a responsive grid layout
• Shows product image, name, price, and rating for each item

5. Dynamic Category Filter

• All product categories loaded dynamically from API
• Click on category button to filter products by that category
• Active category button is highlighted for better UX
• Products update instantly when category changes

6. Product Cards

Each product card includes:

• Product image from API
• Product name (truncated if too long)
• Product price
• Category badge
• Star rating display
• “Details” button
• “Add to Cart” button

7. Modal - Product Details

• Clicking “Details” button opens a modal popup
• Shows complete product information:
  • Full product name
  • Full description
  • Price and rating
  • “Add to Cart” button
• Clean, easy-to-read layout

8. Shopping Cart Functionality

• “Add to Cart” button adds product to shopping cart
• Cart item count updates in navbar badge
• Cart dropdown menu displays:
  • Number of items in cart
  • Subtotal price calculation
  • “View Cart” button for full cart page

9. Footer Section

• Brand information and logo
• Quick links (Home, Products, About, Contact)
• Support links (FAQ, Shipping, Returns, Privacy Policy)
• Newsletter subscription form with email input
• Copyright and footer information

10. Responsive Design

• Mobile-first design approach
• Optimized for tablet and desktop screens
• Perfect layout on all device sizes
• Touch-friendly buttons and spacing on mobile

🔗 API Integration

Uses FakeStore API endpoints:

GET /products           - Get all products
GET /products/categories - Get all available categories
GET /products/category/[name] - Get products by category
GET /products/[id]      - Get single product details

📱 Responsive Breakpoints

• Mobile: < 640px
• Tablet: 640px - 1024px
• Desktop: > 1024px (and above)

🎨 Design Features

• Clean and modern UI using Tailwind CSS utilities
• DaisyUI components for consistent design
• Beautiful gradients and shadows
• Smooth transitions and hover effects
• User-friendly interface for easy navigation
• Accessible color scheme and typography

📊 Git Commits

Project includes 5+ meaningful commits:

• Project setup and initial structure
• HTML structure and layout
• Styling with Tailwind CSS and DaisyUI
• JavaScript functionality implementation
• API integration and dynamic data loading

---

Developer: Mahfuj Khan
Start Date: February 2026
Deadline: 17th February 2026
Status: ✅ Completed