{"id":25564950,"url":"https://github.com/maxchistt/react-notes","last_synced_at":"2025-07-15T22:10:35.872Z","repository":{"id":42636257,"uuid":"352418261","full_name":"maxchistt/react-notes","owner":"maxchistt","description":"A MERN-based notes web-app with authorisation, synchronization and functional user interface","archived":false,"fork":false,"pushed_at":"2023-01-07T08:24:20.000Z","size":1572,"stargazers_count":2,"open_issues_count":9,"forks_count":2,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-06-22T22:05:31.523Z","etag":null,"topics":["full-stack","mern","mern-stack","mongodb","mongoose","nodejs","notes","notes-app","react","react-notes"],"latest_commit_sha":null,"homepage":"http://react-notes.std-1033.ist.mospolytech.ru","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/maxchistt.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2021-03-28T19:21:26.000Z","updated_at":"2024-05-19T05:56:15.000Z","dependencies_parsed_at":"2023-02-06T16:16:09.294Z","dependency_job_id":null,"html_url":"https://github.com/maxchistt/react-notes","commit_stats":null,"previous_names":[],"tags_count":6,"template":false,"template_full_name":null,"purl":"pkg:github/maxchistt/react-notes","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/maxchistt%2Freact-notes","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/maxchistt%2Freact-notes/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/maxchistt%2Freact-notes/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/maxchistt%2Freact-notes/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/maxchistt","download_url":"https://codeload.github.com/maxchistt/react-notes/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/maxchistt%2Freact-notes/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":265464256,"owners_count":23770316,"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":["full-stack","mern","mern-stack","mongodb","mongoose","nodejs","notes","notes-app","react","react-notes"],"created_at":"2025-02-20T22:00:08.753Z","updated_at":"2025-07-15T22:10:35.852Z","avatar_url":"https://github.com/maxchistt.png","language":"JavaScript","readme":"# React Notes App\n\nThis is a MERN-based notes web-app with authorisation, live synchronization and functional user interface. Here you can edit notes text content, add some markdown elements, upload images for cards.\n\n![Screenshot](https://i.postimg.cc/VN07rkNx/11.png)\n\n## About\n\nProject has \"cliend and server\" structure. You can find it in the corresponding subfolders.\n\nThe server with REST API was built with Node.js platform and Express library. It has three main API routes, additional route for WS addres check and default route for static client build. I used MongoDB and Mongoose lib to store and manage data. There are three entity types in database - Users, Notes and Media (images). For authorization, I used the JsonWebToken and Bcrypt libraries. I also used WebSocket to connect client and server for real-time synchronization.\n\nThe client was made with React framework. It was styled with Bootstrap 4. I used React Router DOM extension to route client pages - authorisation, main notes page and about page. I also used some libs to make interface more useful and pretty. The main one - React Stack Grid, used to conveniently arrange note cards on the screen. There are many custom hooks here to manage authorization, interface elements, user data, and their synchronization. Client was built with Progressiwe Web App technology. So it can be partially cached for offline use, or rather for faster loading.\n\nI also tried to make unit tests and documentation based on code comments. You can see it below in this document.\n\n## See demo\n\nOpen [mern-notesapp](https://mern-notesapp.herokuapp.com/) (here synchronization disabled) or [react-notes](http://react-notes.std-1033.ist.mospolytech.ru/) (here PWA disabled) to view working demo in the browser.\n\n![Screenshot](https://i.postimg.cc/2jtfgVZW/10.png)\n\n## Development\n\nFirst of all, set up your project by creating `.env` file in `./server` folder with next content:\n\n```env\nmongoUri = \"\u003cYOUR MONGO URI\u003e\"\njwtSecret = \"\u003cSECRET KEY\u003e\"\n```\n\nMain available scripts in the project directory:\n\n### `npm install`\n\ninstalls packages for development\n\n### `npm run full-install`\n\ninstalls client and server packages\n\n### `npm run dev`\n\nstarts client and server concurrently in dev mode\n\n## Production\n\nUse next scripts:\n\n### `npm run deploy`\n\nto install and build app before run it\n\n### `npm run prod` or `npm start`\n\nto run production app version\n\n## Testing\n\n### `npm test`\n\nruns concurrently tests for client and server\n\n## MongoDb\n\nLocal `mongoUri` will be `\"mongodb://localhost:27017/mydb\"`\n\n### Mongo installation on Windows 10\n\n1. Download and install MongoDb server from [www.mongodb.com/try/download/community](https://www.mongodb.com/try/download/community) (set it on \"D:\\Program Files\\\" to not edit the .bat file)\n\n2. Edit [mongo_win_install.bat](./mongo/Windows/mongo_win_install.bat) file and fix next variables (dont use spaces around \"=\"):\n\n   - set `MongoDb_ExePath` - path to mongod.exe\n   - set `MongoDb_DataFolderPath` - path to db folder\n\n3. To start Mongo database use `npm run mongo-windows:start`\n\n### Mongo installation on Ubuntu 20.04\n\n1. To prepare and setup mongo use `npm run mongo-ubuntu:full-setup`\n\n2. To start Mongo database use `npm run mongo-ubuntu:start`\n\n### Cloud Mongo connection\n\nCan be also used with Heroku\n\nUse [MongoDB Atlas](https://www.mongodb.com/cloud/atlas). Look video lesson [here](https://youtu.be/mTS0DH3lMNs)\n\n## Deployment on Ubuntu LVS\n\n- Clone from GitHub\n- Run `cd react-notes \u0026\u0026 npm run deploy \u0026\u0026 cd`\n- Use PM2 with this ecosystem template:\n\n```js\nmodule.exports = {\n  apps: [\n    {\n      name: \"react-notes\",\n      script: \"./react-notes/server/app.js\",\n      watch: \"./react-notes/\",\n      \"ignore-watch\": [\n        \"node_modules\",\n        \"./react-notes/node_modules\",\n        \"./react-notes/server/node_modules\",\n        \"./react-notes/client/node_modules\",\n      ],\n      \"max-memory-restart\": \"150MB\",\n      env: {\n        NODE_ENV: \"production\",\n        mongoUri: \"\u003cYOUR MONGO URI\u003e\" /*replace this*/,\n        httpsRedirect: false /*true if enable*/,\n        jwtSecret: \"\u003cSECRET KEY\u003e\",\n      },\n    },\n  ],\n};\n```\n\nBe careful - bash start folder on your server may be located differently\n\n## Deployment on Heroku\n\n- Create Heroku app\n- Connect to GitHub repo\n- Add Node.js buildpack in settings\n- Add config vars:\n  - NODE_ENV: production\n  - mongoUri: YOUR MONGO URI\n  - httpsRedirect: true\n  - jwtSecret: SECRET KEY\n- Click \"Deploy branch\" button\n\n## [JSDoc](https://jsdoc.app/) documentation\n\n### `npm run doc`\n\nuse to generate docs\n\n### [react-notes-docs](http://react-notes-docs.std-1033.ist.mospolytech.ru)\n\nsee exiting documentation\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmaxchistt%2Freact-notes","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmaxchistt%2Freact-notes","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmaxchistt%2Freact-notes/lists"}