📋 Serverless Task Manager

A fully functional serverless task management application built with AWS services and vanilla JavaScript.

🎯 Project Overview

This project demonstrates a complete serverless architecture with:

• User Authentication using AWS Cognito
• REST API with AWS API Gateway
• Serverless Functions using AWS Lambda
• NoSQL Database with AWS DynamoDB
• JWT Token Security for API authorization

🏗️ Architecture

┌─────────────┐
│   Browser   │
│  (Frontend) │
└──────┬──────┘
       │
       │ 1. Login Request
       ▼
┌─────────────────┐
│  AWS Cognito    │ ──► Returns JWT Token
└─────────────────┘
       │
       │ 2. API Request (with JWT)
       ▼
┌─────────────────┐
│  API Gateway    │ ──► Validates JWT
└────────┬────────┘
         │
         │ 3. Invoke Function
         ▼
┌─────────────────┐
│  Lambda         │ ──► Process Request
└────────┬────────┘
         │
         │ 4. Store/Retrieve Data
         ▼
┌─────────────────┐
│  DynamoDB       │ ──► Return Data
└─────────────────┘

🚀 Features

• ✅ User registration and login
• ✅ Secure JWT-based authentication
• ✅ Create tasks with title, description, and priority
• ✅ View all user tasks
• ✅ Delete tasks
• ✅ Real-time UI updates
• ✅ Responsive design
• ✅ Error handling and user feedback

📁 Project Structure

serverless-app/
├── index.html                  # Main application UI
├── styles.css                  # Application styling
├── app.js                      # Frontend logic and API calls
├── config.js                   # AWS configuration
├── IMPLEMENTATION_GUIDE.md     # Detailed setup guide
├── lambda-functions/
│   ├── createTask.js          # Lambda: Create task
│   ├── getTasks.js            # Lambda: Get tasks
│   └── deleteTask.js          # Lambda: Delete task
└── README.md                  # This file

🛠️ Technologies Used

Frontend

• HTML5
• CSS3 (with modern flexbox and animations)
• Vanilla JavaScript (ES6+)

Backend (AWS Services)

• AWS Cognito: User authentication and management
• AWS API Gateway: REST API management
• AWS Lambda: Serverless compute (Node.js)
• AWS DynamoDB: NoSQL database
• AWS IAM: Role-based access control

📋 Prerequisites

Before you begin, ensure you have:

1. AWS Account (Free Tier eligible)
2. Basic knowledge of:
   • HTML/CSS/JavaScript
   • REST APIs
   • AWS Console navigation
3. Web browser
4. Text editor (VS Code recommended)

⚙️ Setup Instructions

Step 1: Clone or Download Files

# Download all project files to a directory
mkdir serverless-task-manager
cd serverless-task-manager

Step 2: AWS Setup

Follow the detailed instructions in IMPLEMENTATION_GUIDE.md:

1. Create DynamoDB Table

   • Table name: TasksTable
   • Partition key: userId (String)
   • Sort key: taskId (String)

2. Create Cognito User Pool

   • Enable email sign-in
   • Create app client
   • Note User Pool ID and Client ID

3. Create Lambda Functions

   • Deploy createTask.js
   • Deploy getTasks.js
   • Deploy deleteTask.js (optional)
   • Add DynamoDB permissions

4. Create API Gateway

   • Create REST API
   • Add Cognito authorizer
   • Create /tasks resource
   • Add POST and GET methods
   • Enable CORS
   • Deploy to prod stage

Step 3: Configure Frontend

Update config.js with your AWS values:

const AWS_CONFIG = {
    cognito: {
        userPoolId: 'YOUR_USER_POOL_ID',
        clientId: 'YOUR_CLIENT_ID',
        region: 'YOUR_REGION'
    },
    api: {
        endpoint: 'YOUR_API_GATEWAY_URL',
        stage: 'prod'
    }
};

Step 4: Run the Application

Option 1: Python HTTP Server

python3 -m http.server 8000

Option 2: Node.js HTTP Server

npx http-server -p 8000

Option 3: VS Code Live Server

• Install Live Server extension
• Right-click index.html
• Select "Open with Live Server"

Open http://localhost:8000 in your browser.

🧪 Testing the Application

Test Flow

