https://github.com/kernix13/music-store-mern-ecommerce

MERN stack ecommerce app for music instruments and gear. Users can create an account, add items to their cart and checkout and pay with PayPal or a credit card. Users can also edit their profile. Admins can edits users, products, and orders.
https://github.com/kernix13/music-store-mern-ecommerce

expressjs mongodb mongodb-atlas mongoose nodejs reactjs

Last synced: 18 days ago
JSON representation

MERN stack ecommerce app for music instruments and gear. Users can create an account, add items to their cart and checkout and pay with PayPal or a credit card. Users can also edit their profile. Admins can edits users, products, and orders.

• Host: GitHub
• URL: https://github.com/kernix13/music-store-mern-ecommerce
• Owner: Kernix13
• Created: 2023-08-05T16:15:55.000Z (over 1 year ago)
• Default Branch: main
• Last Pushed: 2023-10-19T10:12:47.000Z (over 1 year ago)
• Last Synced: 2024-11-09T22:25:00.544Z (3 months ago)
• Topics: expressjs, mongodb, mongodb-atlas, mongoose, nodejs, reactjs
• Language: JavaScript
• Homepage:
• Size: 1.14 MB
• Stars: 1
• Watchers: 1
• Forks: 0
• Open Issues: 3
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# Vite MERN Stack Ecommerce App

The [live version](https://musicstore-p45e.onrender.com/) uses Render.com.

## Setup and run

Create `.env`, copy the code in `.env.sample` and replace the values with your values. Then run:

```sh

# in frontend:

npm install

# in root:

npm install

npm run dev

```

Then open the app at `http://localhost:5173/`.

You can add custom css in `frontend/src/assets/styles/index.css`. That is the file that has the CSS for the dark theme of this app.

## Seeding the local Database

1. Check the file in the backend called `seeder.js`

2. Go into root `package.json` add add 2 scripts: `npm run data:import` and `npm run data:destroy`

3. `node backend/seeder` will run the file but there are 2 functions in it

   1. to run `destroyData` use `node backend/seeder -d`, and

   2. no `-d` for `importData`

## Code removed

### Test PayPal

This is a function to use for testing to simulate a successful payment followed by the Button jsx:

```js

async function onApproveTest() {

  await payOrder({ orderId, details: { payer: {} } });

  refetch();

  toast.success('Order is paid');

}

```

```jsx

  Test Pay Order

```

### Edit Reviews

I needed the following code to edit a dummy review I created and that I did not want deployed. It is tied to admin functionality, but it should be a feature for Users:

```jsx

// Add state for the reviews in ProductEdit.jsx:

const [reviews, setReviews] = useState([]);

// create the function for the reviews

function reviewHandler(reviewId) {

  return function ({ target: { value } }) {

    setReviews(

      reviews.map(review => {

        if (review._id === reviewId) {

          return {

            ...review,

            comment: value,

          };

        } else {

          return review;

        }

      })

    );

  };

}

// Finally, add the following JSX:

{

  reviews.length

    ? reviews.map((review, index) => (

        

          Review {index + 1}

          

        

      ))

    : null;

}

```

Also in ProductEdit.jsx add:

1. `reviews` to `updateProduct` in `submitHandler`

2. In `useEffect` add `setReviews(product.reviews);`.

In `productController.js`:

3. In `updateProduct` add `reviews` to the destructuring of `req.body` and

4. in the conditional add `product.reviews = reviews;`.

## Miscellaneous

...notes here