hasan-py/mern_stack_project_ecommerce_hayroo

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

Project Demo

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

.env

In the server > .env file, you can find some information. Please use your own API key for future use, as this key may not work in the future.

BRAINTREE_MERCHANT_ID=your_id
BRAINTREE_PUBLIC_KEY=your_public_key
BRAINTREE_PRIVATE_KEY=your_private_key

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

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

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

mern_stack_project_ecommerce_hayroo's Issues

Is there a way to chose options? Like have options for different products

when the server restart the imgs in the uopload folder dont work anymore

Brother you are a dope developer how did u learn so much???

Please let me know in the comments. How do u code so much do u read documentation or do you watch video tutorials and do u listen to music while programming.

MongoError: E11000 duplicate key error collection: amazona.products index: name_1 dup key: { name: null }

I am getting this error when I am trying to add product second time through admin panel.

MongoError: E11000 duplicate key error collection:
amazona.products index: name_1 dup key: { name: null }
at Function.create (D:\a_project\project\server\node_modules\mongodb\lib\core\error.js:57:12)
at toError (D:\a_project\project\server\node_modules\mongodb\lib\utils.js:130:22)
at D:\a_project\project\server\node_modules\mongodb\lib\operations\common_functions.js:258:39
at handler (D:\a_project\project\server\node_modules\mongodb\lib\core\sdam\topology.js:943:24)
at D:\a_project\project\server\node_modules\mongodb\lib\cmap\connection_pool.js:350:13
at handleOperationResult (D:\a_project\project\server\node_modules\mongodb\lib\core\sdam\server.js:558:5)
at MessageStream.messageHandler (D:\a_project\project\server\node_modules\mongodb\lib\cmap\connection.js:281:5)
at MessageStream.emit (events.js:376:20)
at processIncomingData (D:\a_project\project\server\node_modules\mongodb\lib\cmap\message_stream.js:144:12)
at MessageStream._write (D:\a_project\project\server\node_modules\mongodb\lib\cmap\message_stream.js:42:5)
at writeOrBuffer (internal/streams/writable.js:358:12)
at MessageStream.Writable.write (internal/streams/writable.js:303:10)
at TLSSocket.ondata (internal/streams/readable.js:745:22)
at TLSSocket.emit (events.js:376:20)
at addChunk (internal/streams/readable.js:309:12)
at readableAddChunk (internal/streams/readable.js:284:9) {
driver: true,
index: 0,
code: 11000,
keyPattern: { name: 1 },
keyValue: { name: null }
}

Upload issue

Hi Hasan, this project is awesome but the upload isn't working. as you already quoted _In uploads folder you need create 3 folder like bellow. Folder structure will be like: public -> uploads -> 1. products 2. customize 3. categories_

but there is not uploads folder anywhere. Can you share the proper path for the same?

I have tried creating server/public/uploads/categories but while doing that getting

POST /api/customize/upload-slide-image 500 1267.869 ms - 277 Error: ENOENT: no such file or directory, open 'public/uploads/categories/1a.jpeg'

Database .json file

kindly share the database .json file.

Add env to git ignore

Hey Hasan, I happen to see your youtube video and came to view your code. The first thing I noticed is you have added all the API key to Github, make sure .env is not added to Github.

How to Setup Mongodb?

can we server side rendering for seo ?

hi, can we server side rendering for seo ?

or are we use next.js.

what do you think

User Role

Hi , I want to know how you have managed user and admin Role

Favourite

Design Subscription

Private key exposed

Loading Icon Spin Clockwise (minor issue)

The Loading Icons spins clockwise, which is the wrong direction according to the arrow direction of the SVG. The rotate direction should be reversed and it will be fine.

about the database and the website loadig issue

About the database connectivity in the project the database error keep comming in the terminal please tell me that how to solve this error and make the website as working as yours

.env

I was reviewing your project on GitHub and noticed that the .env file is within the repository scope. I would like to suggest that you consider removing this file from the public scope of the project.

The .env file typically contains sensitive information such as API keys, passwords, and other confidential data. Having it within the project scope can pose a security risk, especially if other people collaborate on the repository or if the project is public.

I suggest you add the .env file to your .gitignore to ensure that it is not included in future commits. This way, sensitive information will not be shared accidentally.

Mongo Database

Sir Please provide the database of this Project.

Business Logic leak

Hey Hassan ! i've saw your project online , i am a fan of MERN stack web , so i've review your source code , there's a lot of issues , and leak of business logic , and bugs

one of them, in this API endpoint , /api/user/edit-user , to provide the user an ability to update its profile data , in this case , you miss the proper validation of user's ID , i can bypass this and update someone else profile by getting its ID .

there's a lot of issues , i just liked your project , and decide to go along with it .

Admin User Can't Be Created. Can't export data from server unto the database. Can't access dashboard

I would be very happy if you tend to these issues

can't turn it on

How to setup client in render.

I tried to host client area in render but showing error.
Pls make a video about setting client area in render.

Ever user can access admin panel?

Need DB Schema

Hi Hasan,

Firstly thanks for making this App.

I am trying to setup this app and I am not getting apps if I point the code to my local backend from DB.
Can you share the DB data from your website https://hayroo-1ynt.onrender.com, So that I can do it in my local.

payment methode

how i can delete the payment and submit without BRAINTREE methode just fill the email , number