https://github.com/m-yasirghaffar/notes-taking-app-mern-stack
A notes taking app using MERN stack.
https://github.com/m-yasirghaffar/notes-taking-app-mern-stack
deployment express heroku-cli heroku-deployment mern-stack mongodb mongoose nodejs note-taking note-taking-app notes react tailwind
Last synced: about 2 months ago
JSON representation
A notes taking app using MERN stack.
- Host: GitHub
- URL: https://github.com/m-yasirghaffar/notes-taking-app-mern-stack
- Owner: M-YasirGhaffar
- License: mit
- Created: 2024-06-15T18:16:10.000Z (10 months ago)
- Default Branch: main
- Last Pushed: 2024-06-30T01:05:30.000Z (10 months ago)
- Last Synced: 2025-01-11T15:37:19.643Z (3 months ago)
- Topics: deployment, express, heroku-cli, heroku-deployment, mern-stack, mongodb, mongoose, nodejs, note-taking, note-taking-app, notes, react, tailwind
- Language: JavaScript
- Homepage: https://mern-stack-notes-taking-app.vercel.app
- Size: 160 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: License
Awesome Lists containing this project
README
# MERN Stack Notes Taking App
## Introduction
Welcome to our MERN Stack Notes Taking App! This application is a robust solution for managing your notes, built using the MERN technology stack—MongoDB, Express.js, React, and Node.js. It's designed to help users perform CRUD (Create, Read, Update, Delete) operations seamlessly and supports a wide range of devices thanks to its responsive design.
## Features
- **User Authentication**: Provides secure access through login and registration features.
- **CRUD Operations**: Allows full management of notes with create, read, update, and delete capabilities.
- **Search Functionality**: Enables easy retrieval of notes through keyword searches.
- **Responsive Design**: Ensures the app looks great and functions on both desktop and mobile platforms.
- **Real-time Updates**: Employs React to deliver a dynamic and instantaneous interface.
## Technology Stack
- **Frontend**: React, React Router, Axios, Tailwind CSS
- **Backend**: Node.js, Express.js
- **Database**: MongoDB
- **Authentication**: Managed through JSON Web Tokens (JWT)
## Setup Instructions
### Prerequisites
Ensure you have Node.js, npm, and a MongoDB account set up before you begin.
### Backend Setup
1. Begin by navigating to your backend directory:
```bash
cd backend
```
2. Install necessary dependencies:
```bash
npm install
```
3. Set up your environment variables in a `.env` file within the backend directory:
```plaintext
ACCESS_TOKEN_SECRET=
MONGO_URL=
```
4. Launch the server:
```bash
npm start
```
### Frontend Setup
1. Move to your frontend directory:
```bash
cd frontend
```
2. Install required dependencies:
```bash
npm install
```
3. Set up environment variables in .env:
```bash
VITE_BASE_URL=
```
4. Start the development server:
```bash
npm run dev
```
Now, the app should be running at `http://localhost:3000`.
## How to Use
- **Register/Login**: Sign up for an account or log in.
- **Creating Notes**: Add a new note with a title and details.
- **Viewing Notes**: Browse your collection of notes on the dashboard.
- **Editing Notes**: Modify a selected note's details directly.
- **Deleting Notes**: Remove notes right from the dashboard.
- **Searching Notes**: Quickly find your notes using the search feature.
## Contributing
We welcome contributions! To get involved:
1. Fork the repository.
2. Create a new branch for your feature: `git checkout -b feature-branch-name`.
3. Commit your changes: `git commit -m 'Add some feature'`.
4. Push to your branch: `git push origin feature-branch-name`.
5. Submit a pull request.
For more information on how to create a pull request, visit the [GitHub help page](https://help.github.com/articles/creating-a-pull-request/).
## Areas of Improvement
This application was primarily developed as a practice project focusing on several key areas of web development, including API integration, the MERN stack (MongoDB, Express, React, Node.js), cloud deployment (specifically Heroku), as well as authentication and authorization mechanisms. Given its nature as a practice tool, there are several areas where the application could be improved for a more polished, user-friendly experience:
- **User Interface and Experience**: The application currently lacks refined styles, animations, and feedback mechanisms that contribute to a seamless user experience. Future iterations could benefit from a more thoughtful design approach to enhance usability and aesthetic appeal.
- **Data Validation and Restrictions**: There are no restrictions on the length of titles, content, or tags, which can lead to unstyled or awkwardly displayed content. Implementing character limits and content guidelines would help maintain a consistent and visually appealing layout.
- **Field Requirements Indication**: Required fields are not currently marked with an asterisk (*) or any other indicator. This can lead to user confusion and errors during form submission. Clearly marking required fields would improve the form-filling experience and reduce the likelihood of submission errors.
- **Unique Use Case Development**: As the application was developed for practice purposes, it does not focus on a unique use case. Identifying and implementing a specific use case could provide direction for more targeted improvements and features, making the app more useful for its end-users.
### Note
It's important to note that this application was intended solely as a practice project for exploring and improving upon various web development skills. The areas highlighted for improvement reflect its status as a learning tool rather than a market-ready product. Future development efforts can address these areas to enhance the application's functionality and user experience.
## License
This project is released under the MIT License. For more details, see the LICENSE file in the repository.
---
Feel free to adapt and extend this README to better fit your project's needs!