Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/harshdev1809/notesapp
NotesApp: A responsive note-taking application built with React.js, Redux Toolkit, Express.js, and MongoDB. Features include user authentication, note management, and real-time updates. Deployed on Render.com.
https://github.com/harshdev1809/notesapp
css express-js html javascript mongodb node-js reactjs redux-toolkit render-deployment rest-api
Last synced: about 17 hours ago
JSON representation
NotesApp: A responsive note-taking application built with React.js, Redux Toolkit, Express.js, and MongoDB. Features include user authentication, note management, and real-time updates. Deployed on Render.com.
- Host: GitHub
- URL: https://github.com/harshdev1809/notesapp
- Owner: HarshDev1809
- Created: 2024-08-14T16:18:34.000Z (about 1 month ago)
- Default Branch: main
- Last Pushed: 2024-09-07T23:24:19.000Z (17 days ago)
- Last Synced: 2024-09-24T03:58:41.008Z (1 day ago)
- Topics: css, express-js, html, javascript, mongodb, node-js, reactjs, redux-toolkit, render-deployment, rest-api
- Language: JavaScript
- Homepage: https://notesapp-d8lp.onrender.com/
- Size: 806 KB
- Stars: 0
- Watchers: 1
- Forks: 1
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# NotesApp
**NotesApp** is a responsive, mobile-friendly note-taking application designed for users to create, update, and delete notes effortlessly. It provides a clean, intuitive interface for managing notes on the go, with support for various devices and optimized loading speeds.
## Features
- **Responsive Design**: The app works seamlessly across devices—desktop, tablet, and mobile—ensuring a smooth experience for users.
- **CRUD Operations**: Users can Create, Read, Update, and Delete notes.
- **State Management**: Implemented using **Redux Toolkit** for efficient and optimized state management.
- **Backend API**: Developed a RESTful API using **Express.js** and **Node.js** to handle data persistence and server-side operations.
- **Database**: Utilizes **MongoDB** for storing user data and notes securely.
- **Deployment**: The application is deployed and hosted on Render.com, ensuring high availability and easy access.## Technologies Used
- **Frontend**:
- React.js: For building the user interface and ensuring quick rendering.
- Redux Toolkit: To manage global state efficiently across the app.
- HTML5 & CSS3: For structuring and styling the application.- **Backend**:
- Node.js: For handling server-side logic.
- Express.js: For building the RESTful API and routing.
- MongoDB: As the database solution for storing notes and user information.## Installation and Setup
To get started with the NotesApp locally, follow these steps:
1. **Clone the Repository**:
```bash
git clone https://github.com/HarshDev1809/NotesApp.git
```2. **Install Dependencies**:
Navigate to the `client` and `server` directories and run the following:
```bash
cd client
npm install
cd ../server
npm install
```3. **Environment Variables**:
Create a `.env` file in the `server` directory with the following variables:
```env
URL=your_mongo_database_uri
PORT=5000
```4. **Run the Application**:
From the root directory, you can run both the frontend and backend using the following commands:
- Frontend:
```bash
cd client
npm start
```
- Backend:
```bash
cd server
npm start
```5. **Access the Application**:
Open your browser and visit `http://localhost:3000` for the frontend and `http://localhost:5000` for the backend.## Deployment
The app is deployed on Render. You can access the live version [here](https://notesapp-d8lp.onrender.com/).
## Future Improvements
- **Authentication**: Add user authentication for private notes.
- **Search Functionality**: Enable searching through notes by keywords or tags.
- **Rich Text Editor**: Implement a rich text editor for formatting notes.
- **Dark Mode**: Provide a dark mode option for better user experience.## Contributing
Feel free to contribute by opening an issue or submitting a pull request.