1. Sign Up

   • Click "Sign Up" link
   • Enter email and strong password
   • Submit form
   • Check email for verification (if enabled)

2. Login

   • Enter credentials
   • Click "Login"
   • Verify redirect to task page

3. Create Task

   • Fill in task details
   • Select priority
   • Click "Add Task"
   • Verify task appears in list

4. View Tasks

   • See all your tasks displayed
   • Each task shows title, description, priority, and date
   • Click "Refresh" to reload tasks

5. Delete Task

   • Click "Delete" button
   • Confirm deletion
   • Verify task is removed

6. Logout

   • Click "Logout" button
   • Verify return to login page

🐛 Troubleshooting

Common Issues

Problem: Login/Signup fails

• Verify Cognito User Pool ID and Client ID in config.js
• Check password meets requirements (min 8 chars, uppercase, lowercase, number)
• Look at browser console for detailed errors

Problem: Tasks not loading

• Verify API Gateway URL in config.js
• Check API Gateway has Cognito authorizer enabled
• Review Lambda CloudWatch logs for errors
• Ensure CORS is enabled on all methods

Problem: CORS errors

• Enable CORS on all API Gateway methods
• Redeploy API after enabling CORS
• Check Lambda functions return CORS headers

Problem: Unauthorized errors

• Verify JWT token is being sent in Authorization header
• Check token hasn't expired (tokens typically last 1 hour)
• Re-login to get fresh token

Debug Tools

Browser Console

Press F12 → Console tab
Check for JavaScript errors

Network Tab

F12 → Network tab
Filter by XHR/Fetch
Check request/response details

AWS CloudWatch

AWS Console → CloudWatch → Log groups
Check /aws/lambda/CreateTask logs
Check /aws/lambda/GetTasks logs

📸 Screenshots Required for Submission

1. Login Page: Show login form
2. Task Creation: Show task form with data and success message
3. Task List: Show multiple tasks displayed with details

📄 API Documentation

Authentication

All API requests require a JWT token in the Authorization header:

Authorization: Bearer <JWT_TOKEN>

Endpoints

Create Task

POST /tasks
Content-Type: application/json
Authorization: Bearer <token>

Body:
{
  "title": "Task title",
  "description": "Task description",
  "priority": "high|medium|low"
}

Response: 201 Created
{
  "message": "Task created successfully",
  "task": { ... }
}

Get Tasks

GET /tasks
Authorization: Bearer <token>

Response: 200 OK
{
  "tasks": [...],
  "count": 5
}

Delete Task

DELETE /tasks/{taskId}
Authorization: Bearer <token>

Response: 200 OK
{
  "message": "Task deleted successfully",
  "taskId": "..."
}

🔒 Security Features

• ✅ JWT token-based authentication
• ✅ Cognito User Pool for user management
• ✅ API Gateway authorizer validates all requests
• ✅ Tasks are user-specific (userId isolation)
• ✅ HTTPS for all API communications
• ✅ Input validation on both frontend and backend

📚 Learning Resources

• AWS Cognito Documentation
• AWS Lambda Documentation
• API Gateway Documentation
• DynamoDB Documentation

🎓 What You'll Learn

By completing this project, you will learn:

1. Serverless Architecture: Understanding of serverless design patterns
2. AWS Services: Hands-on experience with core AWS services
3. REST API Design: Building and consuming RESTful APIs
4. Authentication: JWT token-based authentication flow
5. Frontend Integration: Connecting frontend to backend APIs
6. Security: Implementing secure API authorization
7. NoSQL Databases: Working with DynamoDB

🔄 Future Enhancements

Possible improvements to extend the project:

• Update task functionality
• Mark tasks as complete/incomplete
• Filter tasks by status or priority
• Search functionality
• Task categories or tags
• Due dates and reminders
• File attachments
• User profile management
• Dark mode
• Progressive Web App (PWA) support

📝 License

This project is for educational purposes.

🙋 Support

If you encounter issues:

1. Review the IMPLEMENTATION_GUIDE.md
2. Check the Troubleshooting section
3. Review AWS CloudWatch logs
4. Check browser console for errors

👥 Contributors

Created as an educational project for serverless architecture demonstration.

---

Good luck with your serverless journey! 🚀