Express ToDoList

Express web todolist app with EJS. Live demo is available on Cyclic or Render, both are free-tier plan.

Table of Contents

• General Info
• Technologies Used
• Features
• Screenshots
• Setup
• Usage
• Project Status
• Lesson Learned
• Room for Improvement
• Acknowledgements

General Information

• A simple express web server that implement EJS as page template
• The webpage allows user to note down or cross-out and remove the task as a to-do-list item
• It allows user to create customize list for specific task (by typing a self-define route)
• A set of 3 default tasks will be generated whenever the task database is empty.
• The web app is connected to mongoDB Atlas cloud service
• For the sake of practicing secure deployment, the URI of Atlas of the owner will not be uploaded to the remote repository.
• Purpose of building this project is to learn and practice my coding skill

Technologies Used

• Express: ^4.16.3
• Node: ^14.17.6
• ejs: ^3.1.8
• lodash: ^4.17.21
• mongoose: ^6.6.1
• dotenv: ^16.0.2

Features

• Mark down a task
• Cross-out a existing task

Screenshots

• Homepage

• Homepage (Add task)

• MongoDB Atlas (Task Collection)

• Work List Page

• MongoDB Atlas (List Collection Work Document)

• Work List Page (Add task)

• MongoDB Atlas (List Collection Work Document)(Add task embeded reference)

• Create new list of task

• MongoDB Atlas

• Remove task from the list

Setup

• Project environment:
  • Node.js installed.
  • MongoDB Shell installed.
• Cloud Database environment (Optional):
  • Create a mongoDB Atlas account

Usage

• On project terminal
  • install dependencies npm install
  • start the app npm app.js
• On Mongodb Shell
  • start the database server mongosh
• Or MongoDB Atlas (Optional):
  • Connect to your database via mongoose with the URI of your database (remember to change the information of username,password,clustername and password accordingly)
  • You should be able to get a customized URI from your account
  • For more detailed information and documentation, please visit mongoDB doc website mongoDB/docs

mongoose.connect("mongodb+srv://<username>:<password>@<clustername>.mongodb.net/<databasename>?w=majority");

Project Status

Project is: complete

Lesson Learned

• Experience the mongoDatabase development process
  • How to create, read, update, and delete documents of mongoDB
• Implement mongoose to the project
  • Create schema of mongoDB collection
  • Create schema validation
  • Create reference from another model
  • Create model with schema
  • Export model and schema
  • Learn the most basic mongoose functions and methods in order to manipulate the data from database
• Establish connection between cloud database service and web
• Make good use of hidden input and express dynamic route parameters to futher improve posting request
• Found alternative fullstack hosting websites other than heroku

Room for Improvement

• Improvement for more user-friendly user interface and user experience

Acknowledgements

• This project was inspired by Angela Yu.
• This project was based on this course on Udemy.