Skip to content

This is a ToDo application written in React & Node.js using Express & MongoDB

Notifications You must be signed in to change notification settings

LiorKGOW/To_Do_React_Node.js_Express

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

23 Commits
 
 
 
 
 
 

Repository files navigation

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 [email protected]:LiorKGOW/To_Do_React_Node.js_Express.git

  1. 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

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

cd ToDoServer

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

npm install

  1. 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!

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

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

cd ToDoClient

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

npm install

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

npm start

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

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

  3. Please read the Important Notices before using this application

  4. 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 App, presenting the data that is currently available from the DB in MongoDB

The initial state of 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: Pressing the update icon of the second ToDo item enters an update mode of this ToDo item

First, change the text in the text input box: Changing the text in the text input box and then pressing the update button

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

The title of this ToDo item was also changed in the DB in MongoDB: The title of the ToDo item was 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: Clicking on the delete icon 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: 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: After entering a requested text in the text input box and pressing the Add button, a new Todo item is created in the UI

Next, after clicking the Add button, a new ToDo item is created in the UI: 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: 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

About

This is a ToDo application written in React & Node.js using Express & MongoDB

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published