• Stars
    star
    746
  • Rank 60,823 (Top 2 %)
  • Language
    CSS
  • Created over 4 years ago
  • Updated 3 months ago

Reviews

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Repository Details

E-commerce Website | Payment gateway | Reactjs | Nodejs | Mongodb | Expressjs | JWT | Tailwind Css

Project Demo

Alt text

Getting Started

These instructions will get you a copy of the project up and running on your local machine for development and testing purposes.

Prerequisites

NPM / Yarn and Node.js installed

Installing

Installing NPM modules on both client and server folders

Execute these commands from the project directory

cd client && npm install
cd server && npm install

Running the app

Open a terminal on server directory

npm run start:dev

and open another terminal on client directory

npm run start

Access the web app at http://localhost:3000/

Deploying the backend server to render

Follow these setps πŸ‘‡πŸ‘‡

  1. Create your render account in https://render.com/

  2. Connect your github to render and give the project permission for that

  3. Then create a new Web Service and add your repo (your repo must be look like this repo's folder structure like frontend and backend both in that repo)

  4. For deploying this, every change will be in this render-deploy-backend branch. So don't change your .evn from master branch.

  5. You have to change your database to local to mongodb atlas. Because in this deployment we are not creating db server. So we will be using mongo atlas url. So find your mongodb cloud url with database which will look like this: mongodb+srv://myusername:[email protected]/ecommerce?retryWrites=true&w=majority and goto the render-deploy-backend branch and goto .env file and replace the first variable to your latest mongodb cloud url like this: DATABASE=mongodb+srv://myusername:[email protected]/ecommerce?retryWrites=true&w=majority Don't just put this url. Your url will be different. You will find it in your mongo cluster setting. The old variable will be like this: DATABASE=mongodb://127.0.0.1:27017/ecommerce and your new one should look like this: DATABASE=mongodb+srv://myusername:[email protected]/ecommerce?retryWrites=true&w=majority you can find the mongo url by goto the mongodb atlas website and goto your database and you can find a connect button and click on that you will see the url. And modify the url quite like my one with your secret info. N.B: And you must need to provide the cluster password not your account password! So find your cluster password from database access menu in mongodb atlast cloud and change accoding to you. Here I provide all image's that you can undarstand better Alt Text Alt Text Alt Text

  6. Then come to render website. Give all of the imformations I set in the image below just change the name of your project and then must be change the branch name to master to render-deploy-backend

  7. This is the setup for render Alt Text

  8. After all the setup you finished create the web service and It will deploy the project.

You can deploy frontend into vercel or netlify also. Thanks

Build with πŸ’› by Hasan

More Repositories

1

E-commerce_Django_Python

A E-commerce website using Django | Bootstrap | Custom Auth | Custom Middle ware
HTML
22
star
2

MERN_Stack_Project_WeConnect_Social_Media

A Social media website, MERN Stack, Node js, React js, Mongodb, Express js, JWT Authentication, Materialize CSS, Materialize Icon, Responsive Design
JavaScript
11
star
3

15_Project_With_Javascript

Html | Css | Javascript | Tailwind Css | Responsive layout
CSS
6
star
4

Customizable_Calendar_App_Reactjs

Fully customizable calendar app | Reactjs | Momentjs | Custom Css | Html | Live Perview: https://react-customizable-calendar-app.netlify.app/
JavaScript
5
star
5

Vuejs_Activity_Planner_App

❄️ Vuejs ❄️ | Tailwind css
CSS
4
star
6

Quizzy-App-By-OpenDB

A Quiz App build with OpenDB Api, Reactjs, Chakra Ui, Vite
TypeScript
3
star
7

KanbanDoo-App-Reactjs-Drag-and-Drop

πŸ“‹ Kanban Board πŸ“‹ | Typescript | Reactjs | Drag & Drop πŸ“Ά
TypeScript
3
star
8

Covid-19_Tracker_App

Axios | Vanila Javascript | Bootstrap | HTML5
HTML
2
star
9

CMS_with_PHP_Mysql

PHP | Mysql | Bootstrap | Jquery | User permission based Login | All Security added
CSS
2
star
10

Dhakai-dashboard

Typescript | React.Js | Tailwind Css
TypeScript
2
star
11

Django_Project_Content_Sharing_App

Django | Bootstrap | Custom Admin | Html | Css | Javascript | Friend System | Messaging System(Using Django temple engine only no js) | Like | Comment | Share | Custom auth | Custom middleware | User Role Based Permission
HTML
2
star
12

GithubProfileFinderApp

Fetch Api | Vanila Javascript | Bootstrap | HTML5
HTML
1
star
13

MERN_Stack_Project_PMS

Node Js | Express Js | React Js | Mongodb | Bootstrap | Redux
JavaScript
1
star
14

Money-Expense-App-React-Native

πŸ’ΈπŸ’Έ React Native, React Navigation, Drawer Navigation, Splash Screen, App custom icon, Redux, Redux Toolkit, Moment.js, Custom Components
TypeScript
1
star
15

Cypress-Full-Stack-E2E-Testing

Cypress E2E Testing | MERN Stack Project
TypeScript
1
star
16

hasan-py.github.io

Visit here : https://hasan-py.github.io
CSS
1
star