SBMRD-Todo: A Modern Todo List Application

A full-stack todo list application built with a modern tech stack, featuring user authentication, task management, and a scalable deployment setup. Deployable anywhere—local machines, Codespaces, or EC2 instances—thanks to Docker and a flexible architecture.

---

✨ Features

• User Authentication: Register and login securely.
• Task Management: Add, toggle, and delete todos.
• Responsive UI: Clean, modern design with Material-UI.
• Scalable Deployment: Runs seamlessly with Docker Compose.
• Cross-Environment: Works locally, in Codespaces, or on cloud instances like EC2.

---

🛠️ Technologies Used

Technology	Description	Icon
React	Frontend library for building the UI
Spring Boot	Backend framework for RESTful APIs
MongoDB	NoSQL database for storing users and todos
Docker	Containerization for consistent environments
Docker Compose	Orchestrates multi-container setup
Nginx	Reverse proxy for routing frontend and API requests
Node.js	Runtime for building and running the frontend
Java	Language for the Spring Boot backend
Maven	Build tool for the Spring Boot backend
Axios	HTTP client for frontend API requests

---

📂 Project Structure

SBMRD-Todo/
├── backend/              # Spring Boot backend
│   ├── src/             # Java source code
│   ├── Dockerfile       # Backend container definition
│   └── pom.xml          # Maven dependencies
├── frontend/            # React frontend
│   ├── src/            # React source code (components, etc.)
│   ├── public/         # Static assets
│   ├── Dockerfile      # Frontend container definition
│   └── package.json    # Node dependencies
├── nginx.conf           # Nginx configuration for proxying
├── docker-compose.yml   # Multi-container orchestration
└── README.md            # Project documentation

---

🚀 Getting Started

Prerequisites

• Docker and Docker Compose
• Node.js (for local frontend development)
• Java 17 and Maven (for local backend development)

Installation

1. Clone the Repository

   git clone https://github.com/yourusername/SBMRD-Todo.git
   cd SBMRD-Todo

2. Run with Docker Compose

   docker compose up --build

   • Access the app at http://localhost:80/login (or your EC2 public IP, e.g., http://54.210.66.219/login).

3. Local Development (Optional)

   • Backend:

     cd backend
     mvn clean spring-boot:run

   • Frontend:

     cd frontend
     npm install
     npm start

     • Access at http://localhost:3000/login.

---

🌐 Deployment

EC2 Deployment

1. SSH into your EC2 instance.
2. Copy the project folder:

   scp -r SBMRD-Todo ec2-user@<ec2-public-ip>:/home/ec2-user/

3. Install Docker and Docker Compose on EC2:

   sudo yum update -y
   sudo yum install docker -y
   sudo curl -L "https://github.com/docker/compose/releases/latest/download/docker-compose-$(uname -s)-$(uname -m)" -o /usr/local/bin/docker-compose
   sudo chmod +x /usr/local/bin/docker-compose
   sudo systemctl start docker

4. Run:

   cd SBMRD-Todo
   docker compose up --build

5. Update Security Group:
   • Allow inbound TCP on port 80 from 0.0.0.0/0.

Codespaces

• Open in GitHub Codespaces.
• Run docker compose up --build.
• Forward port 80 in the "Ports" tab.
• Access via the forwarded URL (e.g., https://<your-codespace>-80.app.github.dev/login).

---

📝 Usage

1. Open the app in your browser.
2. Register with a username (e.g., teste) and password (e.g., pass123).
3. Log in to manage your todos:
   • Add tasks.
   • Toggle completion.
   • Delete tasks.

---

🗄️ Database Access

To list registered users in MongoDB:

docker compose exec mongo mongosh
use todo_db
db.users.find()

---

🤝 Contributing

1. Fork the repository.
2. Create a feature branch (git checkout -b feature/xyz).
3. Commit changes (git commit -m "Add xyz feature").
4. Push to the branch (git push origin feature/xyz).
5. Open a Pull Request.

---

🙏 Acknowledgments

• Icons by Shields.io.
• Inspired by modern full-stack tutorials.

---

Happy coding! 🚀