Shop Center

Shop Center is a frontend Next.js e-commerce platform developed in August 2024 for a client to facilitate online product browsing and purchasing. The site features a hero section on the home route, a product catalog with clickable cards, and dynamic routes for individual products and category pages. Styled with Tailwind CSS and powered by React and Next.js, it offers a fast, user-friendly shopping experience across devices, showcasing skills in dynamic routing, API integration, and UI/UX design.

Shop Center

Technology Stack

Next.jsNext.js
ReactReact
Tailwind CSSTailwind CSS
JavaScriptJavaScript

Home Route: Hero and Product Catalog

The home route features a visually engaging hero section that welcomes users and sets the tone for the e-commerce experience.

Scrolling down reveals a product catalog with cards displaying each product's image, name, category, and price, such as 'iPhone 9 (smartphones) - An apple mobile which is nothing like apple - $549 $478'.

  • Eye-catching hero section for brand impact
  • Responsive grid layout for product cards
  • Clear display of product name, category, and pricing
  • Clickable cards for seamless navigation to product details
Home Route: Hero and Product Catalog image 1
Home Route: Hero and Product Catalog image 2

Product Detail Page

Accessible via dynamic routes (/product/id), the product detail page displays an enlarged image of the selected product along with detailed information.

Details include product name, category (e.g., smartphones), rating, discount, price, and an 'Add to Cart' button, e.g., 'iPhone 9 (smartphones) - An apple mobile which is nothing like apple - $549 $478'.

  • Dynamic routing for individual product pages
  • Detailed product information with ratings and discounts
  • Interactive 'Add to Cart' functionality
  • Responsive layout for enhanced viewing
Product Detail Page image 1

Category Page

Clicking the category text (e.g., 'smartphones') navigates to a dynamic category route (/category/smartphones) displaying all products within that category.

The category page provides a filtered view of products, maintaining the same card-based layout for consistency and ease of browsing.

  • Dynamic category routing for filtered product display
  • Consistent card layout for category-specific products
  • Seamless navigation from product to category pages
  • Optimized for quick category browsing
Category Page image 1

Technical Implementation

Built with Next.js for server-side rendering and dynamic routing, ensuring fast load times and SEO-friendly content delivery.

Utilizes Tailwind CSS for a responsive, visually consistent design, enhancing user engagement across mobile and desktop devices.

  • Next.js dynamic routes for product and category pages
  • React hooks for efficient state management
  • Tailwind CSS for rapid and consistent styling
  • Optimized image handling with Next.js Image component