To-do List Application

The application comprises of 2 seperated applications.

Back-end application uses the following: Spring Boot, Spring Data, MVC, Lombok, H2, JDBC driver and Maven as the package manager.

Front-end application is a React.js app. It makes use of many libraries such as bootstrap and jquery. Yarn is the package manager for the front-end.

The front-end and back-end applications are connected to each other with REST APIs.

Please note that I've started to learn about how to use these technologies exactly one week ago. So this project is a combination of the tutorials and projects I found online.

Windows

Deploying the back-end

1. Install git on your computer

Download and install git from the following link.
You can either clone the repository or download the project manually.

2. Install JDK 1.8

Download and install jdk8u-181 from the following link.

3. Install Maven

Download maven from the following link. If you're not sure how to install, you can follow this guide.

4. Run the application

Head into the root of the Todos-Server project from the file explorer. Right click and launch git bash inside. Then enter the following command:

$ mvn clean spring-boot:run

Please note that Maven will be making a lot of downloads, so you may need to wait a while depending on your internet connection.

5. Check your browser (or use Curl if it's installed)

Once the application is launched, open your browser and go to the following link:

localhost:8080 or localhost:8080/lists (localhost:8080 is the default address. It has been tested on 3 different OSs.)

You should see the following message:   Congratulations from TodosController.java

    or the template DB entries depending on the address you entered to your browser.

Deploying the front-end

6. Install Yarn

Download (.msi) and install Yarn from the following link.

7. Install Node.js

Download (.msi) and install Node.js from the following link.

Once Node.js is installed, repeat the steps provided in the guide given in step 3 for changing Windows system variables. Edit your PATH environment variable by adding %AppData%\npm\bin before the Node.js entry. Move it if it already exists.
This is necessary to run $ npm commands in git bash.

8. Install React.js

Then enter the following command in git bash:

$ npm install -g create-react-app

There will be a brief download.

9. Download the necessary node modules

Head into the root of the todos-client project from the file explorer. Right click and launch git bash inside. Then enter the following command:

$ npm install

Please note that Maven will be making a lot of downloads, so you may need to wait a while depending on your internet connection.

10. Run the application

Head into the root of the todos-client project from the file explorer. Right click and launch git bash inside. Then enter the following command:

$ yarn start

Your OS will open the front-end page in your default browser.
If you see no To do lists, check the address in the browser. If it's different than localhost:3000 then you need to open TodoListController.java in the directory
./Todos-Server/src/main/java/com/cagdasmer/springrest/todolist and change the line:

@CrossOrigin(origins = "http://localhost:3000") according to the port allocated to the application.

Linux (Ubuntu 18.04)

Enter the following commands in Linux terminal in the order they are given.

Deploying the back-end

1. $ sudo apt install git

You can either clone the repository or download the project manually.
If jdk 1.8 is not installed in your system. Once the project is cloned/downloaded, open the pom.xml in Todos-Server directory and remove the comment tags around the last dependency property.

2. $ sudo apt install maven

4. $ mvn clean spring-boot:run

Deploying the back-end

Open a new terminal

3. $ sudo apt install curl

4. $ curl -sS https://dl.yarnpkg.com/debian/pubkey.gpg | sudo apt-key add - $ echo "deb https://dl.yarnpkg.com/debian/ stable main" | sudo tee /etc/apt/sources.list.d/yarn.list

5. $ sudo apt-get update && sudo apt-get install yarn

6. $ yarn install

7. $ sudo apt install npm

8. $ npm install -g create-react-app

9. $ npm install (inside todos-client)

10. $ yarn start

Known Issues

1. Once an item is deleted from a list, newly added items do not show up until the page is refreshed. I'm not yet aware of the exact reason of this issue.

2. Once a new to-do list is created, the completion filters will not work on newly added items until the checkboxes are ticked once.
This is because the newly added items' initial values are null/undefined and they are treated as uncontrolled components. I aim to fix this issue in the future.

3. Sometimes searcing in a newly created and empty list may result in errors, making it impossible to return to the page. It is possible to recover from this problem by re-deploying the server-side application.