ToDo Application

Web based ToDo application
Explore the contents » Try the app on Heroku »

Table of Contents

1. About The Project
   • Built With
2. Getting Started
   • Prerequisites
   • Installation
3. Usage
4. Contact

About The Project

This program was done as a project work for the React and NodeJS course. It has a database that stores all the inputs and the whole project is deployed to Heroku. User can add, delete, edit and view tasks in the app. When adding a task user can determine task name, priority and expiration date.

Built With

• React

• NodeJS

• ExpressJS

• Heroku

Getting Started

You can use the app in Heroku: https://tamk-4a00ez62-3002-group24.herokuapp.com/

Or you can get a local copy up and running by following these steps.

Prerequisites

• NodeJS

  https://nodejs.org/en/

Installation

1. Clone the repository to your computer:

   git clone https://github.com/Rhaxis/TodoProgram.git

2. Move to the directory:

   cd TodoProgram

3. Install modules using npm

   npm install

4. Move to frontend directory, install modules:

   cd todo-front
   npm install

5. Modify API_URL in todo-front/src/APIFunctions.js:

   import axios from "axios"
   
   const API_URL = "http://localhost:8080/api"

6. Create a frontend build:

   npm run build

7. Login to your SQL database and create a table:

   CREATE TABLE todos (
   id int(11) NOT NULL AUTO_INCREMENT,
   name varchar(50) DEFAULT NULL,
   is_done tinyint(1) NOT NULL DEFAULT '0',
   priority int(11) NOT NULL DEFAULT '0',
   date_created timestamp NOT NULL DEFAULT CURRENT_TIMESTAMP,
   deadline date DEFAULT NULL,
   PRIMARY KEY (id)
   );

8. Insert data into your database:

   INSERT INTO todos(name, is_done, priority, deadline) VALUES("Do the dishes", 0, 5, "2020-12-31");

9. Edit database/herokuconfig.js file to match your own database:

   module.exports = {
   host: your_database_url,
   user: your_username,
   password: your_password,
   database: your_database, 
   };

10. Move to project root and start the app:

    npm start

11. Open your browser and enter http://localhost:8080/

Usage

User can assign name, expiration date and priority for the task. After pressing add it gets added to the task list. Its possible to edit and delete the task on the list.

Contact

Ville Ekholm - [email protected]

Project Link: https://github.com/Rhaxis/TodoProgram