expanded README and added images

README.md

@@ -35,26 +35,72 @@ Peak Performer is a simple yet robust to-do list application designed to keep yo
    ```bash
    git clone https://github.com/your-repo/peak-performer.git
    cd peak-performer
+   ```
 
-2. Use the provided `run.sh` script to deploy application:
-   - Run `initial-setup` to:
-     - Create/load the virtual environment
-     - Insall depenencies
-     - Build PostgreSQL database 
-   - 
-
-Load environment variables:
-bash
-Copy code
-./run.sh load-env
-Set up a virtual environment and install dependencies:
-bash
-Copy code
-./run.sh install-deps
-Initialize the database:
-bash
-Copy code
-./run.sh create-db
+2. Use the provided `run.sh` script for setup:
+   - Create/load the virtual environment, install dependencies, and build PostgreSQL database:
+    ```bash
+    ./run.sh initial-setup
+    ```
+
+3. Start the application:
+    ```bash
+    ./run.sh run-app
+    ```
+
+## Usage
+
+Access the application in your browser at `http://127.0.0.1:5001`
+
+### How to Use the App
+
+#### 1. Login Page
+- Navigate to the login page to access your account. Enter your username and password, then click **LOGIN**. New users can register by clicking "Sign Up".
+
+<p align="center">
+    <img src="./static/img/login.png" alt="Login Page"/>
+</p>
+
+#### 2. Registration Page
+- Create a new account by providing a username and a secure password. Ensure both password fields match before submitting.
+
+<p align="center">
+    <img src="./static/img/registration.png" alt="Registration"/>
+</p>
+
+#### 3. Task Dashboard
+- View all your tasks in a neatly organized table. The dashboard displays the task ID, title, description, and status. The task ID is cumulative for all tasks, across users, that are tracked in Peak Performer.
+
+<p align="center">
+    <img src="./static/img/view_tasks.png" alt="View Tasks"/>
+</p>
+
+#### 4. Add a Task
+- Click "Add Task" in the navigation menu. Fill in the task title, description, and status, then click `Create Task`.
+
+<p align="center">
+    <img src="./static/img/add_task.png" alt="Add Task"/>
+</p>
+
+
+#### 5. Edit a Task
+- Select the "Edit Task" option. Enter the Task ID and update the desired fields. Leave fields blank to retain current values.
+
+<p align="center">
+    <img src="./static/img/edit_task.png" alt="Edit Task"/>
+</p>
+
+
+#### 6. Delete a Task
+- Choose the "Delete Task" option. Enter the Task ID to delete. Task details are fetched dynamically to ensure accuracy.
+
+<p align="center">
+    <img src="./static/img/delete_task.png" alt="Delete Task"/>
+</p>
+
+
+#### 7. Log Out
+- Use the "Log Out" option in the navigation menu to safely end your session.
 
 
 ## Architecture
@@ -78,5 +124,21 @@ Copy code
 - **Advantages:**
   - Centralized data access logic.
   - Simplified testing by isolating database operations.
-Centralized data access logic.
-Simplified testing by isolating database operations.
+
+## Configuration
+- Set environment variables in a `.env` file, including:
+    ```
+    DB_USER=<your-database-user>
+    DB_PASSWORD=<your-database-password>
+    DB_HOST=<your-database-host>
+    DB_PORT=<your-database-port>
+    DB_NAME=<your-database-name>
+    ```
+- Customize app settings in `main.py` and static assets in `static/img`.
+
+## Troubleshooting
+- **Database Errors**: Ensure PostgreSQL is running and `.env` variables are correct.
+- **Dependency Issues**: Use `./run.sh install-deps` to reinstall requirements.
+
+## License
+This project is licensed under the MIT License. See `LICENSE` for details.

templates/add_task.html

@@ -21,17 +21,35 @@ <h2 class="mt-2" style="font-family: 'Lobster', cursive; font-size: 2rem; color:
             <div class="form-group">
                 {{ form.title.label }}
                 {{ form.title(class="form-control") }}
-                {{ form.title.errors }}
+                {% if form.title.errors %}
+                    <ul class="text-danger">
+                        {% for error in form.title.errors %}
+                            <li>{{ error }}</li>
+                        {% endfor %}
+                    </ul>
+            {% endif %}
             </div>
             <div class="form-group">
                 {{ form.description.label }}
                 {{ form.description(class="form-control") }}
-                {{ form.description.errors }}
+                {% if form.description.errors %}
+                    <ul class="text-danger">
+                        {% for error in form.description.errors %}
+                            <li>{{ error }}</li>
+                        {% endfor %}
+                    </ul>
+            {% endif %}
             </div>
             <div class="form-group">
                 {{ form.status.label }}
                 {{ form.status(class="form-control") }}
-                {{ form.status.errors }}
+                {% if form.status.errors %}
+                    <ul class="text-danger">
+                        {% for error in form.status.errors %}
+                            <li>{{ error }}</li>
+                        {% endfor %}
+                    </ul>
+                {% endif %}
             </div>
             <div class="text-center">
                 <button type="submit" class="btn btn-primary btn-thin mt-4">Create Task</button>