Welcome to ABC Store, the SEO-friendly, high-performance, and mobile-responsive eCommerce platform built with modern web technologies.
This project is a technical task for Shory Company.
- Landing Screen: Header menu, welcome message, newest products, and product categories.
- Products Listing: Browse products by category via header menu or category section.
- Search & Sort: Search by title and sort products by price (low → high, high → low).
-
Product Details: Detailed view with description, images, and specifications.
-
Shopping Cart: Add items from listing or detail screens; cart item count always visible in the header.
- Cart Page: View all items, total amount, and remove options.
- Next.js
- Tailwind CSS
- TypeScript
- Reduxjs Toolkit
⚡️ Optional enhancements:
- ESLint & Prettier
- Monorepo structure
- Dockerfile for containerization
-
Clone the repository
git clone https://github.com/shory-code-challenges/abcstore_randa.mohamed1295_gmail.com.git cd abcstore_randa.mohamed1295_gmail.com -
Install dependencies
npm install
-
Run in development
npm run dev
-
Build for production
yarn run build && yarn start
You can view a full walkthrough of the project here:
Watch the video
src/
├── app/ # Application routes (Next.js App Router)
│ ├── [category]/ # Dynamic route for product categories (e. g., /electronics)
│ │ └── page.tsx # Category-specific product listing page
│ ├── cart/ # Cart page route
│ │ └── page.tsx # Displays the cart and checkout options
│ ├── products/ # Products main route (optional index or listing page)
│ │ └── page.tsx # Displays all products
│ ├── layout.tsx # Root layout shared across all pages (e.g., Navbar, Footer)
│ └── page.tsx # Main landing (home) page
│
├── components/ # Reusable and page-specific components
│
│ ├── cartComponents/ # Components related to the shopping cart
│ │ ├── CartCard.tsx # Displays an individual cart item
│ │ └── CartSummary.tsx # Displays total price and cart summary
│
│ ├── homeComponents/ # Components used on the home/landing page
│ │ ├── Categories.tsx # Lists all product categories
│ │ ├── HeroBanner.tsx # Hero section/banner on homepage
│ │ └── WelcomeBanner.tsx # Welcome banner for users visiting homepage
│
│ ├── layout/ # Layout-specific reusable components
│ │ ├── CartBtnInNav.tsx # Cart button with item count shown in the Navbar
│ │ ├── Footer.tsx # Footer section with information and links
│ │ ├── Navbar.tsx # Main navigation bar
│ │ └── NavContent.tsx # Dynamic content inside Navbar (categories, links)
│
│ ├── productsComponents/ # Components for product listing and interaction
│ │ ├── ProductCard.tsx # Card view for a single product
│ │ ├── ProductsFilter.tsx # Filtering and sorting UI for products
│ │ └── ProductsList.tsx # Displays a list of products based on filters or category
│
│ └── reusable/ # Generic reusable UI components
│ ├── AddProductToCardBtn.tsx # Button to add products to cart
│ └── BtnLinkReusable.tsx # Reusable styled link button
│
├── store/ # Application state management (Redux / Recoil)
│ └── cartSlice.ts # Redux slice for cart operations (add, remove, update quantity)
│
├── images/ # Static assets used in the app
│ └── docs images/ # Documentation images (used in README file)
│
└── globals.css # Global CSS styles
# Global stylesMade by Randa Mohamed for Shory Company challenge.