mohamedsamara / mern-ecommerce

:balloon: Fullstack MERN Ecommerce Application

MERN Ecommerce

Description

An ecommerce store built with MERN stack, and utilizes third party API's. This ecommerce store enable three main different flows or implementations:

1. Buyers browse the store categories, products and brands
2. Sellers or Merchants manage their own brand component
3. Admins manage and control the entire store components

• features:
  • Node provides the backend environment for this application
  • Express middleware is used to handle requests, routes
  • Mongoose schemas to model the application data
  • React for displaying UI components
  • Redux to manage application's state
  • Redux Thunk middleware to handle asynchronous redux actions

Quickstart Guide

To run this project locally you can use docker compose provided in the repository. Here is a guide on how to run this project locally using docker compose.

Clone the repository

$ git clone https://github.com/mohamedsamara/mern-ecommerce.git

Edit the dockercompose.yml file and update the the values for MONGO_URI and JWT_SECRET

Then simply start the docker compose:

$ docker compose -f dockercompose.yml up

Database Seed

• The seed command will create an admin user in the database
• The email and password are passed with the command as arguments
• Like below command, replace brackets with email and password.
• For more information, see code here

npm run seed:db [email-***@****.com] [password-******] // This is just an example.

Demo

This application is deployed on Vercel Please check it out 😄 here.

See admin dashboard demo

Install

Some basic Git commands are:

$ git clone https://github.com/mohamedsamara/mern-ecommerce.git
$ cd project
$ npm install

Start development

$ npm run dev

Simple build for production

$ npm run build

Run build for production

$ npm start

Languages & tools

• Node

• Express

• Mongoose

• React

• Webpack

Code Formatter

• Add a .vscode directory
• Create a file settings.json inside .vscode
• Install Prettier - Code formatter in VSCode
• Add the following snippet:

    {
      "editor.formatOnSave": true,
      "prettier.singleQuote": true,
      "prettier.arrowParens": "avoid",
      "prettier.jsxSingleQuote": true,
      "prettier.trailingComma": "none",
      "javascript.preferences.quoteStyle": "single",
    }

mern-ecommerce's Issues

Enable Admins to edit, delete, product or a brand

MongoDB `facebookId_1` duplicate `null` key

Mongod version: 4.4.2

