π User-friendly Full-Stack To-do List Web App ! Simplify task management, create, delete and store tasks easily
MIT License
π 14 Stars! ββββββββββββββ
In the midst of busy modern life, developer Shreya took on the challenge of simplifying daily routines. Recognizing the chaos of managing tasks , she set out to create the ToDo List Appβa user-friendly tool for efficient task management. The app, hosted on Heroku with secure data storage on AWS-based MongoDB Atlas, empowers users to stay organized and productive. Today, it stands as a symbol of her commitment to simplifying lives, one task at a time. πͺπ It was created with the goal of providing a simple yet effective tool for managing daily tasks. As a user, you can easily create and delete tasks to stay organized and productive. The app's responsive design ensures that you can access your tasks from any device, whether it's your computer, tablet, or smartphone. π±πΌπ
Check out the live demo of the ToDo List App: Live Demo ππ
Frontend:
Backend:
Deployment and Hosting:
1. Database Connection Issues
Challenge: Connecting to MongoDB Atlas - connection error message.
Solution: Ensure that the IP allowlist in your MongoDB Atlas cluster allows connections from your network. Double-check credentials and authentication settings. Consider whitelisting the IP address or range. πππ
2. Responsive Design
Challenge: Designing a responsive user interface that adapts to different screen sizes can be complex.
Solution: Utilize CSS media queries to create responsive layouts, ensuring elements adjust appropriately on various devices. Test the app on different screen sizes to refine the design. π±π₯οΈπ
3. Handling User Input
Challenge: Managing user input and interactions, such as adding and deleting tasks, can be intricate.
Solution: Implement robust form handling and validation in your app. Use Express.js to process user input securely. Handle database updates and deletions carefully to avoid data corruption. ππ¨βπ»π§
To run this application locally or contribute to its development, follow these steps:
Clone the Repository:
git clone https://github.com/shreyamalogi/todolist-app.git
cd todolist-app
Install Dependencies:
npm install
Run the App:
node app.js
The app should now be running locally at http://localhost:3000
. ππ¨
Mongodb setup
To start MongoDB server and connect to it using MongoDB Compass, follow these steps:
Install MongoDB: If you haven't already installed MongoDB, you can download it from the official MongoDB website (https://www.mongodb.com/try/download/community). Follow the installation instructions for your operating system.
Start MongoDB Server:
mongod
command in your terminal or command prompt.--port
option if needed.mongod
Open MongoDB Compass:
Connect to MongoDB Server:
Configure Connection:
localhost
on port 27017
.Create New Tasks: Users can create new tasks to add to their to-do lists. β
Mark Tasks as Completed: Users can mark tasks as completed to track their progress. β
** Delete Existing Tasks**: Users can delete tasks they no longer need. βοΈποΈ
User-Friendly and Intuitive Interface: The app aims to provide a user-friendly and intuitive interface for a smooth task management experience. π€π
Data Persistence Using MongoDB: MongoDB is used to persistently store task data, ensuring that tasks are retained even after the user closes the app. ποΈπΎ
Hosted on Heroku with AWS-Based Database Storage: The app is hosted on Heroku, providing online access to users. The database is hosted on AWS through MongoDB Atlas, ensuring reliable and scalable data storage. πβοΈ
These features collectively make your ToDo List App a useful tool for task management and organization. Users can efficiently create, delete, and track their tasks with the app's intuitive interface, and the data is securely stored in the cloud for accessibility from anywhere. πππ
To understand how the app was built from scratch and explore different versions, follow these steps:
Click on the "Commits" tab in the GitHub repository. ππ
Select a specific commit representing a version (e.g., "Version 1 - Initial Setup"). πποΈ
Click "Browse Files" to view the code changes for that version. ποΈπ
This commit history provides insights into the app's development process. ππ
To download a specific version of your project using the command line (CMD or terminal), you can use the Git command-line tool. Here are the steps to download a specific version of your project:
Open a Terminal/Command Prompt: Open your terminal or command prompt on your computer. π»π
Navigate to Your Project's Directory: Use the cd
command to navigate to the directory where your project is stored. For example: ππΆ
cd path/to/your/todolist-app
Replace path/to/your/todolist-app
with the actual path to your project directory. ππ
List Available Versions: To see a list of available versions (commits), you can use the git log
command. This will display a list of commits along with their unique commit IDs (hashes) and commit messages. πποΈ
git log
You'll see something like this:
commit 1234567890abcdef1234567890abcdef12345678 (HEAD -> master)
Author: Your Name <[email protected]>
Date: Mon Sep 20 12:34:56 2023 +0200
Version 1.0 - Initial Setup
commit abcdef1234567890abcdef1234567890abcdef12
Author: Your Name <[email protected]>
Date: Tue Sep 21 09:00:00 2023 +0200
Version 1.1 - Templating Engine Integration
# ... (more commits)
Checkout the Desired Version: To download a specific version, use the git checkout
command followed by the commit ID of the version you want. For example, to download "Version 1.0 - Initial Setup," you would use the commit ID associated with that version:
git checkout 1234567890abcdef1234567890abcdef12345678
Replace 1234567890abcdef1234567890abcdef12345678
with the actual commit ID you want to download. ππ¦
Explore the Downloaded Version: Once you've checked out the specific version, your project files will be updated to reflect the state of that version. You can now explore the code and files for that particular version on your local system. π©βπ»π
Return to the Latest Version (Optional): If you want to return to the latest version (the master
branch), you can use the git checkout
command without specifying a commit ID:
git checkout master
This will bring you back to the latest version of your project. ππ
Please note that when you check out a specific version, you'll be in a "detached HEAD" state, which means you can view and work with the code, but changes won't be saved to the version history. If you want to make changes based on a specific version, it's recommended to create a new branch from that version using git checkout -b new-branch-name
. ππΏ
Contributions to the ToDo List App are welcome! Here are the steps to contribute:
master
branch. π€Please adhere to the project's coding standards and include appropriate tests if necessary. π οΈπ
This project is licensed under the MIT License - see the LICENSE file for details. ππ
MIT License
Copyright (c) 2022 Shreya Malogi π π
If you find this ToDo List App helpful or interesting, please consider starring this repository on GitHub to show your support. πππ
TodoList app deployed on heroku : https://polar-castle-59133.herokuapp.com/
database deployed on aws cluster : admin access URL