devhasibulislam / canim-ecommerce

An eco shop & ecommerce responsive React template built by React.JS & Tailwind CSS

Full Video on YouTube CodeCraftMERN

Canim eCommerce

Discover a seamless shopping experience at our e-commerce haven. Browse an extensive selection of products from top brands, enjoy secure transactions, and relish swift deliveries. Elevate your online shopping journey with user-friendly navigation and exclusive deals. Shop effortlessly, anytime, anywhere, and redefine convenience with our digital marketplace.

Overview

Explore curated deals and trending products on our inviting e-commerce homepage. Instantly find what you need for a delightful shopping experience.

Features

Pages

• Total x31 Pages
  • Home x1
  • Detail x1
  • Filter x1
  • Auth x3
  • Dashboard x3
    • Buyer x5 cart & favorites
    • Seller x8 CRUD intension
    • Admin x10 CRUD intension

Modals

• Total x15 Modals
  • Category x1
  • Brand x1
  • Store x1
  • Search x1
  • Cart x1
  • Auth x1
  • Buyer x2
  • Seller x2
  • Admin x5

Core

• Real-Time interaction cart, favorites, create, read, update & delete
• Separate Dashboard panel admin, seller & buyer
• Advance search filter highlight matched words & letters
• Image preview avatar, thumbnail & gallery
• Responsive design pc, laptop, tablet & mobile
• Payment gateway stripe
• Intuitive user-friendly design ui/ux
• Secure channel bypass role based

Tech Stack

• Framework: Next.Js 13 App Directory
• State Container: Redux Toolkit
• Styling: Tailwind CSS
• Icons: React Icons
• Database: MongoDB
• ORM: Mongoose
• Linting: ESLint
• Formatter: Prettier
• Work Management: Asana
• Backend Directory: Node.Js Express Server

Technologies

Client	Server
@reduxjs/toolkit	bcryptjs
autoprefixer	cloudinary
eslint	colors
eslint-config-next	cors
next	dotenv
postcss	express
react	jsonwebtoken
react-dom	mongoose
react-icons	multer
react-redux	multer-storage-cloudinary
tailwind-scrollbar-hide	validator
tailwindcss	nodemon
@tailwindcss/forms

Development

Clone Repository

You can use any package manager like npm or yarn

git clone https://github.com/devhasibulislam/canim-ecommerce.git
cd canim-ecommerce

cd client
yarn install

cd ..

cd server
yarn install

Environment Setup

Client Side

NEXT_PUBLIC_BASE_URL="http://localhost:8080/api"

Server Side

# Port number
PORT=8080

# Origin URL
ORIGIN_URL="http://localhost:3000"

# MongoDB Atlas URI
DB_Name="canim-template"
ATLAS_URI="YOUR_MONGODB_ATLAS_URI"

# JWT secret
TOKEN_SECRET="JWT_TOKEN"

# Cloudinary credentials
CLOUD_NAME="CLOUDINARY_CLOUD_NAME"
API_KEY="CLOUDINARY_API_KEY"
API_SECRET="CLOUDINARY_API_SECRET"

# Stripe Payment Credentials
STRIPE_PUBLISHABLE_KEY="YOUR_STRIPE_PUBLISHABLE_KEY"
STRIPE_SECRET_KEY="YOUR_STRIPE_SECRET_KEY"

Access

• Buyer [email protected] & Demo@123
• Seller [email protected] & Hasib@123
• Admin [email protected] & Admin@123 => don't create any occurrence :(

Important Links

• Client Side Live Link: Click Here
• Server Side Live Link: Click Here
• Dashboard Reference Link: Click Here
• Reference Site Live Link: Click Here

Author

• Developer: Hasibul Islam
• Designer: Sadia Khanum dedicate to

find it useful then buy me a coffee 😜😜😜

canim-ecommerce's Issues

Why handle image upload in a reducer ?

In this way, every input element file whose image is expected shows that it has already been uploaded, because after an upload into the application, the image is defined for the global application and is never again defined as an empty object.

Express.Js Server as Backend not working on Vercel

I have a full stack project where I'm using Next.Js 13 App Directory as frontend and Express.Js Server as backend. Which works fine locally but when I try with vercel and deploy them separately for frontend and backend. Frontend works fine but backend won't load data from MongoDB to display.

Can't Open Project

Hi, cd ciseco-ecommerce

cd client
yarn install

cd ..

cd server
yarn install

How can I run the project after doing the steps? (note: I will open the js project for the first time, so)
Thanks :)