{"id":20479365,"url":"https://github.com/seanmayer/mern-example-project","last_synced_at":"2026-04-11T17:03:29.768Z","repository":{"id":135813002,"uuid":"436139006","full_name":"seanmayer/mern-example-project","owner":"seanmayer","description":"Fullstack - React.js application with Node.js, Express.js \u0026 MongoDB (MERN), JWT","archived":false,"fork":false,"pushed_at":"2022-04-20T06:16:31.000Z","size":2008,"stargazers_count":2,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-01-16T03:49:49.413Z","etag":null,"topics":["express","expressjs","jwt","nodejs","react"],"latest_commit_sha":null,"homepage":"","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/seanmayer.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":"2021-12-08T06:20:50.000Z","updated_at":"2024-12-22T11:42:26.000Z","dependencies_parsed_at":null,"dependency_job_id":"b1fabd2d-3ab5-4fe8-a9a6-a76cd1bc45af","html_url":"https://github.com/seanmayer/mern-example-project","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/seanmayer%2Fmern-example-project","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/seanmayer%2Fmern-example-project/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/seanmayer%2Fmern-example-project/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/seanmayer%2Fmern-example-project/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/seanmayer","download_url":"https://codeload.github.com/seanmayer/mern-example-project/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":242048574,"owners_count":20063404,"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":["express","expressjs","jwt","nodejs","react"],"created_at":"2024-11-15T15:43:38.285Z","updated_at":"2025-12-31T01:03:12.203Z","avatar_url":"https://github.com/seanmayer.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# MERN Project Example\nBuilding a fullstack React.js application with Node.js, Express.js \u0026amp; MongoDB (MERN)\n\n- MongoDB - document database\n- Express(.js) - Node.js web framework\n- React(.js) - a client-side JavaScript framework\n- Node(.js) - the premier JavaScript web server\n\n## Setting up a NodeJS Express Project\n\n1. `npm init --prefix backend`\n2. `npm install --save express body-parser --prefix backend`\n3. `npm install --save-dev nodemon --prefix backend`\n4. `npm start --prefix backend`\n5. `npm install --save uuid --prefix backend`\n6. `npm install --save express-validator --prefix backend`\n7. `npm install --save axios --prefix backend`\n8. `npm install dotenv --save --prefix backend`\n9. `npm install --save mongoose --prefix backend`\n10. `npm install --save mongoose-unique-validator --prefix backend`\n11. `npm install --save multer --prefix backend`\n12. `npm install --save bcryptjs --prefix backend`\n13. `npm install --save jsonwebtoken --prefix backend`\n\n### Finally... (for local development)\n\n1. `npm start --prefix backend`\n2. `npm start --prefix frontend` (don't forget to change package.json from `\"start\": \"node app.js\"` to `\"start\": \"nodemon app.js\"`)\n\n## Testing Tools\n\n### Backend testing\n\n- Postman used for Node.js API testing\n\n### Frontend testing\n\n1. Test frontend locally -\u003e Simple local server -\u003e `npm install -g serve --prefix frontend` (can serve static site)\n2. `cd frontend/build/`\n3. `serve` \n\n## Security Considerations\n\n### JSON Web Token (JWT) is an open standard (RFC 7519) used for Authentication\n\n- JWT uses HMAC alorifthm by default (HS256)\n- Involves a combination of a hashing function and one (secret) key \n- Shared between the two parties used to generate the hash that will serve as the signature\n- Great care must be taken to protecting the key, becuase the same key is used to generate the signture and to perform validation\n\n### Token is stored in local storage \n\n- Cross-site scripting (XSS) vunerability, this is vunerable as the local storage used to persist the tokens is accessible to all JS on the same domain\n- To note: React does have some protective measures in place for XSS\n\n## Deployment\n\n- Used dotenv to store environment variables for frontend\n- Backend is using Heroku to source configured environment variables\n\n### Frontend (React) - DEV testing\n\n1. `npm run build` -\u003e Optimises, provides only essentials (strips out debugging)\n2. New build folder will be created with all files needed to deploy\n\n### Backend (Express.js) - DEV testing\n\n- Nodemon is used as tool that helps develop node.js based applications by automatically restarting the node application when file changes in the directory detected. (not to use in production environment)\n\n### Backend (Express.js) - Heroku\n\n- Create heroku app and use git to push changes 😀 \n\n### Standalone SPA Frontend (React) - Production with Google Firebase\n\n1. `sudo npm install -g firebase-tools --prefix frontend`\n2. `firbase login`\n3. `firebase init` configuration below:\n\n- `Which Firebase features do you want to set up for this directory? Press Space to select features, then Enter to confirm your choices` -\u003e `Hosting: Configure files for Firebase Hosting and (optionally) set up GitHub Action deploys`\n- `Please select an option:` -\u003e `Create a new project`\n- `What do you want to use as your public directory?` -\u003e `build`\n- `? Configure as a single-page app (rewrite all urls to /index.html)?` -\u003e `Yes`\n\n4. `firebase deploy` \n\n### Combine Frontend \u0026 Backend (React) - Heroku\n\n1. `npm run build --prefix frontend`\n2. Create `public` folder in backend directory\n3. Copy `frontend/build` contents to `backend/public`\n4. `git add .` \n5. `git commit -m \"added react frontend\"`\n6. `git push heroku master`\n\n#### Optimisation \n\n- Code splitting is used to \"lazy-load\" to create code chunks as and when a user needs a certain component, this increases performance. \n\n##### Example\n\nUsage of Suspense -\u003e `import React, { Suspense } from \"react\";` \n\nLazy load component -\u003e `const Users = React.lazy(() =\u003e import(\"./user/pages/Users\"));`\n\nSuspense is used to handle loading of components:\n\n```\nreturn (\n    \u003cAuthContext.Provider\n      value={{\n        isLoggedIn: !!token,\n        token: token,\n        userId: userId,\n        login: login,\n        logout: logout,\n      }}\n    \u003e\n      \u003cRouter\u003e\n        \u003cMainNavigation /\u003e\n        \u003cmain\u003e\n          \u003cSuspense\n            fallback={\n              \u003cdiv className=\"center\"\u003e\n                \u003cLoadingSpinner /\u003e\n              \u003c/div\u003e\n            }\n          \u003e\n            {routes}\n          \u003c/Suspense\u003e\n        \u003c/main\u003e\n      \u003c/Router\u003e\n    \u003c/AuthContext.Provider\u003e\n  );\n};\n```\n\n\n\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fseanmayer%2Fmern-example-project","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fseanmayer%2Fmern-example-project","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fseanmayer%2Fmern-example-project/lists"}