todo-app

Todo App (Full Stack)

📝 To-Do List App

A simple and clean To-Do List application built with Vanilla JavaScript to practice core front-end concepts.

Project: Full Stack Todo App

Built REST API with Node.js & Express Implemented JWT authentication Connected MongoDB Atlas Deployed on Railway & Vercel

🚀 Live Demo

👉 Live Demo App: https://bassemgamal.github.io/todo-app/ 👉 Live Full App: https://todo-app-frontend-bassem-gamals-projects.vercel.app/

✨ Features

➕ Add new tasks ❌ Delete tasks ✅ Mark tasks as completed 🔍 Filter tasks (All / Active / Completed) 💾 Persistent data using LocalStorage 🎨 Clean and responsive UI

Authentication (JWT)
User-specific Todos
Dark Mode 🌙
Responsive UI
MongoDB + Express + Node.js

🛠 Technologies Used

HTML5 CSS3 JavaScript (ES6) LocalStorage Node.js Express MongoDB Vanilla JS Railway + Vercel

📂 Project Structure

todo-app/ │── .vscode │── node_modules │── middleware │── auth.js │── authMiddleware.js │── errorHandler.js │── models │── User.js │── routes │── auth.js │── todos.js │── public │── index.html │── style.css │── auth.html │── script.js │── styleAuth.css │── auth.js │── .env │── index.js │── README.md

🧠 What I Learned

DOM manipulation

Event handling

Working with Arrays & Objects

JavaScript Array methods (filter, forEach)

LocalStorage for data persistence

Writing clean and reusable code

How to Run Locally

Clone the repository:

git clone https://github.com/basemgamal/todo-app.git

git clone https://github.com/bassemgamal/Todo-App-Frontend.git

Open index.html in your browser.