Simple To-Do List Application

This application uses Angular and Bootstrap on the frontend for interactive and responsive UI. The backend is built with NodeJS and Express.js which uses MySQL for data management. The entire app is hosted on Firebase.

Live Demo

For live demo of the application, please visit: https://darrels-todolist.web.app/

Technologies Used

• Frontend: Angular and Bootstrap
• Backend: Node.js, Express.js, and MySQL
• Hosting: Firebase

Getting Started

These instructions will get you a copy of the project up and running on your local machine for development and testing purposes.

Table of Contents

1. Installation
2. Running the Application
3. Screenshots

Installation

Here are the steps to install and setup the application.

Prerequisites

• NodeJS
• Angular CLI
• XAMPP
• MySQL

Clone Repository

Clone the repository by running command:

git clone [email protected]:DarrelMendoza/to-do-list.git

Setting up the Backend

The NodeJS and Express.js file named app.js is located in the api folder. The exported MySQL database file is located in the db folder.

1. Install XAMPP for our MySQL database.
2. Open XAMPP control panel and start the Apache and MySQL services.
3. Navigate to http://localhost/phpmyadmin/ on your browser.
4. Click on 'Import' and choose the exported database file from the db folder. Click 'Go' to import the database.
5. Clone the repository and navigate to the api folder.
6. Run npm install to install the required dependencies.

Setting up the Frontend

Make sure that you have the Angular CLI installed globally. If not, install it using the following command:

npm install -g @angular/cli

1. Navigate to the root directory of the project.
2. Run npm install to install all the required dependencies.

Running the Application

To run the application, you need to start both the backend and the frontend servers.

Running the Backend

Navigate to the api folder. Run the following command to start the server:

node app.js

You should now have your backend running on http://localhost:3000/.

Running the Frontend

Navigate to the root directory of the project. Run the following command to start the Angular dev server:

ng serve

You should now have your frontend running on http://localhost:4200/. Visit http://localhost:4200/ in your browser. Your application should be up and running.

Screenshots

Below are some more screenshots demonstrating the features of the application.

Main Page

Adding a Task

Editing a Task

Deleting a Task

Acknowledgements

• Angular
• Bootstrap
• Node.js
• Express.js
• MySQL
• Firebase

Feel free to fork this repository and enhance the application.