Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/apfirebolt/mern-subject-notes

A subject notes CRUD app created using Express, React, MongoDB and Node
https://github.com/apfirebolt/mern-subject-notes

chakra-ui expressjs javascript jsonwebtoken mern mongodb mongoosejs nodejs react react-redux reactjs

Last synced: 10 days ago
JSON representation

A subject notes CRUD app created using Express, React, MongoDB and Node

Host: GitHub
URL: https://github.com/apfirebolt/mern-subject-notes
Owner: Apfirebolt
Created: 2021-10-13T23:55:04.000Z (over 3 years ago)
Default Branch: master
Last Pushed: 2023-01-01T13:39:10.000Z (about 2 years ago)
Last Synced: 2025-01-21T00:47:48.347Z (14 days ago)
Topics: chakra-ui, expressjs, javascript, jsonwebtoken, mern, mongodb, mongoosejs, nodejs, react, react-redux, reactjs
Language: JavaScript
Homepage:
Size: 1.68 MB
Stars: 2
Watchers: 2
Forks: 0
Open Issues: 0
Metadata Files:
- Readme: README.md

Awesome Lists containing this project

README

# MERN Subject Notes - Web application which simulates a Notebook ⚡️

## Project Briefing

This is a notes tracking web application I built to keep tracks of note-worthy points categorized by subjects. It's created in one of the most popular full stack technologies combination known as MERN (MongoDB, Express, React, Node).

Made with ❤️ by **[@apfirebolt](https://github.com/Apfirebolt/)**
## Features

- Contains token based user auth system.
- Each user can perform CRUD on Subjects.
- Subjects would have Topics and Topics would have Notes, this would have CRUD operations for both of these modules.
- Form field validation applied for both front-end and back-end using Express validator and React form hooks packages.
- Chakra UI components used for Toast messages, Modals, Buttons and more.

## Built With

* [Express](https://expressjs.com/)
* [React](https://reactjs.org/)
* [MongoDB](https://www.mongodb.com/)
* [Redux](https://redux.js.org/)
* [Chakra UI Kit](https://chakra-ui.com/)

## Project setup

Simply install node modules for both frontend and backend, the project is already configured to serve build content files in production which is generated by Vue which resides inside the build folder.

Concurrently, a package is used for development and allows us to launch both frontend and back-end in one go using single command. Alternatively, in dev mode you can run both the applications on separate ports, cors is enabled in this project for the back-end.

```
npm install
npm run dev
```

For production, build the frontend of the app and then run the backend app only.

```
npm run build
npm start
```
## Database Architecture

- MongoDB is used as database which works pretty smoothly with Javascript and other Javascript frameworks.
- Mongoose ORM is used to define document schemas and perform
complex queries.
- It has 2 models namely 'User' and 'Subjects'.
- Nested or Embedded documents is used for Topics within a subject and Notes within a Topic.

## Project Screenshots

Please find some of the screenshots of the application. Below is the screenshot of the Register Page.

![alt text](./screenshots/register.png)

![alt text](./screenshots/login.png)

Add Topic Modal, topics can be added within a subject through a modal. CRUD on Topics is supported

![alt text](./screenshots/add_topic.png)

Add Note Modal, notes can be added within a topic through a modal. CRUD on Notes is supported

![alt text](./screenshots/add_note.png)

Subject list page, user after successful login can add subjects which would house topics and notes.

![alt text](./screenshots/subjects.png)

Subject detail page, would contain list of all the topics within a subject.

![alt text](./screenshots/subject_detail.png)

Topic detail page, would contain list of all the notes within a topic.

![alt text](./screenshots/topic_detail.png)

Delete Subject modal. Similar modals for CRUD operations exist for notes and topics.

![alt text](./screenshots/delete_subject.png)