MongoError: E11000 duplicate key error collection: mern-ecommerce-test.users index: facebookId_1 dup key: { facebookId: null }
    at Function.create (/home/sneknotsnake/reactjs/mern-ecommerce/node_modules/mongodb/lib/core/error.js:57:12)
    at toError (/home/sneknotsnake/reactjs/mern-ecommerce/node_modules/mongodb/lib/utils.js:123:22)
    at /home/sneknotsnake/reactjs/mern-ecommerce/node_modules/mongodb/lib/operations/common_functions.js:265:39
    at handler (/home/sneknotsnake/reactjs/mern-ecommerce/node_modules/mongodb/lib/core/sdam/topology.js:942:24)
    at /home/sneknotsnake/reactjs/mern-ecommerce/node_modules/mongodb/lib/cmap/connection_pool.js:350:13
    at handleOperationResult (/home/sneknotsnake/reactjs/mern-ecommerce/node_modules/mongodb/lib/core/sdam/server.js:558:5)
    at MessageStream.messageHandler (/home/sneknotsnake/reactjs/mern-ecommerce/node_modules/mongodb/lib/cmap/connection.js:277:5)
    at MessageStream.emit (events.js:315:20)
    at MessageStream.EventEmitter.emit (domain.js:467:12)
    at processIncomingData (/home/sneknotsnake/reactjs/mern-ecommerce/node_modules/mongodb/lib/cmap/message_stream.js:144:12)
    at MessageStream._write (/home/sneknotsnake/reactjs/mern-ecommerce/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 Socket.ondata (internal/streams/readable.js:719:22)
    at Socket.emit (events.js:315:20)
    at Socket.EventEmitter.emit (domain.js:467:12)
    at addChunk (internal/streams/readable.js:309:12)
    at readableAddChunk (internal/streams/readable.js:284:9)
    at Socket.Readable.push (internal/streams/readable.js:223:10)
    at TCP.onStreamRead (internal/stream_base_commons.js:188:23) {
  driver: true,
  index: 0,
  code: 11000,
  keyPattern: { facebookId: 1 },
  keyValue: { facebookId: null }
}

Steps to reproduce (at least in my machine):

• Create two accounts that don't use facebook

I was able to solve this problem using this stackoverflow answer, but IDK why is this only happening to me.

regarding the .env file

how to set the values of
PORT & BASE_SERVER_URL & BASE_API_URL & BASE_CLIENT_URL.

i am running the app on localhost.

i want the app to run on http://localhost:3000/ (frontend)
and the api call to be answered from 5000 (backend)

what value of base client url to be used??
i am getting error 404 not found
please help me out thanks in advance

Do you have a documentation for backend? much

Do you have documentation for the backend? like a postman api documentation

Replace @babel/polyfill with core-js

@babel/polyfill is deprecated and there is an opportunity to migrate to core-js for better maintainability and import optimizations.

for admin

do u have any admin dashboard for this webapp

ValidationError: Can't run the project locally

I've cloned the repo and added those API keys as said in the documentation.

But the application doesn't seem to run and showing me this error:

can someone tell me where am I going wrong?

how to access admin panel

@mohamedsamara pls help me to get the admin panel

Cart Item does not appear properly when checkout with items filled with cart list.

Steps to Reproduce:
Add items with full stack of the cart.

Now, Click on Proceed to checkout.
Then, Click on Login (I did via Google)
Verify, Cart number at the top.

Items are getting disappeared from the cart as well

Expected, All the Item after login should remain the same after log

Decimal value of price is getting upto 14 decimal place.

When adding decal price in the cart then the calculation gets upto 14 decimal place that should be 2 decimal place as per standard pricing.

Request to implement Payment solution

Hi Mohamed.,
First of all thanks for your continued contribution to this repository in the pandemic time and your busy work schedule. For this repository, many of them are recognizing and forking to work on further feature implementation to fulfill their business needs and still facing some challenges to implementing features such as payment, Shipment processing, Product search, and filtering, etc out of this Payment Integration is more important than others. If you implement this it would be more helpful to our followers.

• Add a payment method solution to enable checkout and collecting payments
• Associate each Merchant with each brand and payment account

Dear Followers in this Repository Please raise a hand and thumps up who are all looking for a payment solution

Thanks.

Enhancement: Adding "My Cart" | "Wishlist" | Recently Viewed tab on cart popup.

Adding all necessary tabs that may have the best probability of the user buying them earliest. It is an intuitive approach that can help users to make decisions based on their choice at the top of the website.

Example:

Add a payment method solution to enable checkout and collecting payments

This is a placeholder feature task for payment solution.

• Looking into Stripe Connect.
• Merchants need to connect their account to the MERN store stripe account in order to collect payments when customer buy their products.
• Merchants brand and products are inactive when merchant stripe account is not connected.
• We need to add/create payment fields to order documents - DB.
• Need regular checkout with stripe on the Frontend.

Enable Merchants to edit, delete their own brand and products

The User is unable to search orders with orderID after completing the order placement process.

The user is unable to search orders with orderID after completing the order placement process.

Steps to reproduce

1. User adds any product to the cart.
   
2. User clicks on "Place Order" and copy the orderID.
   
3. User clicks on manage order and searches the order by entering copied orderID while placing the order.
   
4. On clicking search verify the list of orders in the search result.
   

Expected List of all orders (Combined with orderID) should appear in the search result.
Actual Nothing is shown on the search result.

Security Issue

Hi sir this is the issue i have reported via huntr dev

Description

it can be possible to perform a clickjacking attack due to the lack of frame restrictions. The application does not set the response header X-Frame-Options: DENY.

Proof of Concept

<title>Clickjack test page</title> <iframe src="https://mern-store-80202.herokuapp.com/" width="500" height="500"></iframe>

save the script as clickjacking .html and page will render in iframes

Impact

it is possible for a page controlled by an attacker to load the website within an iframe. This will enable a clickjacking attack, in which the attacker's page overlays the target application's interface with a different interface provided by the attacker

configure X-FRAME-OPTIONS as same origin by default.

I think so you have understand issue please make issue as valid in huntr dev attaching link below

https://www.huntr.dev/bounties/f2ad0328-a45c-40e7-8a4f-9529563470fa/
Thanks
Abel

npm start error

I am getting the following error when I tried to start the application

mern-ecommerce/server/routes/api/product.js:292
if (!productDoc || productDoc?.brand?.isActive === false) {
SyntaxError: Unexpected token '.'

Could you please help me.

Also help me in migrating the mongo db data to my local system

Incorrect calculation of tax shown on the order summary when the user places an order with multiple items or more than 1 quantity

Incorrect calculations of tax shown on the order summary when the user places an order with multiple items or more than 1 quantity.

Steps to reproduce

1. User opens a product page and adds more than 1 quantity.
2. User clicks on add to cart button.
3. The user opens another product page and adds that product to the cart.
4. User clicks on "Place Order" and "Your Order" list will open.
5. User clicks on the order to see the summary.
6. Verify the tax on the order is calculated.

Actual: A static tax is calculated at the order level.
Expected Tax should be calculated on the item level and their quality based on cost.

Next.js

Please how to adopt Next.js into this app ?

Shop page (Product list) ui styles

Describe the bug

• On shop page (product list): Product link container is short like in screenshot attached. When keyboard tab the list, the outline border shows in different heights depending on each product content. It needs to contain the entire product link container.
• Bottom details (Price * review stars) are not aligned for all products in the list, same reason above (content is different and longer).

To Reproduce
Steps to reproduce the behavior:

1. Go to https://mern-store-80202.herokuapp.com/shop
2. See issues appearing in the product list

Screenshots

S3 keys/setup is not mentioned in .env.example

my questions related to project and structure

I just tested this project and it's really well setup. Just amazing! I wanted to ask a few questions as I couldn't find it online. I am a junior developer so I wanted to level up.

1. I saw that you structured it really well, the redux part and everything. But I did not understand, why didn't you keep the client and server fully separate? As I can see the dependencies for both server and client are both in the same package.json and there a few other places in the root where you have have configured it so that it could work nicely. I have made quite a number of applications but I haven't used that practice. a. Can you tell me why did you go for that? b. What are the best practices to go about this and industry standards in big production level applications?

2. If someone had to deploy this to AWS which requires server and client to be separate like a lot of other sites, how should one go about segregating it fully and deploy it to AWS EC2? I just want to know the process as a developer.

3. I don't have enough practice with webpack and other super important packages and it's usage. Can you suggest some resources so that I can become more proficient.

Let me know wherever I am wrong or if my knowledge or assumptions about anything is wrong. Feel free to answer these whenever you are free. If someone else feels that they have strong (and right) knowledge about this, go ahead and reply, just mention the ques number with it for better reference.

Thanks again! @mohamedsamara

There is some issues in the calculation part when user initiates cancel order.

Steps to reproduce

1. User adds product/item into the cart.
   
2. User places the order and click on order ID to view the order details.
   
3. Verify the calculations before initiating cancel any order from the Order List. (56.8$ in my case)
   
4. Calculations after cancellation show incorrect behavior.
   Before cancellation
   
   After cancellation
   
   After refreshing the page
   

Expected: The calculation should change just after the confirmation with the cancellation part of an order.
Actual: Calculation changes when the user refreshes the page.

After clear order, website fails to appear.

After I click cancel order, page turns to full white with no content. Also can you integrate payment with stripe or something like that with sandbox

Merchant Accounts

Description:

1. Admins will be able to view, approve or reject merchants requests.
2. Upon approval:
   a. An email should be sent to merchants to allow them to sign in to see their components.
   b. Merchant brand must be associated with the store brands.
3. Upon rejection, nothing happens.

Note:

• Merchant db model will be used to collect merchant business details
• Components and apis need to be role based authorized, meaning that merchants will only view and modify their brand's products and brand details.

I cant start de application with token problem

[nodemon] starting node server
/Users/eduardocruz/Public/projetos/ecross/server/routes/api/product.js:118
products: products.filter(item => item?.brand?.isActive === true)
^

SyntaxError: Unexpected token .

Wishlist and Cart Items get retain from my previous account when I create a new account.

Wishlist and cart item get retain from my previous account when I create a new account.

Steps to reproduce

1. Login with your existing account
2. Add few products to your wishlist and cart
   
3. logout the account and create another account.
   
4. Verify that account is created
   
5. Click on the wishlist tab of the dashboard.
   
6. Verify the wishlist item and cart item.
   
   

Expected: Wishlist and cart should be empty after creating the new account
Actual Wishlist and cart item get retain items from the previous account.

admin area

hi, this is project beatuful. i didn't find admin area on demo link.

tell me admin links or give me example mongo backup.

thanks o lot

Great project! Please keep it going 👋🙌

I've learnt a few new things about mongodb Schema modeling and nodejs api backend set up simply by testing your project, thanks a lot! Please keep it going!

product can't be uploaded from admin panel

hello sir, i trying to post product from admin panel but it can't be uploaded and showing me error 400. and also guide me from where i can to admin dashborad..

product's image upload error

i am not able to upload image to s3 bucket , product is not not created whenever i attach a image to it. please help

intergrete with paypal payments?

how to intergret with paypal payments?
and can you upgrade react to 17 version?

SIGNUP ERROR

i used these ports, do i need to change something? @karthikeyana

Product from the cart gets disappear when user use another tab to adds new product to the cart

Product from the cart gets disappears when the user uses another tab to adds a new product to the cart.
It happens when the user uses another tab that already open before adding a product to the cart from the first tab.

Steps to reproduce

1. User opens a product page. (Says "Tab 1")
2. User opens another product page in a new tab. (Says "Tab 2")
3. User adds item/product to the cart from the "Tab 2".
   
4. User adds another item to the cart from the cart 2.
   

Actual Item/Product added from the "Tab 1" doesn't show on "Tab 2".
Expected Item/product should be updated with both the item added into the cart.

Note

1. After clicking "Continue", Both items do not get appear in the cart.
2. After clicking "Place Order", No warning shown to the user.

Where to find Customer Orders in Admin Dashboard and change its status

Hi,

I am not able to see customers orders in Admin or Merchant Dashboard. Is there any way to see pending orders of customer and change it status?

how do i add the base api key, it is showing an error

Error: Unknown authentication strategy "jwt"

after sign-in, and willing to perform various actions but this error will not allow me to perform.

Fetch brand API throwing 400 bad request error

Can anyone help me with the configurations? I'm a beginner trying to understand the full stack system.

• I don't see the end points for these APIs and wanted to understand how the mongoose connection was working?
• Why is the Brand and Product fetching API call failing for me in my local environment but category and other APIs are working?

Why do we need all the keys to run the project?

I have been trying to run the project on my machine and it is not compiling without all the keys.

Admin Order details

from user prospective , If I've ordered some item and i can see that on orders but from admin/merchant prospective, i'm unable to see what user has ordered for him/her and also where can i see the contact us details data?
Thanks in advance!

Found a possible security concern

Hey there!

I belong to an open source security research community, and a member (@ktg9) has found an issue, but doesn’t know the best way to disclose it.

If not a hassle, might you kindly add a SECURITY.md file with an email, or another contact method? GitHub recommends this best practice to ensure security issues are responsibly disclosed, and it would serve as a simple instruction for security researchers in the future.

Thank you for your consideration, and I look forward to hearing from you!

(cc @huntr-helper)

Add brand is not imported in brand page

Feature Enhancement Done: Enable Admins and Merchants to upload product image

Hi Mohamedsamara.,
   
     Happy to Chat with you., This project is very much helpful to every who working on E-Commerce projects and MERN Stack Developers and More interesting to everyone. I have Based on your What's Next: features I have implemented **Enable Admins and Merchants to upload product images** Feature on front and backend by followed by your code [**Attached Screens**]. if you find useful you review and merge with your existing code and I'm willing to contribute to this project with further updates and feature enhancement things if you are fine. For more details, you share your mail/chat id. 

Files worked/update

Thanks.
Karthikeyan

On Adding account details, The next step to manage order doesn't get open itself.

As a user click save the details. We should take him/her to the next step itself.

admin side password

Sanitize and validate review inputs

Sanitize and validate reviews input on frontend & backend. Create helper to reuse it in the entire application.

There is an unnecessary gap between user review and add review

There is an unnecessary gap between user review and add review

Expected There should not be an unnecessary gap between user review and add review
Actual there is a huge gap between both user review and add review

Add AverageRatings to product shop/list

Hey Mohamed, first of all thank you so much for this amazing project, Its really helpful for project we are submitting for our sem, we have made few changes but was unable to fetch averageRatings to product shop(like any other ecommerce website). Its really necessary part of the project, will you please add this feature, it will just take you a few minutes. Thanking in advance:)

SIGNUP SELL

Hi
how does this page work a success message but I do not receive anything ?
https://mern-store-80202.herokuapp.com/sell

Order details

Hi There ,

First of all thank you for putting this website on GitHub , this is really helpful :)

Well my issue is that i can't see all orders at a time , i have to manually search the orders from the order id and even I've to get that order id from user dashboard.

Thanks in advance!