Ecosyste.ms: Awesome

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

Awesome Lists | Featured Topics | Projects

https://github.com/himalayasingh3/full-stack-notes-manager

Introducing my Notes Manager built with the MERN stack! This application allows users to create, and organize notes seamlessly. With a user-friendly interface and real-time updates, you can easily manage your thoughts and tasks. Perfect for students and professionals looking to enhance productivity and stay organized!
https://github.com/himalayasingh3/full-stack-notes-manager

expressjs mongodb mui nodejs reactjs tailwindcss

Last synced: about 1 month ago
JSON representation

Introducing my Notes Manager built with the MERN stack! This application allows users to create, and organize notes seamlessly. With a user-friendly interface and real-time updates, you can easily manage your thoughts and tasks. Perfect for students and professionals looking to enhance productivity and stay organized!

Awesome Lists containing this project

README

        

# MERN Stack Notes Manager App

## Overview

This repository contains a Notes Manager application built using the MERN stack (MongoDB, Express.js, React, Node.js). The application allows users to create, read, update, and delete notes efficiently. It features user authentication and a clean, intuitive interface for managing notes.

## Table of Contents

- [Features](#features)
- [Technologies Used](#technologies-used)
- [Installation](#installation)
- [Usage](#usage)
- [Folder Structure](#folder-structure)
- [API Endpoints](#api-endpoints)
- [Contributing](#contributing)
- [License](#license)

## Features

- Create, read, update, and delete notes
- Responsive design for mobile and desktop
- User-specific notes management

## Technologies Used

- **MongoDB**: NoSQL database for storing notes and user data.
- **Express.js**: Web framework for building the server-side application.
- **React**: Frontend library for creating a dynamic user interface.
- **Node.js**: JavaScript runtime for executing server-side code.
- **Mongoose**: ODM library for MongoDB and Node.js.
- **Axios**: Promise-based HTTP client for making requests from React to the API.
- **JWT (JSON Web Tokens)**: For secure user authentication.

## Installation

To set up the Notes Manager application locally, follow these steps:

1. **Clone the repository**:
```bash
git clone https://github.com/HimalayaSingh3/Full-Stack-Notes-Manager.git
cd Full-Stack-Notes-Manager
```

2. **Install server dependencies**:
```bash
cd server
npm install
```

3. **Install client dependencies**:
```bash
cd ../client
npm install
```

4. **Set up environment variables**:
Create a `.env` file in the `server` directory and add your MongoDB connection string:
```
MONGODB_URI=your_mongodb_connection_string
```

5. **Start the Backend**:
```bash
cd Backend
node server.js
```

6. **Start the Frontend**:
Open a new terminal window and run:
```bash
cd Frontend
npm run dev
```

Your application should now be running on `http://localhost:3000`.

## Usage

Once the application is running:

1. Navigate to `http://localhost:3000` in your web browser.
2. Sign up for a new account or log in with an existing account.
3. Start creating, editing, and managing your notes!

## Folder Structure

```plaintext
mern-notes-manager/
├── client/ # React frontend code
│   ├── src/
│   │   ├── components/ # React components (e.g., NoteList, NoteForm)
│   │   ├── pages/ # Page components (e.g., HomePage)
│   │   ├── App.js # Main app component
│   │   └── index.js # Entry point for React app
├── server/ # Node.js backend code
│   ├── models/ # Mongoose models (e.g., User, Note)
│   ├── routes/ # Express routes (e.g., authRoutes, noteRoutes)
│   ├── controllers/ # Controller functions for handling requests
│   ├── middleware/ # Middleware for authentication and error handling
│   ├── config/ # Configuration files (e.g., database connection)
│   └── server.js # Entry point for Node.js server
└── README.md # This README file
```

## API Endpoints

Here are some of the key API endpoints available in this application:

| Method | Endpoint | Description |
|--------|------------------------|---------------------------------|
| POST | `/api/auth/signup` | Register a new user |
| POST | `/api/auth/login` | Log in an existing user |
| GET | `/api/notes` | Get all notes for logged-in user|
| GET | `/api/notes/:id` | Get note by ID |
| POST | `/api/notes` | Create a new note |
| PUT | `/api/notes/:id` | Update note by ID |
| DELETE | `/api/notes/:id` | Delete note by ID |

## Contributing

Contributions are welcome! If you have suggestions or improvements, please create a pull request or open an issue.

1. Fork the repository.
2. Create your feature branch (`git checkout -b feature/AmazingFeature`).
3. Commit your changes (`git commit -m 'Add some AmazingFeature'`).
4. Push to the branch (`git push origin feature/AmazingFeature`).
5. Open a pull request.

## License

This project is licensed under the MIT License - see the [LICENSE](LICENSE) file for details.

---

Feel free to customize this README according to your specific project needs!