Notekeeper

A simple, yet powerful ToDo app for task management, built with a React.js, TailwindCSS front-end and Node.js/Express back-end. The app allows users to create, edit, delete, and mark tasks as completed. It uses MongoDB as the database to store tasks.

---

Table of Contents

1. Features
2. Technologies Used
3. Prerequisites
4. Getting Started
   • Run Frontend
   • Run Backend
5. Environment Variables
6. Challenges and Decisions
7. Deployment

---

Features

• User Authentication (Sign Up, Login)
• Create, update, delete, and mark tasks as complete.
• Responsive design.
• Real-time updates (if implemented).

---

Technologies Used

Frontend:

• React.js: For building the user interface.
• Tailwind CSS: For styling and layout.
• React Router: For routing between login, sign-up, and dashboard pages.

Backend:

• Node.js with Express: For building RESTful APIs.
• MongoDB with Mongoose: For managing and storing tasks.
• JWT (JSON Web Tokens): For user authentication.
• bcrypt.js: For password hashing and secure storage.

---

Prerequisites

Before running this project locally, ensure that you have:

• Node.js installed on your machine.
• MongoDB (either locally or a connection to MongoDB Atlas).

---

Getting Started

To run this app locally, follow the instructions for both the front-end and back-end.

Run Frontend Locally

1. Clone the repository:

   git clone https://github.com/yourusername/todo-app.git
   cd todo-app

2. Navigate to the frontend folder:

   cd frontend

3. Install dependencies:

   npm install

4. Run the React development server:

   npm run dev

5. The app should now be running at http://localhost:3000.

Run Backend Locally

1. Navigate to the backend folder:

   cd backend

2. Install dependencies:

   npm install

3. Create a .env file in the backend directory with the required environment variables (see Environment Variables).

4. Run the backend server:

   npm start

5. The server should be running at http://localhost:5000 or any port you configured.

---

Environment Variables

The backend requires the following environment variables to be set in a .env file located in the /backend directory:

PORT=5000
MONGO_URI=your_mongo_db_connection_string
JWT_SECRET=your_jwt_secret

Make sure you update the MONGO_URI to connect to your local MongoDB instance or MongoDB Atlas.

---

Challenges and Decisions

1. Responsive Design:

To ensure the app looks good across different screen sizes, Tailwind CSS was used. The grid layout adjusts based on screen size, reducing the number of columns as the screen width decreases.

2. User Authentication:

For secure authentication, JWT and bcrypt were used to create a token-based authentication system. The challenge was ensuring that the authentication persisted across sessions and handled token expiry correctly.

3. Database Integration:

Using MongoDB and Mongoose allowed for a flexible schema design. However, deciding between embedding and referencing tasks and users required consideration of performance and scalability.

4. Error Handling:

Handling asynchronous operations with Express and MongoDB required implementing consistent error messages for both frontend and backend, improving the user experience.