https://github.com/rooneyrulz/qnotes
Simple notes application using mern-stack.
https://github.com/rooneyrulz/qnotes
authentication authorization caching cookies expressjs fullstack-development hooks https jwt middleware mongodb mongoose nodejs passportjs react-router-v6 reactjs redux-toolkit rtk-query security sso-authentication
Last synced: 14 days ago
JSON representation
Simple notes application using mern-stack.
- Host: GitHub
- URL: https://github.com/rooneyrulz/qnotes
- Owner: rooneyrulz
- License: mit
- Created: 2024-01-11T07:08:44.000Z (about 2 years ago)
- Default Branch: main
- Last Pushed: 2024-03-28T14:22:19.000Z (almost 2 years ago)
- Last Synced: 2025-06-29T13:45:18.039Z (7 months ago)
- Topics: authentication, authorization, caching, cookies, expressjs, fullstack-development, hooks, https, jwt, middleware, mongodb, mongoose, nodejs, passportjs, react-router-v6, reactjs, redux-toolkit, rtk-query, security, sso-authentication
- Language: JavaScript
- Homepage:
- Size: 4.4 MB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 11
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Qnotes - Full Stack Project 📝
Qnotes is a full-stack project developed using the MERN stack (MongoDB, Express.js, React, and Node.js), featuring a multiple-role-based login system with Google SSO login, GitHub SSO login, and traditional username and password login. This application allows users to create and manage notes, assign tasks to others, and includes administrative features for user management.
## Technologies and Features 🚀
### Backend Stack
- [Node.js](https://nodejs.org/)
- [Express.js](https://expressjs.com/)
- [MongoDB](https://www.mongodb.com/) with [Mongoose](https://mongoosejs.com/)
- [Passport.js](http://www.passportjs.org/) for authentication
- [JWT](https://jwt.io/) for token-based authentication
- Cookies and local storage for user sessions
- Middleware for request handling and security
- HTTPS for secure communication
### Frontend Stack
- [React](https://reactjs.org/)
- [Redux Toolkit](https://redux-toolkit.js.org/) for state management
- [RTK Query](https://redux-toolkit.js.org/rtk-query/overview) for efficient API data fetching
- [React Hooks](https://reactjs.org/docs/hooks-intro.html)
- [React Router DOM](https://reactrouter.com/web/guides/quick-start) version 6
## To Run Instructions 🛠️
### 1. Clone the Repository
```bash
git clone https://github.com/rooneyrulz/qnotes.git
```
## 2. Environment Configuration
- Navigate to the `frontend` and `backend` folders.
- Rename the `.env.example` files to `.env` in both folders.
- Update the `.env` files with your specific values.
## 3. Install Dependencies
- Open a terminal in the `frontend` and `backend` folders separately.
- Run the following command in both folders to install dependencies:
```bash
npm install
```
## 4. Run MongoDB Container
To use MongoDB for your project, you can run it in a Docker container. If you don't have Docker installed, you can follow the installation instructions on the [official Docker website](https://docs.docker.com/get-docker/).
1. Navigate to the `backend` folder:
```bash
cd backend
```
2. Run the following command to start the MongoDB container:
```bash
docker-compose up -d
```
- If you encounter any issues, make sure Docker is properly installed and running.
- If you're using a cloud-based MongoDB or have MongoDB already installed on your system, you can skip this step.
## 5. Start Servers
Now that MongoDB is set up, you can start the servers for the backend and frontend.
### Backend Server
1. In the `backend` folder, run the following command to start the server:
```bash
npm run start:server
```
### Frontend Server
2. In the `frontend` folder, run the following command to start the React app:
```bash
npm start
```
- You can run both servers simultaneously by checking the `package.json` file inside the `backend` folder.
## 6. Access the Application
Open your web browser and navigate to [http://localhost:3000](http://localhost:3000) to access the Qnotes application.
### Default Admin Credentials
- **Username:** admin
- **Password:** 12345678
Wishing you happy coding! 🚀✨👩💻👨💻