Skip to content

Latest commit

 

History

History
158 lines (128 loc) · 5.59 KB

README.md

File metadata and controls

158 lines (128 loc) · 5.59 KB

SBMRD-Todo: A Modern Todo List Application

Todo App Banner

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 React
Spring Boot Backend framework for RESTful APIs Spring Boot
MongoDB NoSQL database for storing users and todos MongoDB
Docker Containerization for consistent environments Docker
Docker Compose Orchestrates multi-container setup Docker Compose
Nginx Reverse proxy for routing frontend and API requests Nginx
Node.js Runtime for building and running the frontend Node.js
Java Language for the Spring Boot backend Java
Maven Build tool for the Spring Boot backend Maven
Axios HTTP client for frontend API requests Axios

📂 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

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! 🚀