A user can access a TODO Applcation by providing login credentials - email (as username) and password. It is assumed that the user has been registered by the administrator of the application. After a successful login, the user sees an interface to add todo items. The first time the user logins into the application, the todo list is empty, however, if the user had previously entered some todo items, they will appear as a list with the possibility to delete a todo as required. Additionally, the UI shows the user's profile picture, name of the user, current local date and time, and the total number of todo items that belong to the user. There is a Logout button to logout of the application.
The running app is available at Todo-App
Use the credentials provided below, Click-here, to login to the app
Open a terminal (or a shell) and navigate to a location of your choice. Then issue the following command to clone the repository:
After cloning the repository as mentioned above, run the following commands
The server will start listening on port 3002. Click-here for API endpoints. Since the folder - build, is also included here in the repository, the application's frontend can also be accessed at http://localhost:3002
Note: Make sure that the port 3002 is not being used by other services.
Open a new terminal (or a shell), and navigate to the the todo-application-with-login folder that was cloned previously. Then issue the following commands.
After this, the frontend app should automatically launch on the browswer at
In case, the app does not launch automatically, it can be manually launched on your browser by entering
Note: Make sure that the port 3000 is not being used by other services.
username/email: bikp@gmail.com, password: bikarnapokharel
username/email: tim@gmail.com, password: timjackson
username/email: rudolf@gmail.com, password: rudolftampere
Note: credentials and environment variables should not generally be shared publicly. It is done here only for the purpose of demonstration
- GET users:
http://localhost:3002/api/users/
- GET todos:
http://localhost:3002/api/todos/
- The frontend was bootstraped with Create React App
- The backend was created as an
npm
project - IDE used:
Visual Studio Code
- Version Control using
git
- Database:
MongoDB Atlas cloud
REST client
in Visual Studio Code for performing HTTP actions
express
for backend/api serveraxios
for fetching data from the backend/apimongoose
for mongoDBcors
for allowing cross-origin in the backend serverdotenv
for environment variablesbcrypt
for password hashingjsonwebtoken
for user token authentication
cross-env
for cross-platform environmentnodemon
for reloading the devlopment backend serverjest
for testingsupertest
for testing the API