|
| 1 | +# Notes Management Application Using React |
| 2 | + |
| 3 | +A feature-rich application for managing notes with authentication, a customizable interface, and a responsive design. |
| 4 | + |
| 5 | +--- |
| 6 | + |
| 7 | +## Table of Contents |
| 8 | +- [Features](#features) |
| 9 | +- [Prerequisites](#prerequisites) |
| 10 | +- [Setup Locally](#setup-locally) |
| 11 | + - [Backend Setup](#backend-setup) |
| 12 | + - [Frontend Setup](#frontend-setup) |
| 13 | +- [Getting Started](#getting-started) |
| 14 | + |
| 15 | +--- |
| 16 | + |
| 17 | +## Features |
| 18 | + |
| 19 | +- **Custom User Authentication**: Secure authentication with password management. |
| 20 | +- **User Account Management**: Create and manage user accounts. |
| 21 | +- **CRUD Operations**: Add, edit, delete, and view notes. |
| 22 | +- **Light/Dark Theme**: Toggle between light and dark themes. |
| 23 | +- **Responsive Design**: Optimized for various screen sizes. |
| 24 | +- **Extendable UI**: Built with [shadcn/ui](https://shadcn.dev/). |
| 25 | +- **Routing**: Seamless navigation using `react-router-dom`. |
| 26 | + |
| 27 | +--- |
| 28 | + |
| 29 | +## Prerequisites |
| 30 | + |
| 31 | +Before setting up the application, ensure you have the following: |
| 32 | +- **MongoDB Connection URL**: A running MongoDB instance. |
| 33 | +- **Node.js**: Installed on your system. |
| 34 | +- **Yarn**: For dependency management (optional, you can use npm if preferred). |
| 35 | + |
| 36 | +--- |
| 37 | + |
| 38 | +## Setup Locally |
| 39 | + |
| 40 | +Follow these steps to set up the application locally: |
| 41 | + |
| 42 | +### Backend Setup |
| 43 | +1. Navigate to the `server` directory and copy the environment example file: |
| 44 | + ```bash |
| 45 | + cd server && cp .env.example .env |
| 46 | + ``` |
| 47 | +2. Update the `.env` file with your credentials: |
| 48 | + ```env |
| 49 | + JWT_SECRET="your-secret-key" |
| 50 | + MONGO_URL="mongodb://localhost:27017/noteapp" |
| 51 | + CLIENT_URL="http://localhost:4173" |
| 52 | + ``` |
| 53 | +3. Start the backend server: |
| 54 | + ```bash |
| 55 | + yarn start |
| 56 | + ``` |
| 57 | + |
| 58 | +### Frontend Setup |
| 59 | +1. Navigate to the `client` directory and copy the environment example file: |
| 60 | + ```bash |
| 61 | + cd client && cp .env.example .env |
| 62 | + ``` |
| 63 | +2. Update the `.env` file with your API URL: |
| 64 | + ```env |
| 65 | + VITE_API_URL=http://localhost:3000/api |
| 66 | + ``` |
| 67 | +3. Start the frontend application: |
| 68 | + ```bash |
| 69 | + yarn preview |
| 70 | + ``` |
| 71 | + |
| 72 | +--- |
| 73 | + |
| 74 | +## Getting Started |
| 75 | + |
| 76 | +Once both the backend and frontend are set up and running: |
| 77 | +1. Open your browser and navigate to `http://localhost:4173`. |
| 78 | +2. Create an account, log in, and start managing your notes! |
| 79 | + |
| 80 | +--- |
| 81 | + |
| 82 | +### Additional Notes |
| 83 | +- Ensure MongoDB is running before starting the backend server. |
| 84 | +- Use `yarn` or `npm` consistently for dependency management. |
| 85 | +- For production deployments, make sure to replace development URLs and secrets with production-ready values. |
| 86 | + |
| 87 | +--- |
| 88 | + |
| 89 | +Happy coding! |
| 90 | + |
0 commit comments