Skip to content

πŸš€ User-friendly Full-Stack To-do List Web App ! Simplify task management, create, delete and store tasks easily

License

Notifications You must be signed in to change notification settings

shreyamalogi/Task-Management-App

Folders and files

NameName
Last commit message
Last commit date

Latest commit

Β 

History

30 Commits
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 

Repository files navigation

πŸš€πŸ“…πŸ“ Task Management App: ToDo List App πŸ“πŸ“…πŸš€

todo

πŸ† 14 Stars! ⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐

  • Why? πŸ€”

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. πŸ“±πŸ’ΌπŸŒŸ

  • Demo πŸ“Ί

Check out the live demo of the ToDo List App: Live Demo πŸŒπŸ‘€

Table of Contents πŸ“š

  • Technical Stack
  • Getting Started
  • Features
  • Code History
  • Contributing
  • License πŸ“πŸ‘©β€πŸ’»πŸ”

Technical Stack πŸ› οΈ

  • Frontend:

    • HTML 🌐
    • Custom CSS 🎨
    • JavaScript πŸš€
    • EJS (Embedded JavaScript) for templating πŸ–ΌοΈ
  • Backend:

    • Node.js πŸš€
    • Express.js πŸš€
    • MongoDB via Mongoose (ODM) πŸƒ
  • Deployment and Hosting:

    • Hosted on Heroku 🌐
    • MongoDB hosted on AWS cluster via MongoDB Atlas β˜οΈπŸ“Š

Challenges Faced and Their Solutions πŸ€―πŸ’‘

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. πŸ“πŸ‘¨β€πŸ’»πŸ”§

Getting Started πŸš€

To run this application locally or contribute to its development, follow these steps:

  1. Clone the Repository:

    git clone https://github.com/shreyamalogi/todolist-app.git
    cd todolist-app
    
  2. Install Dependencies:

    npm install
    
  3. Run the App:

    node app.js
    

    The app should now be running locally at http://localhost:3000. πŸƒπŸ’¨

  4. Mongodb setup

    To start MongoDB server and connect to it using MongoDB Compass, follow these steps:

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

  6. Start MongoDB Server:

    • On most systems, you can start the MongoDB server by running the mongod command in your terminal or command prompt.
    • If MongoDB is installed correctly, this command will start the server. It will listen on the default port 27017 by default. You can specify a different port using the --port option if needed.
    mongod
    
  7. Open MongoDB Compass:

  8. Connect to MongoDB Server:

    • Launch MongoDB Compass after installation.
    • On the initial screen, click the "Connect" button.
  9. Configure Connection:

    • In the "Connect to Host" dialog box, you'll need to configure your connection settings.
    • By default, Compass will try to connect to localhost on port 27017.
    • If your MongoDB server is running on the default settings, you can simply click the "Connect" button. Compass will connect to the server.

Features 🌟

  1. Create New Tasks: Users can create new tasks to add to their to-do lists. βœ…

  2. Mark Tasks as Completed: Users can mark tasks as completed to track their progress. βœ…

  3. ** Delete Existing Tasks**: Users can delete tasks they no longer need. βœοΈπŸ—‘οΈ

  4. User-Friendly and Intuitive Interface: The app aims to provide a user-friendly and intuitive interface for a smooth task management experience. πŸ€—πŸ‘Œ

  5. Data Persistence Using MongoDB: MongoDB is used to persistently store task data, ensuring that tasks are retained even after the user closes the app. πŸ—„οΈπŸ’Ύ

  6. 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. πŸ“πŸ“ˆπŸŒ

Code History πŸ“œ

To understand how the app was built from scratch and explore different versions, follow these steps:

  1. Click on the "Commits" tab in the GitHub repository. πŸ“šπŸ”

  2. Select a specific commit representing a version (e.g., "Version 1 - Initial Setup"). πŸ“ŒπŸ—‚οΈ

  3. Click "Browse Files" to view the code changes for that version. πŸ‘οΈπŸ“‚

This commit history provides insights into the app's development process. πŸš€πŸ”

Code History steps:

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:

  1. Open a Terminal/Command Prompt: Open your terminal or command prompt on your computer. πŸ’»πŸ”‘

  2. 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. πŸ“πŸ“

  3. 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 <youremail@example.com>
    Date:   Mon Sep 20 12:34:56 2023 +0200
    
        Version 1.0 - Initial Setup
    
    commit abcdef1234567890abcdef1234567890abcdef12
    Author: Your Name <youremail@example.com>
    Date:   Tue Sep 21 09:00:00 2023 +0200
    
        Version 1.1 - Templating Engine Integration
    
    # ... (more commits)
    
  4. 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. πŸš€πŸ“¦

  5. 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. πŸ‘©β€πŸ’»πŸ“‚

  6. 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. 🌟🌿

Contributing 🀝🌟

Contributions to the ToDo List App are welcome! Here are the steps to contribute:

  1. Fork the repository. 🍴
  2. Create a new branch for your feature or bug fix. 🌿
  3. Make your changes and commit them with clear, concise commit messages. πŸ“
  4. Push your changes to your fork. πŸš€
  5. Create a pull request to the main repository's master branch. πŸ“€

Please adhere to the project's coding standards and include appropriate tests if necessary. πŸ› οΈπŸ“Š

License πŸ“œ

This project is licensed under the MIT License - see the LICENSE file for details. πŸ“šπŸ“„

MIT License

Copyright (c) 2022 Shreya Malogi πŸ“…πŸ“†

Star This Repository ⭐

If you find this ToDo List App helpful or interesting, please consider starring this repository on GitHub to show your support. 🌟🌟🌟

Deployment---resources for me

TodoList app deployed on heroku : https://polar-castle-59133.herokuapp.com/

database deployed on aws cluster : admin access URL

About

πŸš€ User-friendly Full-Stack To-do List Web App ! Simplify task management, create, delete and store tasks easily

Topics

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published