{"id":28154054,"url":"https://github.com/spongejump/mern-shop","last_synced_at":"2025-05-15T06:12:45.921Z","repository":{"id":282613024,"uuid":"790290833","full_name":"spongejump/mern-shop","owner":"spongejump","description":null,"archived":false,"fork":false,"pushed_at":"2024-04-22T16:00:52.000Z","size":1401,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-03-20T08:41:23.291Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/spongejump.png","metadata":{"files":{"readme":"readme.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2024-04-22T16:00:40.000Z","updated_at":"2024-08-17T02:50:17.000Z","dependencies_parsed_at":"2025-03-15T19:48:52.035Z","dependency_job_id":null,"html_url":"https://github.com/spongejump/mern-shop","commit_stats":null,"previous_names":["spongepump/mern-shop","spongejump/mern-shop"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/spongejump%2Fmern-shop","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/spongejump%2Fmern-shop/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/spongejump%2Fmern-shop/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/spongejump%2Fmern-shop/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/spongejump","download_url":"https://codeload.github.com/spongejump/mern-shop/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254283286,"owners_count":22045141,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2025-05-15T06:12:44.853Z","updated_at":"2025-05-15T06:12:45.914Z","avatar_url":"https://github.com/spongejump.png","language":"JavaScript","funding_links":["https://developer.paypal.com/"],"categories":[],"sub_categories":[],"readme":"# ProShop eCommerce Platform (v2)\n\n\u003e eCommerce platform built with the MERN stack \u0026 Redux.\n\n\u003cimg src=\"./frontend/public/images/screens.png\"\u003e\n\nThis project is part of my [MERN Stack From Scratch | eCommerce Platform](https://www.traversymedia.com/mern-stack-from-scratch) course. It is a full-featured shopping cart with PayPal \u0026 credit/debit payments.\n\nThis is version 2.0 of the app, which uses Redux Toolkit. The first version can be found [here](https://proshopdemo.dev)\n\n\u003c!-- toc --\u003e\n\n- [Features](#features)\n- [Usage](#usage)\n  - [Env Variables](#env-variables)\n  - [Install Dependencies (frontend \u0026 backend)](#install-dependencies-frontend--backend)\n  - [Run](#run)\n- [Build \u0026 Deploy](#build--deploy)\n  - [Seed Database](#seed-database)\n\n* [Bug Fixes, corrections and code FAQ](#bug-fixes-corrections-and-code-faq)\n  - [BUG: Warnings on ProfileScreen](#bug-warnings-on-profilescreen)\n  - [BUG: Changing an uncontrolled input to be controlled](#bug-changing-an-uncontrolled-input-to-be-controlled)\n  - [BUG: All file types are allowed when updating product images](#bug-all-file-types-are-allowed-when-updating-product-images)\n  - [BUG: Throwing error from productControllers will not give a custom error response](#bug-throwing-error-from-productcontrollers-will-not-give-a-custom-error-response)\n    - [Original code](#original-code)\n  - [BUG: Bad responses not handled in the frontend](#bug-bad-responses-not-handled-in-the-frontend)\n    - [Example from PlaceOrderScreen.jsx](#example-from-placeorderscreenjsx)\n  - [BUG: After switching users, our new user gets the previous users cart](#bug-after-switching-users-our-new-user-gets-the-previous-users-cart)\n  - [BUG: Passing a string value to our `addDecimals` function](#bug-passing-a-string-value-to-our-adddecimals-function)\n  - [BUG: Token and Cookie expiration not handled in frontend](#bug-token-and-cookie-expiration-not-handled-in-frontend)\n  - [BUG: Calculation of prices as decimals gives odd results](#bug-calculation-of-prices-as-decimals-gives-odd-results)\n  - [FAQ: How do I use Vite instead of CRA?](#faq-how-do-i-use-vite-instead-of-cra)\n    - [Setting up the proxy](#setting-up-the-proxy)\n    - [Setting up linting](#setting-up-linting)\n    - [Vite outputs the build to /dist](#vite-outputs-the-build-to-dist)\n    - [Vite has a different script to run the dev server](#vite-has-a-different-script-to-run-the-dev-server)\n    - [A final note:](#a-final-note)\n  * [License](#license)\n\n\u003c!-- tocstop --\u003e\n\n## Features\n\n- Full featured shopping cart\n- Product reviews and ratings\n- Top products carousel\n- Product pagination\n- Product search feature\n- User profile with orders\n- Admin product management\n- Admin user management\n- Admin Order details page\n- Mark orders as delivered option\n- Checkout process (shipping, payment method, etc)\n- PayPal / credit card integration\n- Database seeder (products \u0026 users)\n\n## Usage\n\n- Create a MongoDB database and obtain your `MongoDB URI` - [MongoDB Atlas](https://www.mongodb.com/cloud/atlas/register)\n- Create a PayPal account and obtain your `Client ID` - [PayPal Developer](https://developer.paypal.com/)\n\n### Env Variables\n\nRename the `.env.example` file to `.env` and add the following\n\n```\nNODE_ENV = development\nPORT = 5000\nMONGO_URI = your mongodb uri\nJWT_SECRET = 'abc123'\nPAYPAL_CLIENT_ID = your paypal client id\nPAGINATION_LIMIT = 8\n```\n\nChange the JWT_SECRET and PAGINATION_LIMIT to what you want\n\n### Install Dependencies (frontend \u0026 backend)\n\n```\nnpm install\ncd frontend\nnpm install\n```\n\n### Run\n\n```\n\n# Run frontend (:3000) \u0026 backend (:5000)\nnpm run dev\n\n# Run backend only\nnpm run server\n```\n\n## Build \u0026 Deploy\n\n```\n# Create frontend prod build\ncd frontend\nnpm run build\n```\n\n### Seed Database\n\nYou can use the following commands to seed the database with some sample users and products as well as destroy all data\n\n```\n# Import data\nnpm run data:import\n\n# Destroy data\nnpm run data:destroy\n```\n\n```\nSample User Logins\n\nadmin@email.com (Admin)\n123456\n\njohn@email.com (Customer)\n123456\n\njane@email.com (Customer)\n123456\n```\n\n---\n\n# Bug Fixes, corrections and code FAQ\n\nThe code here in the main branch has been updated since the course was published to fix bugs found by students of the course and answer common questions, if you are looking to compare your code to that from the course lessons then\nplease refer to the [originalcoursecode](https://github.com/bradtraversy/proshop-v2/tree/originalCourseCode) branch of this repository.\n\nThere are detailed notes in the comments that will hopefully help you understand\nand adopt the changes and corrections.\nAn easy way of seeing all the changes and fixes is to use a note highlighter\nextension such as [This one for VSCode](https://marketplace.visualstudio.com/items?itemName=wayou.vscode-todo-highlight) or [this one for Vim](https://github.com/folke/todo-comments.nvim) Where by you can easily list all the **NOTE:** and **FIX:** tags in the comments.\n\n### BUG: Warnings on ProfileScreen\n\nWe see the following warning in the browser console..\n\n`\u003ctD\u003e cannot appear as a child of \u003ctr\u003e.`\n\nand\n\n`warning: Received 'true' for a non-boolean attribute table.`\n\n\u003e Code changes can be seen in [ProfileScreen.jsx](https://github.com/bradtraversy/proshop-v2/tree/main/frontend/src/screens/ProfileScreen.jsx)\n\n### BUG: Changing an uncontrolled input to be controlled\n\nIn our SearchBox input, it's possible that our `urlKeyword` is **undefined**, in\nwhich case our initial state will be **undefined** and we will have an\nuncontrolled input initially i.e. not bound to state.\nIn the case of `urlKeyword` being **undefined** we can set state to an empty\nstring.\n\n\u003e Code changes can be seen in [SearchBox.jsx](https://github.com/bradtraversy/proshop-v2/tree/main/frontend/src/components/SearchBox.jsx)\n\n### BUG: All file types are allowed when updating product images\n\nWhen updating and uploading product images as an Admin user, all file types are allowed. We only want to upload image files. This is fixed by using a fileFilter function and sending back an appropriate error when the wrong file type is uploaded.\n\nYou may see that our `checkFileType` function is declared but never actually\nused, this change fixes that. The function has been renamed to `fileFilter` and\npassed to the instance of [ multer ](https://github.com/expressjs/multer#filefilter)\n\n\u003e Code changes can be seen in [uploadRoutes.js](https://github.com/bradtraversy/proshop-v2/tree/main/backend/routes/uploadRoutes.js)\n\n### BUG: Throwing error from productControllers will not give a custom error response\n\nIn section **3 - Custom Error Middleware** we throw an error from our\n`getProductById` controller function, with a _custom_ message.\nHowever if we have a invalid **ObjectId** as `req.params.id` and use that to\nquery our products in the database, Mongoose will throw an error before we\nreach the line of code where we throw our own error.\n\n#### Original code\n\n```js\nconst getProductById = asyncHandler(async (req, res) =\u003e {\n  const product = await Product.findById(req.params.id);\n  if (product) {\n    return res.json(product);\n  }\n  // NOTE: the following will never run if we have an invalid ObjectId\n  res.status(404);\n  throw new Error('Resource not found');\n});\n```\n\nInstead what we can do is if we do want to check for an invalid ObjectId is use\na built in method from Mongoose - [isValidObjectId](\u003chttps://mongoosejs.com/docs/api/mongoose.html#Mongoose.prototype.isValidObjectId()\u003e)\nThere are a number of places in the project where we may want to check we are\ngetting a valid ObjectId, so we can extract this logic to it's own middleware\nand drop it in to any route handler that needs it.  \nThis also removes the need to check for a cast error in our errorMiddleware and\nis a little more explicit in checking for such an error.\n\n\u003e Changes can be seen in [errorMiddleware.js](https://github.com/bradtraversy/proshop-v2/tree/main/backend/middleware/errorMiddleware.js), [productRoutes.js](https://github.com/bradtraversy/proshop-v2/tree/main/backend/routes/productRoutes.js), [productController.js](https://github.com/bradtraversy/proshop-v2/tree/main/backend/controllers/productController.js) and [checkObjectId.js](https://github.com/bradtraversy/proshop-v2/tree/main/backend/middleware/checkObjectId.js)\n\n### BUG: Bad responses not handled in the frontend\n\nThere are a few cases in our frontend where if we get a bad response from our\nAPI then we try and render the error object.\nThis you cannot do in React - if you are seeing an error along the lines of\n**Objects are not valid as a React child** and the app breaks for you, then this\nis likely the fix you need.\n\n#### Example from PlaceOrderScreen.jsx\n\n```jsx\n\u003cListGroup.Item\u003e\n  {error \u0026\u0026 \u003cMessage variant='danger'\u003e{error}\u003c/Message\u003e}\n\u003c/ListGroup.Item\u003e\n```\n\nIn the above code we check for a error that we get from our [useMutation](https://redux-toolkit.js.org/rtk-query/usage/mutations)\nhook. This will be an object though which we cannot render in React, so here we\nneed the message we sent back from our API server...\n\n```jsx\n\u003cListGroup.Item\u003e\n  {error \u0026\u0026 \u003cMessage variant='danger'\u003e{error.data.message}\u003c/Message\u003e}\n\u003c/ListGroup.Item\u003e\n```\n\nThe same is true for [handling errors from our RTK queries.](https://redux-toolkit.js.org/rtk-query/usage/error-handling)\n\n\u003e Changes can be seen in:-\n\u003e\n\u003e - [PlaceOrderScreen.jsx](https://github.com/bradtraversy/proshop-v2/tree/main/frontend/src/screens/PlaceOrderScreen.jsx)\n\u003e - [OrderScreen.jsx](https://github.com/bradtraversy/proshop-v2/tree/main/frontend/src/screens/OrderScreen.jsx)\n\u003e - [ProductEditScreen.jsx](https://github.com/bradtraversy/proshop-v2/tree/main/frontend/src/screens/admin/ProductEditScreen.jsx)\n\u003e - [ProductListScreen.jsx](https://github.com/bradtraversy/proshop-v2/tree/main/frontend/src/screens/admin/ProductListScreen.jsx)\n\n### BUG: After switching users, our new user gets the previous users cart\n\nWhen our user logs out we clear **userInfo** and **expirationTime** from local\nstorage but not the **cart**.  \nSo when we log in with a different user, they _inherit_ the previous users cart\nand shipping information.\n\nThe solution is to simply clear local storage entirely and so remove the\n**cart**, **userInfo** and **expirationTime**.\n\n\u003e Changes can be seen in:-\n\u003e\n\u003e - [authSlice.js](https://github.com/bradtraversy/proshop-v2/tree/main/frontend/src/slices/authSlice.js)\n\u003e - [cartSlice.js](https://github.com/bradtraversy/proshop-v2/tree/main/frontend/src/slices/cartSlice.js)\n\u003e - [Header.jsx](https://github.com/bradtraversy/proshop-v2/tree/main/frontend/src/components/Header.jsx)\n\n### BUG: Passing a string value to our `addDecimals` function\n\nOur `addDecimals` function expects a **Number** type as an argument so calling\nit by passing a **String** type as the argument could produce some issues.\nIt kind of works because JavaScript type coerces the string to a number when we\ntry to use mathematic operators on strings. But this is prone to error and can\nbe improved.\n\n\u003e Changes can be seen in:\n\u003e\n\u003e - [cartUtils.js](https://github.com/bradtraversy/proshop-v2/tree/main/frontend/src/utils/cartUtils.js)\n\u003e - [calcPrices.js](https://github.com/bradtraversy/proshop-v2/tree/main/backend/utils/calcPrices.js)\n\n### BUG: Token and Cookie expiration not handled in frontend\n\nThe cookie and the JWT expire after 30 days.\nHowever for our private routing in the client our react app simply trusts that if we have a user in local storage, then that user is authenticated.\nSo we have a situation where in the client they can access private routes, but the API calls to the server fail because there is no cookie with a valid JWT.\n\nThe solution is to wrap/customize the RTK [baseQuery](https://redux-toolkit.js.org/rtk-query/usage/customizing-queries#customizing-queries-with-basequery) with our own custom functionality that will log out a user on any 401 response\n\n\u003e Changes can be seein in:\n\u003e\n\u003e - [apiSlice.js](https://github.com/bradtraversy/proshop-v2/tree/main/frontend/src/slices/apiSlice.js)\n\nAdditionally we can remove the following code:\n\n```js\nconst expirationTime = new Date().getTime() + 30 * 24 * 60 * 60 * 1000; // 30 days\nlocalStorage.setItem('expirationTime', expirationTime);\n```\n\nfrom our [authSlice.js](https://github.com/bradtraversy/proshop-v2/tree/main/frontend/src/slices/authSlice.js) as it's never\nactually used in the project in any way.\n\n### BUG: Calculation of prices as decimals gives odd results\n\nJavaSCript uses floating point numbers for decimals which can give some funky\nresults for example:\n\n```js\n0.1 + 0.2; // 0.30000000000000004 🤯\n```\n\nOr a more specific example in our application would be that our airpods have a\n`price: 89.99` and if we do:\n\n```js\n3 * 89.99; // 269.96999999999997\n```\n\nThe solution would be to calculate prices in whole numbers:\n\n```js\n(3 * (89.99 * 100)) / 100; // 269.97\n```\n\n\u003e Changes can be seein in:\n\u003e\n\u003e - [PlaceOrderScreen.jsx](https://github.com/bradtraversy/proshop-v2/tree/main/frontend/src/screens/PlaceOrderScreen.jsx)\n\u003e - [cartUtils.js](https://github.com/bradtraversy/proshop-v2/tree/main/frontend/src/utils/cartUtils.js)\n\u003e - [calcPrices.js](https://github.com/bradtraversy/proshop-v2/tree/main/backend/utils/calcPrices.js)\n\n### FAQ: How do I use Vite instead of CRA?\n\nOk so you're at **Section 1 - Starting The Frontend** in the course and you've\nheard cool things about [Vite](https://vitejs.dev/) and why you should use that\ninstead of [Create React App](https://create-react-app.dev/) in 2023.\n\nThere are a few differences you need to be aware of using Vite in place of CRA\nhere in the course after [scaffolding out your Vite React app](https://github.com/vitejs/vite/tree/main/packages/create-vite#create-vite)\n\n#### Setting up the proxy\n\nUsing CRA we have a `\"proxy\"` setting in our frontend/package.json to avoid\nbreaking the browser [Same Origin Policy](https://developer.mozilla.org/en-US/docs/Web/Security/Same-origin_policy) in development.\nIn Vite we have to set up our proxy in our\n[vite.config.js](https://vitejs.dev/config/server-options.html#server-proxy).\n\n```js\nimport { defineConfig } from 'vite';\nimport react from '@vitejs/plugin-react';\n\nexport default defineConfig({\n  plugins: [react()],\n  server: {\n    // proxy requests prefixed '/api' and '/uploads'\n    proxy: {\n      '/api': 'http://localhost:5000',\n      '/uploads': 'http://localhost:5000',\n    },\n  },\n});\n```\n\n#### Setting up linting\n\nBy default CRA outputs linting from eslint to your terminal and browser console.\nTo get Vite to ouput linting to the terminal you need to add a [plugin](https://www.npmjs.com/package/vite-plugin-eslint) as a\ndevelopment dependency...\n\n```bash\nnpm i -D vite-plugin-eslint\n\n```\n\nThen add the plugin to your **vite.config.js**\n\n```js\nimport { defineConfig } from 'vite';\nimport react from '@vitejs/plugin-react';\n// import the plugin\nimport eslintPlugin from 'vite-plugin-eslint';\n\nexport default defineConfig({\n  plugins: [\n    react(),\n    eslintPlugin({\n      // setup the plugin\n      cache: false,\n      include: ['./src/**/*.js', './src/**/*.jsx'],\n      exclude: [],\n    }),\n  ],\n  server: {\n    proxy: {\n      '/api': 'http://localhost:5000',\n      '/uploads': 'http://localhost:5000',\n    },\n  },\n});\n```\n\nBy default the eslint config that comes with a Vite React project treats some\nrules from React as errors which will break your app if you are following Brad exactly.\nYou can change those rules to give a warning instead of an error by modifying\nthe **eslintrc.cjs** that came with your Vite project.\n\n```js\nmodule.exports = {\n  env: { browser: true, es2020: true },\n  extends: [\n    'eslint:recommended',\n    'plugin:react/recommended',\n    'plugin:react/jsx-runtime',\n    'plugin:react-hooks/recommended',\n  ],\n  parserOptions: { ecmaVersion: 'latest', sourceType: 'module' },\n  settings: { react: { version: '18.2' } },\n  plugins: ['react-refresh'],\n  rules: {\n    // turn this one off\n    'react/prop-types': 'off',\n    // change these errors to warnings\n    'react-refresh/only-export-components': 'warn',\n    'no-unused-vars': 'warn',\n  },\n};\n```\n\n#### Vite outputs the build to /dist\n\nCreate React App by default outputs the build to a **/build** directory and this is\nwhat we serve from our backend in production.  \nVite by default outputs the build to a **/dist** directory so we need to make\nsome adjustments to our [backend/server.js](https://github.com/bradtraversy/proshop-v2/tree/main/backend/server.js)\nChange...\n\n```js\napp.use(express.static(path.join(__dirname, '/frontend/build')));\n```\n\nto...\n\n```js\napp.use(express.static(path.join(__dirname, '/frontend/dist')));\n```\n\nand...\n\n```js\napp.get('*', (req, res) =\u003e\n  res.sendFile(path.resolve(__dirname, 'frontend', 'build', 'index.html'))\n);\n```\n\nto...\n\n```js\napp.get('*', (req, res) =\u003e\n  res.sendFile(path.resolve(__dirname, 'frontend', 'dist', 'index.html'))\n);\n```\n\n#### Vite has a different script to run the dev server\n\nIn a CRA project you run `npm start` to run the development server, in Vite you\nstart the development server with `npm run dev`  \nIf you are using the **dev** script in your root pacakge.json to run the project\nusing concurrently, then you will also need to change your root package.json\nscripts from...\n\n```json\n    \"client\": \"npm start --prefix frontend\",\n```\n\nto...\n\n```json\n    \"client\": \"npm run dev --prefix frontend\",\n```\n\nOr you can if you wish change the frontend/package.json scripts to use `npm\nstart`...\n\n```json\n    \"start\": \"vite\",\n```\n\n#### A final note:\n\nVite requires you to name React component files using the `.jsx` file\ntype, so you won't be able to use `.js` for your components. The entry point to\nyour app will be in `main.jsx` instead of `index.js`\n\nAnd that's it! You should be good to go with the course using Vite.\n\n---\n\n## License\n\nThe MIT License\n\nCopyright (c) 2023 Traversy Media https://traversymedia.com\n\nPermission is hereby granted, free of charge, to any person obtaining a copy\nof this software and associated documentation files (the \"Software\"), to deal\nin the Software without restriction, including without limitation the rights\nto use, copy, modify, merge, publish, distribute, sublicense, and/or sell\ncopies of the Software, and to permit persons to whom the Software is\nfurnished to do so, subject to the following conditions:\n\nThe above copyright notice and this permission notice shall be included in\nall copies or substantial portions of the Software.\n\nTHE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\nIMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\nFITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\nAUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\nLIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\nOUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\nTHE SOFTWARE.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fspongejump%2Fmern-shop","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fspongejump%2Fmern-shop","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fspongejump%2Fmern-shop/lists"}