📝 Task Manager

A task management application built with React on the frontend, Material UI for styling, AWS Amplify for deploy, AWS Lambda + MongoDB on the backend. This application allows you to create, edit, delete, and organize tasks efficiently, perfect for staying productive and focused on your daily goals.

🚀 Live Demo

🔗 View Live App

🔗 API Documentation

🛠️ Tech Stack

Frontend

• ⚛️ React – Library for building user interfaces.
• 🎨 Material UI (MUI) – React component library for fast and beautiful UI development.
• ☁️ AWS Amplify – Hosting and CI/CD for the frontend.

Backend

• 🧠 AWS Lambda + MongoDB Atlas – Serverless functions for backend logic and data persistence.
• 🖥️ API Gateway – Exposing Lambda functions as RESTful endpoints.

📂 Project Structure

task-manager/
├── frontend/  # Frontend folder for React
│   ├── public/
│   ├── src/
│   │   ├── components/
│   │   ├── pages/
│   │   ├── redux/
│   │   └── App.jsx
│   ├── amplify/  (generated by AWS Amplify)
│   ├── .gitignore
│   ├── package.json
│   └── README.md
│
├── backend/   # Backend folder for AWS Lambda
│   ├── function/
│   ├── .env
│   ├── requirements.txt
│   ├── README.md
│   └── tests/
├── docker-compose.yml
├── Dockerfile
└── README.md

✨ Features

• ✅ Add new tasks.
• ✏️ Edit existing tasks.
• 🗑️ Delete tasks.
• 📌 Mark tasks as completed / in progress / pending.
• 📊 Display tasks in a chart.

⚙️ Run Locally

To run both projects with Docker:

1. Clone the repository:

   git clone https://github.com/your-username/task-manager.git
   cd task-manager

2. Ensure you have Docker and Docker Compose installed.

3. Use Docker Compose to bring up the containers:

   docker-compose up --build

This will build and bring up both the frontend and backend in separate containers. You can access the application from http://localhost:3000 (frontend) and the backend will be accessible through the defined API Gateway endpoints.

📦 Docker

Dockerfile for Frontend (React)

# Frontend Dockerfile

# Use a Node.js base image
FROM node:18-alpine

# Set working directory
WORKDIR /app

# Copy package.json and package-lock.json
COPY frontend/package*.json ./

# Install dependencies
RUN npm install

# Copy the rest of the files
COPY frontend/ .

# Run the build command
RUN npm run build

# Expose port 3000
EXPOSE 3000

# Command to start the server
CMD ["npm", "start"]

Dockerfile for Backend (AWS Lambda + API Gateway)

# Backend Dockerfile

# Use a Python base image
FROM python:3.9-alpine

# Set working directory
WORKDIR /app

# Copy the backend files
COPY backend/ .

# Install Python dependencies
RUN pip install -r requirements.txt

# Expose port 5000 for the server (if using Flask or similar)
EXPOSE 5000

# Command to start the backend (if using Flask, for example)
CMD ["python", "app.py"]

Docker Compose

version: '3'

services:
  frontend:
    build:
      context: .
      dockerfile: Dockerfile.frontend
    ports:
      - "3000:3000"
    depends_on:
      - backend

  backend:
    build:
      context: .
      dockerfile: Dockerfile.backend
    ports:
      - "5000:5000"
    environment:
      - MONGO_URI=mongodb://mongo:27017
    depends_on:
      - mongo

  mongo:
    image: mongo
    volumes:
      - mongo_data:/data/db
    ports:
      - "27017:27017"

volumes:
  mongo_data:

Deployment Instructions

1. Docker Compose: Both projects can be deployed together using docker-compose to manage the containers.

2. AWS Amplify (Frontend): The frontend is configured to be deployed to AWS Amplify, which makes it easy to integrate and auto-deploy on each push to the main branch.

3. Backend (AWS Lambda): The backend is deployed to AWS Lambda and API Gateway. Follow the instructions to upload the code to Lambda and associate HTTP methods in API Gateway.

👩🏻‍💻 Author

Elizabeth de la Paz

Frontend Developer | Passionate about code and productivity 🚀

💜 elizabthpazp