Lior's ToDo Application - A Full Stack Application to Manage Tasks

Project Description

• Client written in React.js using hooks to manage components' state & Axios to handle HTTP requests and responses
• Server written in JavaScript using Express, Node.js & MongoDB as the database
• Supporting Create, Update & Delete operations
• Attaching Postman collection checking the API Server (can be found in the "ToDoServer" directory under "Postman Requests Collection")

How To Run This Application

1. First, insure you have the Required Prerequisites before continuing to the next step (can be found at the bottom of this readme)

2. Open a CLI Window in the path of your liking (this is the location where the application code & data would be stored in a folder called: To_Do_React_Node.js_Express)

3. Clone this repository to your local machine, using the following command (after opening a CLI window in the path of your liking):

git clone git@github.com:LiorKGOW/To_Do_React_Node.js_Express.git

4. Open a CLI window and navigate to the root folder of the project (where you have cloned it) using cd followed by the path of the root folder of the project

5. Navigate to the ToDoServer folder by typing the following command:

cd ToDoServer

6. Run the following command in order to install the server's dependencies:

npm install

7. Run the following command in order to run the ToDo Server:

npm start

Keep this CLI window open! The server must be running in order to use the ToDo Client!

8. Open a new CLI window and navigate to the root folder of the project, exactly like in step 2

9. Navigate to the ToDoClient folder by typing the following command:

cd ToDoClient

10. Run the following command in order to install the Client's dependencies:

npm install

11. Run the following command in order to run the ToDo Client:

npm start

12. Open your favorite browser (Please use a modern browser, preferably Google Chrome, Mozilla Firefox or Safari)

13. Navigate to: http://localhost:3000/ (should be done automatically after running the commmand in step 8)

14. Please read the Important Notices before using this application

15. Enjoy :)

---

Some Screenshots of the Application:

The initial state of the App, presenting the available data that is currently stored in the DB in MongoDB:

The initial state of the DB in MongoDB:

---

This Application Supports Several Actions

1. Updating Excisting ToDo Items In The ToDo List

Pressing the update icon (the icon of the pencil on the left) of the second ToDo item enters an update mode of this ToDo item:

First, change the text in the text input box:

Then, after pressing the Update button, the application updates this ToDo item's title in the UI:

The title of this ToDo item was also changed in the DB in MongoDB:

2. Deleting ToDo Items

Clicking on the delete icon (the trash can icon on the right) of the second ToDo item deletes this ToDo item from the ToDo list:

The second ToDo item is also deleted from the DB in MongoDB:

3. Adding New ToDo Items

First, enter a requested text in the text input box:

Next, after clicking the Add button, a new ToDo item is created in the UI:

The new ToDo item was also added in the DB in MongoDB:

---

Prerequisites

• Node.js Version 18 (or higher)
• npm version 9 (or higher)
• Git
• Here's a quick & easy Guide to help you install Node.js and npm on your local computer

---

Important Notices

Both CLI windows of the server and the client must remain open while using this application !

Ensure you have an active internet connection while using this application !

Please update me in case you have found any bugs, or in case you have any recommendation for updates or new features :)

Feel free to open a new pull request for any ideas you may have for improving this application :)

The Server runs on port 5000 and the client runs on port 3000 The server's port can be changed ! Changing the Server side's port in this file: ToDoServer.js (line 10)

What Would I Add Next

• Find a way to run the application with a single CLI window running both the server and the client (maybe Lerna)
• status state attribute of the ToDos, which would indicate the state of the ToDo "Done" / "In Progress" / "ToDo" the users can also change in the UI
• Read action to inspect a specific ToDo in an open modal feature or maybe by using React Router
• Drag & Drop action to change the order of the ToDos in the UI
• Deploying a live version of the application on the internet