SourabhJyotiDas / SmartBuyer-Frontend

[ SmartBuyer ] MERN-Stack e-commerce project. ( Frontend Codes )

Hi, I'm Sourabh Jyoti Das! 👋

🔗 Links

🚀 About Me

MERN-STACK DEVELOPER 👨‍💻

SmartBuyer ( A MERN-Stack e-commerce project)

Hi! My name is Sourabh Jyoti Das, I have created this web application.

Welcome to SmartBuyer, your one-stop destination for all your online shopping needs. We have created a seamless shopping experience by leveraging cutting-edge technologies to provide you with a user-friendly and secure platform.

At the heart of our website, we have used Node.js and Express.js to build a robust and scalable backend. The powerful MongoDB database ensures efficient data storage and retrieval, enabling fast and seamless transactions. With the integration of Stripe, a leading payment gateway, we guarantee secure and hassle-free online payments, providing peace of mind to our customers.

On the frontend, we have employed React.js, a popular JavaScript library, to deliver a smooth and interactive user interface. React Router DOM allows for seamless navigation across different pages, ensuring a fluid browsing experience. We have implemented React Redux and Redux Thunk to efficiently manage the application's state, enabling smooth data flow and enhanced performance. Axios, a promise-based HTTP client, facilitates seamless communication between the frontend and backend, ensuring fast and reliable data transfers.

To enhance the visual appeal of our website, we have incorporated Chart.js, a powerful charting library, to present data in an intuitive and visually appealing manner. React Icons, React Material-UI, and Tailwind CSS provide a wide range of icons, UI components, and customizable styles to create a beautiful and responsive design. We have also utilized React Toastify, an elegant notification library, to provide informative and user-friendly alerts.

For an enhanced shopping experience, we have implemented React Multi Carousel, which allows for dynamic and interactive product carousels, enabling easy product discovery. Additionally, our website supports location-based features with the help of Country-State-City, which provides accurate and up-to-date information on countries, states, and cities.

To provide feedback and rate products, we have integrated React Rating Stars, empowering customers to express their opinions and contribute to the community. Finally, we have optimized the development process using Redux DevTools Extension, enabling efficient debugging and monitoring of the application's state.

Install Dependencies

For Backend - npm install or npm i || ( Once install all the packages then start the server by using this commend "npm run start" )

For Client/Frontend - cd client > npm install ( Same goes for here once you install all the packages then start the server by using this commend "npm run start" )

ENJOY 🍉

Authors

• 🥶 Instagram Click Here || 👻 Gmail Click Here

Contributing

Contributions are always welcome!

See contributing.md for ways to get started.

Please adhere to this project's code of conduct.

Demo

https://smartbuyer.vercel.app 🤞

For Production Build

To build this project run ( Remember only in client folder )

  npm run build

Environment Variables

To run this project, you will need to add the following environment variables to your .env file

API_KEY

ANOTHER_API_KEY

PORT

DB_URI

DB_URI_LOCAL

JWT_SECRET

JWT_EXPIRE

COOKIE_EXPIRE

SMPT_SERVICE

SMPT_MAIL

SMPT_PASSWORD

SMPT_HOST

SMPT_PORT

CLOUDINARY_NAME

CLOUDINARY_API_KEY

CLOUDINARY_API_SECRET

STRIPE_API_KEY

STRIPE_SECRET_KEY

Features

• Login/Signup mode
• Live previews
• Fullscreen mode
• Responsive Design
• Online Payment Gateway (Stripe)

Feedback

If you have any feedback or Suggestion, please reach out to me at [e-mail]

Other Common Github Profile Sections

👩‍💻 I'm currently working on Some Major Projects.

🧠 I'm currently learning MERN Stack

🛠 Skills

C++, Javascript, HTML, CSS, React, Next, Tailwind etc...

Installation

Install my-project with npm

  npm install 
  cd client/ npm install 

Run Locally

Clone the project

  git clone https://link-to-project

Go to the project directory

  cd client

Install dependencies

  npm install

Start the server

  npm run start

Tech Stack

Client: React, Redux, TailwindCSS

Server: Node, Express

Usage/Examples

import Component from 'my-project'

function App() {
  return <Component />
}

Support

For support, email [e-mail] or Connect via Instagram .