Welcome {{ loggedInUserName }}

Task List

{{ note.Task }}

About Us

Welcome to our Todo App! This website allows you to manage your tasks efficiently. You can sign up, log in, add tasks, and keep track of your daily activities. Our goal is to help you stay organized and productive.

How It Works

Using our Todo App is simple:

Sign up with your details using the Sign-Up form.
Log in using your email and password.
Once logged in, you can add new tasks using the Add Task button.
Your tasks will be linked to your account, so you can see them whenever you log in.
You can delete tasks once you complete them by clicking the Delete Task button.

How the website Works

How it works

Vue.js (Frontend)

Purpose:

Vue.js is a progressive JavaScript framework used to build the frontend of the application. It allows for creating interactive user interfaces and single-page applications (SPAs).

Features:

Data Binding: Uses v-model for two-way data binding between form inputs and the Vue instance data.
Event Handling: Uses @click to handle button clicks and call methods.
Conditional Rendering: Uses directives like v-if to conditionally render parts of the UI based on the application state.
HTTP Requests: Uses axios to send HTTP requests to the backend for CRUD operations (Create, Read, Update, Delete).

Node.js (Runtime Environment)

Purpose:

Node.js is a JavaScript runtime that allows you to run JavaScript code on the server side. It is used here to run the Express.js server.

Features:

Non-blocking I/O: Efficient handling of multiple requests without blocking the server, making it ideal for I/O-heavy operations like database interactions.

Express.js (Backend Framework)

Purpose:

Express.js is a web application framework for Node.js, designed for building web applications and APIs. It simplifies the process of building a server and handling routes.

Features:

Routing: Defines routes for handling different HTTP requests (GET, POST, DELETE).
Middleware: Uses middleware like cors for handling cross-origin requests and multer for handling form data.
Database Interaction: Interacts with MongoDB to perform CRUD operations.

MongoDB Atlas (Database)

Purpose:

MongoDB Atlas is a cloud database service that provides a fully-managed MongoDB database, which is scalable and easy to use.

Features:

Document Storage: Stores data in flexible, JSON-like documents.
Collections: Organizes data into collections (e.g., users, Todo).
Cloud Hosting: Provides a managed database in the cloud, making it easy to scale and manage.

How They Work Together

User Interaction with Vue.js:

The user interacts with the Vue.js frontend, which handles input and displays data.
For example, when a user signs up, Vue.js collects the input data using v-model and sends it to the backend using axios.

HTTP Requests to Express.js:

The Vue.js frontend sends HTTP requests to the Express.js server.
For example, the sign-up data is sent via a POST request to the /AddUsers endpoint.

Express.js Handling Requests:

The Express.js server receives the HTTP requests and processes them.
It uses middleware to parse the request data and interacts with MongoDB for data operations.
For example, the sign-up data is validated and then inserted into the users collection in MongoDB.

MongoDB Atlas Storing Data:

MongoDB Atlas stores the data in its cloud database.
For example, new user data is stored in the users collection.

Retrieving and Displaying Data:

When data needs to be retrieved (e.g., fetching tasks), the Vue.js frontend sends a GET request to Express.js.
Express.js queries MongoDB Atlas for the data and sends it back in the response.
Vue.js then updates the UI to display the data.
For example, when a user logs in, their tasks are fetched and displayed.

Welcome {{ loggedInUserName }}

Task List

About Us

How It Works

Sign-Up

Log-In

How the website Works

How it works

Vue.js (Frontend)

Node.js (Runtime Environment)

Express.js (Backend Framework)

MongoDB Atlas (Database)

How They Work Together

User Interaction with Vue.js:

HTTP Requests to Express.js:

Express.js Handling Requests:

MongoDB Atlas Storing Data:

Retrieving and Displaying Data: