Python Flask & MongoDB: Task Manager

A full-stack, single-page web application that functions as a modern task manager.
The backend is built with Python and the Flask framework, and it uses MongoDB (running locally) as its database.
The frontend is built with HTML, CSS, and vanilla JavaScript, featuring a sleek glass panel design.

---

Features

• Create Tasks: Quickly add new tasks to your list.
• View All Tasks: See a clean, real-time list of all your current tasks.
• Mark as Complete: Toggle the completion status of any task.
• Delete Tasks: Remove tasks you no longer need.
• Real-time Updates: The UI updates instantly without needing a page refresh.

---

Prerequisites

Before you begin, ensure you have the following installed:

• Python 3.7+ and pip
• Git for version control
• MongoDB installed and running locally (mongod service)
• Access to a web browser

---

Getting Started

1. Clone the Repository

git clone <your-repository-url>
cd <repository-folder>

2. Create and Activate a Virtual Environment

It's a best practice to create a virtual environment to keep project dependencies isolated.

On macOS/Linux:

python3 -m venv venv
source venv/bin/activate

On Windows:

python -m venv venv
.�env\Scripts�ctivate

3. Install Dependencies

pip install -r requirements.txt

4. Set Up the MongoDB Database (Local)

This project uses a locally running MongoDB server instead of MongoDB Atlas.

1. Make sure MongoDB is installed and the mongod service is running.

   • On Linux/macOS:

     sudo systemctl start mongod
     

   • On Windows, start MongoDB from Services or run mongod in a terminal.

2. Open the MongoDB shell and create a database for this project:

   mongosh
   use TaskManager
   

   Collections will be created automatically when you add tasks.

5. Create the Environment File

In the root directory of the project, create a .env file:

MONGO_URI=mongodb://localhost:27017/task_manager_db

No password or external cluster is needed since we are using a local server.

6. Run the Application

python app.py

You should see output like:

* Serving Flask app 'app'
* Running on http://127.0.0.1:5000

7. View in Browser

Open your browser and go to:
http://127.0.0.1:5000

---

Project Structure

/task-manager-project/
|
|-- templates/
|   `-- index.html        # Frontend HTML, CSS, and JS
|
|-- src/
|   |-- config.py         # Handles loading environment variables
|   `-- database.py       # Handles all MongoDB operations
|
|-- app.py                # Main Flask application and API routes
|-- requirements.txt      # Project dependencies
|-- .gitignore            # Files to be ignored by Git
`-- README.md             # This file

---

Notes

• Default MongoDB port is 27017. Update the .env file if you changed it.
• If MongoDB isn’t running, the Flask app will fail to connect.
• You can inspect your tasks in MongoDB using:

  mongosh
  use task_manager_db
  db.tasks.find().pretty()