A full stack web application to easily create and organize your notes. Built on MERN stack, this project implements all core functionalities like User Authentication, CRUD Operations, Routing and much more!
APACHE-2.0 License
NoteScout is a fullstack web app that helps you easily create and organize your notes
https://notescout.herokuapp.com/
NoteScout lets users create an account on the server. Once successful, the users can easily create and organize their notes on the cloud storage. Additionally, the web app also lets a user create a note in Markdown Format!
The project at its core is built on MERN Stack which stands for (MongoDB, ExpressJS, ReactJS and NodeJS)
NoteScout is highly responsive in terms of its design! No matter what size of device you use, the web app will run perfectly fine on it!
If you want to clone this project and customize it further, you need to do a couple of tasks first:
PORT = 3000
MONGO_URI=mongodb+srv://YOUR_MONGO_CLOUD_USERNAME:[email protected]/Cluster0?retryWrites=true&w=majority
NODE_ENV=development
JWT_CODE=YOUR_NAME
The purpose of this project is to demonstrate how a person can
# Root Package
.
├── backend # All our backend code
| ├── config # Configuration files like db.js to configure MongoDB
| ├── controllers # Files that contain all our logic corresponding to specific routes
│ ├── middlewares # Contains files like authMiddleware which will check whether user is authenticated or not on any incoming request
│ ├── models # Files that define the structure of each user and note in MongoDB
│ ├── routes # Defines endpoints of our backend
│ ├── util # Utility files for generating JWT token and enhancing the workflow of project
│ └── server.js # Main backend file that starts our server and binds everything together
|
├── frontend # All our frontend code
| ├── build # Folder that binds our backend code for production purpose, to generate it, use npm run build
│ ├── public # Contains files that can be accessed publically such as index.html
│ └── src # Our core frontend code consisting of all views and react components
|
|
└── ProcFile # [Optional] Used to deploy the app on heroku
# ReactJS frontend -> src
.
├── src # Our core frontend code consisting of all views and react components
| ├── assets # Contains lottie animation .json files
| ├── components # Contains files for single note cards, login signup tab,header, footer, snackbar etc
│ ├── pages # Contains files to represent the screen for each route like LandingPage.js for '/', ProfilePage.js for '/profile' etc
│ ├── styles # Contains theme.js for defining a theme for MaterialUI
│ ├── stylesheets # Contains CSS files for each view component
│ ├── App.css # CSS file to provide a common styling to our app such as font family and box sizing
│ ├── App.js # Our main frontend ReactJS file that is executed when server starts
│ ├── AppContext.js # ReactJS ContextAPI file to allow all components access a particular react state easily
│ └── index.js # A ReactJS file to render all the data on web page
└──
It is super easy to deploy the project on heroku!
sudo snap install --classic heroku
And then, in VSCode Terminal, write:
cd frontend
npm run build
cd ..
heroku login
git push heroku master
And then open your heroku URL to see the website running live :)
The heroku website link that I have provided for this project on the top may run slow when you open it for the first time. It is also possible that you may see an empty red snackbar. This is because of slow internet connection or timeout error. This error will go away on its own if you wait for 1-2 minutes after opening the heroku link and then reload the web page
For any queries, you can mail me at [email protected]