/technical-interview-sps

A online store with fake-store API

Primary LanguageTypeScript

E-commerce Product Page

Overview

This is the README for the E-commerce Product Page project. The project consists of creating a product page for an e-commerce website using the frontend Mentor design as a reference. The styles for the project will be based on the Material UI framework, and the typography will use the Kumbh Sans font. The project will use Next.js for routing and state management, and will follow the Atomic Design methodology for component structuring.

Design

The design for the project is based on the frontend Mentor design for an e-commerce product page. The design will be used as a reference to create the project's layout. The design is available at https://www.figma.com/file/a57XoMNSG8dlomqyUNnHZk/ecommerce-product-page.

Architecture

The project will use the Material UI framework for styling. Material UI is a framework that provides pre-designed and customizable components that can be easily integrated with React. The project will also use the Kumbh Sans font for typography. The project will follow the Atomic Design methodology for component structuring. There will be four main folders for components: atoms, molecules, organisms, and templates. The project will also use Next.js for routing and state management.

Folder Structure

The project will follow the Atomic Design methodology for component structuring. The folder structure will be as follows:

  • components/
    • atoms/
      • Button/
        • Button.js
        • Button.css
    • molecules/
      • Navbar/
        • Navbar.js
        • Navbar.css
      • ProductCard/
        • ProductCard.js
        • ProductCard.css
    • organisms/
      • ProductList/
        • ProductList.js
        • ProductList.css
      • Cart/
        • Cart.js
        • Cart.css
    • templates/
      • ProductDetail/
        • ProductDetail.js
        • ProductDetail.css
      • Checkout/
        • Checkout.js
        • Checkout.css
      • OrderHistory/
        • OrderHistory.js
        • OrderHistory.css
      • Login/
        • Login.js
        • Login.css
      • Signup/
        • Signup.js
        • Signup.css
  • pages/
    • index.js
    • cart.js
    • product/[id].js
    • checkout.js
    • order-history.js
    • login.js
    • signup.js
  • public/
    • logo.svg
    • favicon.ico
  • styles/
    • global.css
    • variables.css

Components

The project will use the following components:

  • Navbar: Barra de navegación que contendrá los links a diferentes secciones de la aplicación, como el catálogo de productos, el carrito de compras y el perfil del usuario.
  • ProductCard: Tarjeta que mostrará la información básica de un producto, como su imagen, nombre y precio.
  • ProductList: Lista de productos que se mostrará en la página principal de la aplicación.
  • ProductDetail: Página que mostrará la información detallada de un producto, incluyendo su descripción, imágenes y opciones de compra.
  • Cart: Página que mostrará los productos agregados al carrito de compr