Skip to content

Latest commit

 

History

History
215 lines (177 loc) · 7.23 KB

README.md

File metadata and controls

215 lines (177 loc) · 7.23 KB

E-Commerce Admin

GitHub code size in bytes GitHub last commit GitHub commit activity month GitHub license

📝 About✨ Features💻 Technologies📁 Project structure⚙️ Environment variables🚀 How to run📄 License

📝 About

E-Commerce store is the fornend part of this project. You can find it here. I have created this project to learn more about next js app router. I have use nextjs as fullstack framework, tailwind css as css framework, zustand as state management, shadcn/ui as ui components, axios for mutations. I know that there are many things that I can improve in this project, I will try to improve it in the future. Feel free to contribute to this project. I will be very happy if you give this project a star ⭐.

✨ Features

  • Persisted cart
  • Product overview modal
  • Search products with filters
  • Add/remove products from cart
  • Checkout with Stripe
  • Responsive design
  • Increment/decrement product quantity from cart

💻 Technologies

📁 Project structure

├── .eslintrc.json
├── .gitignore
├── README.md
├── actions
│   ├── get-billboard.ts
│   ├── get-billboards.ts
│   ├── get-categories.ts
│   ├── get-category.ts
│   ├── get-colors.ts
│   ├── get-product.ts
│   ├── get-products.ts
│   └── get-sizes.ts
├── app
│   ├── (routes)
│   │   ├── cart
│   │   │   ├── components
│   │   │   │   ├── cart-item.tsx
│   │   │   │   └── summary.tsx
│   │   │   ├── error.tsx
│   │   │   ├── loading.tsx
│   │   │   └── page.tsx
│   │   ├── category
│   │   │   ├── [categoryId]
│   │   │   │   ├── components
│   │   │   │   │   ├── filter.tsx
│   │   │   │   │   └── mobile-filter.tsx
│   │   │   │   ├── error.tsx
│   │   │   │   ├── loading.tsx
│   │   │   │   └── page.tsx
│   │   │   ├── error.tsx
│   │   │   └── loading.tsx
│   │   ├── error.tsx
│   │   ├── loading.tsx
│   │   ├── page.tsx
│   │   └── products
│   │       ├── [productId]
│   │       │   ├── error.tsx
│   │       │   ├── loading.tsx
│   │       │   └── page.tsx
│   │       ├── error.tsx
│   │       └── loading.tsx
│   ├── error.tsx
│   ├── favicon.ico
│   ├── globals.css
│   ├── layout.tsx
│   └── loading.tsx
├── components.json
├── components
│   ├── billboard-swiper.tsx
│   ├── footer.tsx
│   ├── gallery
│   │   ├── gallery-tab.tsx
│   │   └── index.tsx
│   ├── info.tsx
│   ├── main-nav.tsx
│   ├── navbar-actions.tsx
│   ├── navbar.tsx
│   ├── preview-modal.tsx
│   ├── product-list.tsx
│   └── ui
│       ├── billboard.tsx
│       ├── button.tsx
│       ├── card.tsx
│       ├── container.tsx
│       ├── currency.tsx
│       ├── dialog.tsx
│       ├── heading.tsx
│       ├── label.tsx
│       ├── loader.tsx
│       ├── no-results.tsx
│       ├── product-card.tsx
│       ├── radio-group.tsx
│       ├── separator.tsx
│       ├── sheet.tsx
│       └── tabs.tsx
├── hooks
│   ├── use-cart.ts
│   └── use-preview-modal.ts
├── lib
│   └── utils.ts
├── next.config.js
├── package-lock.json
├── package.json
├── postcss.config.js
├── providers
│   ├── modal-providers.tsx
│   └── nprogress-provider.tsx
├── public
│   ├── next.svg
│   └── vercel.svg
├── tailwind.config.ts
├── tsconfig.json
└── types.ts

📝 Project Summary

  • actions: Contains Redux action creators and related logic.
  • app: Main application directory.
  • app/routes: Contains route configurations for different pages.
  • app/routes/cart: Handles cart-related functionality.
  • app/routes/category: Manages category-related functionality.
  • app/routes/category/categoryId: Handles category-specific functionality.
  • app/routes/products: Handles products-related functionality.
  • app/routes/products/productId: Manages product-specific functionality.
  • components: Contains reusable UI components.
  • lib: Houses utility functions and helper classes.

⚙️ Environment variables

Create a .env.local file in the root directory and add the following variables:

NEXT_PUBLIC_API_URL=<COPY_STORE_API_URL_FROM_ADMIN_PANEL>

🚀 How to run

  1. Clone this repository
git clone https://github.com/b-l-i-n-d/ecommerce-store.git
  1. Install dependencies
npm install
  1. Run the development server
npm run dev
  1. Open http://localhost:3000 with your browser to see the result.

Screenshots

Home page

Home page

Category page

Category page

Product page

Product page

Product overview modal

Product overview modal

Cart page

Cart page

Payment page

Payment page

📄 License

MIT