https://github.com/mdsejan/metroshop-client

MetroShop is a modern e-commerce platform built with Next.js and Node.js (Express). It features role-based access control for admins and users, allowing efficient product and order management. With a focus on performance and user experience, MetroShop offers intuitive browsing and secure payments in a responsive design.
https://github.com/mdsejan/metroshop-client

Last synced: 9 days ago
JSON representation

MetroShop is a modern e-commerce platform built with Next.js and Node.js (Express). It features role-based access control for admins and users, allowing efficient product and order management. With a focus on performance and user experience, MetroShop offers intuitive browsing and secure payments in a responsive design.

• Host: GitHub
• URL: https://github.com/mdsejan/metroshop-client
• Owner: mdsejan
• Created: 2024-10-26T09:43:21.000Z (24 days ago)
• Default Branch: main
• Last Pushed: 2024-11-06T19:18:55.000Z (12 days ago)
• Last Synced: 2024-11-06T20:27:03.303Z (12 days ago)
• Language: TypeScript
• Homepage:
• Size: 475 KB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# MetroShop

### Live URL:     [metroshop.vercel.app](https://metroshop.vercel.app/)

### Server Repo:     [MetroShop Server Repo](https://github.com/mdsejan/MetroShop-server)

## Description:

MetroShop is a full-stack e-commerce platform built to provide a seamless shopping experience for users while offering robust administrative functionalities.

## 👨‍💻 Technologies Used:

- Next.js (v14) for server-side rendering, static site generation, and powerful routing.

- TypeScript for type-safe development.

- Redux for state management.

- NextUI for beautiful and responsive UI components.

## 🛠️ Key Features:

## 🚀 Project Folder Structure:

This project follows an industry-standard folder structure designed for scalability, maintainability, and ease of collaboration.

```

/Metro-Shop-Client

├── /public

├── /src

│   ├── /app

│   │   ├── /(admin)                    // Admin dashboard and pages

│   │   │   └── /admin

│   │   │     ├── layout.tsx            // Admin layout, applied to all admin pages

│   │   │     ├── page.tsx              // Admin dashboard main page (e.g., /admin)

│   │   │     ├── /user-management

│   │   │     │   └── page.tsx          // User management (e.g., /admin/user-management)

│   │   │     ├── /product-management

│   │   │     │   └── page.tsx          // Product management (e.g., /admin/product-management)

│   │   │     └── /order-management

│   │   │       └── page.tsx            // Order management (e.g., /admin/order-management)

│   │   │

│   │   ├── /cart

│   │   │   └── page.tsx                // Cart page

│   │   ├── /checkout

│   │   │   └── page.tsx                // Checkout page

│   │   ├── /orders

│   │   │   └── page.tsx                // Order History page

│   │   ├── /product

│   │   │   ├── page.tsx                // Products listing page

│   │   │   └── /[id]

│   │   │       └── page.tsx            // Product Details page with dynamic route

│   │   │

│   │   ├── /contact

│   │   │   └── page.tsx                // Contact page

│   │   ├── /layout.tsx                 // Root layout for common components (Header/Footer)

│   │   ├── /global-error.tsx           // Global error handling

│   │   └── /page.tsx                   // Home page

│   │

│   ├── /components                     // Reusable components

│   │   ├── /admin                      // Admin-specific reusable components

│   │   │   ├── AdminSidebar.tsx        // Admin Sidebar component

│   │   └── /common                     // General reusable components (buttons, form elements)

│   │       ├── Header.tsx              // Header component with navigation links

│   │       ├── Footer.tsx              // Footer component with links

│   │       └── ProductCard.tsx         // Product card component for listings

│   │

│   ├── /hooks

│   │   ├── useAuth.ts                  // Hook for managing authentication and roles

│   │   ├── useRedux.ts                 // Redux helper hook

│   │   └── useSSR.ts                   // Hook for SSR/CSR logic management

│   │

│   ├── /layouts

│   │   ├── AdminLayout.tsx             // Layout for admin dashboard

│   │   ├── MainLayout.tsx              // Main layout for non-admin pages

│   │   └── ProductLayout.tsx           // Layout for product detail page

│   │

│   ├── /redux

│   │   ├── /slices

│   │   │   ├── authSlice.ts            // Auth slice (login/logout, session management)

│   │   │   ├── userSlice.ts            // User state management slice

│   │   │   ├── productSlice.ts         // Product data management

│   │   │   ├── cartSlice.ts            // Cart state management

│   │   │   └── orderSlice.ts           // Order management slice

│   │   ├── store.ts                    // Redux store configuration

│   │   └── /types

│   │       └── reduxTypes.ts           // Redux-related TypeScript types

│   │

│   ├── /styles

│   │   ├── /admin

│   │   │   └── dashboard.module.css    // Admin-specific CSS modules

│   │   ├── /user

│   │   │   └── profile.module.css      // User-specific CSS modules

│   │   └── globals.css                 // Global styles (including NextUI overrides)

│   │

│   └── /types

│       ├── authTypes.ts                // Authentication-related TypeScript types

│       └── layoutTypes.ts              // Layout-related TypeScript types

│

├── next.config.mjs                     // Next.js configuration

├── package-lock.json

├── package.json

├── postcss.config.mjs

├── README.md

├── tailwind.config.ts

└── tsconfig.json

```