Code Monkey home page Code Monkey logo

smartbuyer-frontend's Introduction

Hi, I'm Sourabh Jyoti Das! ๐Ÿ‘‹

๐Ÿ”— Links

portfolio linkedin twitter

๐Ÿš€ 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 [email protected]

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 

Logo

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 [email protected] or Connect via Instagram .

smartbuyer-frontend's People

Contributors

sourabhjyotidas avatar

Watchers

 avatar

Forkers

visioninhope

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.