TodoList App with Node.js, Express.js, and PostgreSQL Backend, and EJS for Server-Side Rendering

This was my first capstone-project as an introduction to Node.js, Express.js and EJS module for The Complete Web Development Bootcamp Online on Udemy.

I made an update to this project by integrating PostgreSQL with the pg client in a Node.js/Express backend. this update was a good step for me to enhance my understanding of CRUD (Create, Read, Update, Delete) operations and to practice more by executing what i learned during the PostgreSQL module.

The app now allows users to manage their daily tasks by adding, editing, and deleting them. Tasks can be marked as complete, which removes them from the database. Through this project, I aimed to gain hands-on experience with writing database queries, building a robust back-end, and rendering dynamic content on the front-end using EJS.

Features

Technologies Used

Installation

git clone https://github.com/AminebajjiDEV/ToDoList-node.js-express.js.git

 cd ToDoList-node.js-express.js

  npm install  

• Create a PostgreSQL database to store your tasks.

• Update the .env file in the project root with your database credentials. Use the provided .env.example as a template:

 DB_HOST=your_database_host
 DB_PORT=your_database_port
 DB_USER=your_database_username
 DB_PASSWORD=your_database_password
 DB_NAME=your_database_name

 npm index.js

• then Open your web browser and navigate to http://localhost:3000.

• Add a Task: On the main page, enter your task details in the provided form and click "Submit". The task will be saved in the PostgreSQL database.
• Edit a Task: To edit an existing task, click the "Pencil-edit" button next to the task. Make your changes in the form that appears and save the updates.
• Mark a Task as Complete: Click the "Check-box" button next to the task. This will remove the task from your list and delete it from the database.
• View Tasks: All tasks will be displayed on the homepage. Each task can be edited or marked as complete.

ToDoListApp/
│
├── views/               # EJS templates for rendering HTML
│   ├── partials/        # Partial EJS templates (header, footer)
│   ├── index.ejs        # Main page template
│   ├── explanations.ejs         # Code Overview explaining how the back/front-end foncutions 
│
├── public/              # Static files (CSS, JS, images)
|   ├── pictures/  
│   ├── css/
│   ├── js/
│
├── routes/              # Express route handlers
│   ├── index.js         # Main route for handling task operations
│
│
├── .env                 # Environment variables (not included in Git)
├── package.json         # Project metadata and dependencies
├── README.md            # Project documentation
└── ...                  # Other configuration and miscellaneous files

• GET /

This endpoint retrieves all the tasks from the database and displays them on the homepage.

Response:
    Status: 200 OK
    This renders the index.ejs page, showing all tasks listed under "Today."

• POST /add

This endpoint lets me add a new task to the database.

Request Body:
    newItem: The title of the task I want to add.

Response:
    Status: 302 Found (redirect)
    After adding the task, it redirects back to the homepage (/), where the new task appears.

• POST /delete

This endpoint is used to delete a task from the database.

Request Body:
    deleteItemId: The ID of the task I want to delete.

Response:
    Status: 302 Found (redirect)
    After deleting the task, it redirects to the homepage (/), with the task removed from the list.

• POST /edit

This endpoint allows me to update the title of an existing task in the database.

Request Body:
    updatedItemTitle: The new title I want to give the task.
    updatedItemId: The ID of the task I want to update.

Response:
    Status: 302 Found (redirect)
    Once the task is updated, it redirects to the homepage (/), displaying the updated task.

• GET /code-rev

This endpoint renders the explanations.ejs page, where I’ve included code explanations.

Response:
    Status: 200 OK
    This renders the explanations.ejs page.

• I’m open to contributions! If you have any ideas for improvements, bug fixes, or want to add new features, feel free to fork the repository and submit a pull request. Here’s how you can get involved:

• Click the "Fork" button on the top right of the repository page.

• Clone your forked repository to your local machine.

https://github.com/AminebajjiDEV/ToDoList-node.js-express.js.git

• Create a branch specifically for your feature or bug fix.

git checkout -b feature-or-bugfix-name

• Implement your changes or the new feature.

git commit -m "Description of the feature or bug fix"
git push origin feature-or-bugfix-name

• Go back to the original repository and submit a pull request.