From 74945b7f59173922b501a28a42fc25bee9383781 Mon Sep 17 00:00:00 2001 From: Raffaele Marcello Date: Mon, 26 May 2025 02:22:08 +0200 Subject: [PATCH 1/9] Add Expense Tracker challenge and placeholders for backend and frontend --- README.md | 1 + challenges/expensetracker/README.md | 78 +++++++++++++++++++ .../expensetracker/backend/placeholder.md | 0 .../expensetracker/frontend/placeholder.md | 0 4 files changed, 79 insertions(+) create mode 100644 challenges/expensetracker/README.md create mode 100644 challenges/expensetracker/backend/placeholder.md create mode 100644 challenges/expensetracker/frontend/placeholder.md diff --git a/README.md b/README.md index 5fc3d6b0..603fe5c5 100644 --- a/README.md +++ b/README.md @@ -108,6 +108,7 @@ Run: - [Develop a chat based on websockets](./challenges/chatwebsockets/chatwebsockets.md) - [Behavior Driven Development (BDD) challenge](./challenges/bdd/README.md) - [Analysis cryptocurrency market](./challenges/cryptoanalisis/crypto.md) +- [Expnse Tracker](./challenges/expensetracker/README.md) ## Quick Links diff --git a/challenges/expensetracker/README.md b/challenges/expensetracker/README.md new file mode 100644 index 00000000..0938f75a --- /dev/null +++ b/challenges/expensetracker/README.md @@ -0,0 +1,78 @@ +# Develop an Expense Tracker + +## 1. Problem Description + +Build an **Expense Tracker** microservice that helps users log daily expenses and visualize their spending patterns. The system should allow users to add expenses with categories, view spending summaries, and get insights into their financial habits. + +### Core Requirements: +- **Frontend**: Frontend interface for adding expenses and viewing summaries +- **Backend**: RESTful API (.NET Core, Python Flask, or Node.js Express) for expense management +- **Data Management**: Store expenses with amount, category, date, and description +- **Visualization**: Simple charts/graphs showing spending by category and over time +- **Categories**: Predefined spending categories (Food, Transport, Entertainment, etc.) + +### User Stories: +1. As a user, I can add a new expense with amount, category, and description +2. As a user, I can view all my expenses in a list format +3. As a user, I can see total spending for the current month +4. As a user, I can view spending breakdown by category +5. As a user, I can delete expenses I added by mistake + +## 2. Hints + +### Technical Implementation Hints: +- **Data Structure**: Simple expense object with id, amount, category, date, description +- **Storage**: In-memory array/list (no database needed) +- **Categories**: Fixed list like ["Food", "Transport", "Entertainment", "Shopping", "Bills"] +- **Charts**: Use Chart.js, Recharts, or simple CSS bars for visualization +- **Date Handling**: Use current date as default, allow manual date selection + +### Quick Start Tips: +- Start with add/list functionality first +- Use form validation for amount (must be positive number) +- Keep categories simple - just 5-6 predefined options +- Focus on current month data to keep calculations simple +- Use mock data initially to test the UI + +## 3. Time Needed + +**Estimated Duration: 45-60 minutes** + +### Time Breakdown: +- **Setup** (5-10 minutes): Project structure, dependencies +- **Backend CRUD** (15-20 minutes): Add expense, list expenses, delete expense endpoints +- **Frontend Forms** (15-20 minutes): Add expense form, expense list, basic styling +- **Summary/Charts** (10-15 minutes): Category totals, simple visualization + +## 4. Extra Features (Bonus Challenges) + +Quick additions for teams that finish early: + +### Easy Additions (5-10 minutes each): +- **Edit Expenses**: Modify existing expense entries +- **Date Filtering**: Filter expenses by date range +- **Expense Search**: Search expenses by description +- **Export Data**: Download expenses as CSV + +### Medium Additions (10-15 minutes each): +- **Budget Limits**: Set monthly budgets per category with warnings +- **Recurring Expenses**: Add monthly recurring expenses automatically +- **Tags**: Add custom tags to expenses for better organization +- **Receipt Notes**: Add notes or receipt numbers to expenses + +### Why Perfect for 1-Hour Challenge: +- **Relatable Problem**: Everyone tracks expenses or should +- **Clear CRUD Operations**: Standard create, read, delete patterns +- **Simple Calculations**: Basic arithmetic for totals and averages +- **Visual Results**: Charts and summaries provide immediate feedback +- **Practical Utility**: Participants build something actually useful + +### Success Criteria: +- ✅ Can add new expenses +- ✅ Can view list of expenses +- ✅ Can see monthly total +- ✅ Can delete expenses +- ✅ Shows category breakdown +- ✅ Basic styling/layout + +This challenge combines practical business logic, data visualization, and user experience design - perfect for demonstrating real-world application development skills in a short timeframe! \ No newline at end of file diff --git a/challenges/expensetracker/backend/placeholder.md b/challenges/expensetracker/backend/placeholder.md new file mode 100644 index 00000000..e69de29b diff --git a/challenges/expensetracker/frontend/placeholder.md b/challenges/expensetracker/frontend/placeholder.md new file mode 100644 index 00000000..e69de29b From a50b29732e38a6d4a086b572fa61a0520a6906d2 Mon Sep 17 00:00:00 2001 From: Raffaele Marcello Date: Mon, 26 May 2025 02:23:22 +0200 Subject: [PATCH 2/9] Fix typo in Expense Tracker link in README.md --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index 603fe5c5..c7a6415b 100644 --- a/README.md +++ b/README.md @@ -108,7 +108,7 @@ Run: - [Develop a chat based on websockets](./challenges/chatwebsockets/chatwebsockets.md) - [Behavior Driven Development (BDD) challenge](./challenges/bdd/README.md) - [Analysis cryptocurrency market](./challenges/cryptoanalisis/crypto.md) -- [Expnse Tracker](./challenges/expensetracker/README.md) +- [Expense Tracker](./challenges/expensetracker/README.md) ## Quick Links From 95f9c01a2902362ee6b87a14ad2bf1550a77d8dc Mon Sep 17 00:00:00 2001 From: Raffaele Marcello Date: Mon, 26 May 2025 09:15:54 +0200 Subject: [PATCH 3/9] Add instructions for working in the correct directory for frontend and backend --- challenges/expensetracker/README.md | 7 +++++++ 1 file changed, 7 insertions(+) diff --git a/challenges/expensetracker/README.md b/challenges/expensetracker/README.md index 0938f75a..2650ef11 100644 --- a/challenges/expensetracker/README.md +++ b/challenges/expensetracker/README.md @@ -34,6 +34,13 @@ Build an **Expense Tracker** microservice that helps users log daily expenses an - Focus on current month data to keep calculations simple - Use mock data initially to test the UI +### +If you are using the Agent mode and notice that the agent is working in the wrong directory, try to add the following line to your prompt: +```markdown +Work in the directory backend. When run terminal remember to change the right directory, for example: `cd challenges/expensetracker/backend && `. +``` +Change the directory to `frontend` when working on the frontend part. + ## 3. Time Needed **Estimated Duration: 45-60 minutes** From e96254ed892c79c40aa998854a4cb567f5bb7853 Mon Sep 17 00:00:00 2001 From: Raffaele Marcello Date: Mon, 26 May 2025 09:17:59 +0200 Subject: [PATCH 4/9] Add section header for Agent Mode Note in README.md --- challenges/expensetracker/README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/challenges/expensetracker/README.md b/challenges/expensetracker/README.md index 2650ef11..f3b57ac6 100644 --- a/challenges/expensetracker/README.md +++ b/challenges/expensetracker/README.md @@ -34,7 +34,7 @@ Build an **Expense Tracker** microservice that helps users log daily expenses an - Focus on current month data to keep calculations simple - Use mock data initially to test the UI -### +### Agent Mode Note: If you are using the Agent mode and notice that the agent is working in the wrong directory, try to add the following line to your prompt: ```markdown Work in the directory backend. When run terminal remember to change the right directory, for example: `cd challenges/expensetracker/backend && `. From 79fa24781ed5d67408719da0b29da91d4fa4451b Mon Sep 17 00:00:00 2001 From: Raffaele Marcello Date: Wed, 25 Feb 2026 22:45:17 +0100 Subject: [PATCH 5/9] Add README for URL Shortener challenge with requirements, hints, and implementation details --- challenges/urlshortner/README.md | 101 +++++++++++++++++++++++++++++++ 1 file changed, 101 insertions(+) create mode 100644 challenges/urlshortner/README.md diff --git a/challenges/urlshortner/README.md b/challenges/urlshortner/README.md new file mode 100644 index 00000000..eb862b2f --- /dev/null +++ b/challenges/urlshortner/README.md @@ -0,0 +1,101 @@ +# URL Shortener Service - Quick Challenge + +## 1. Problem Description + +Build a **URL Shortener** microservice (like bit.ly or tinyurl) that converts long URLs into short, shareable links. The system should generate unique short codes for long URLs and redirect users when they visit the short links. + +### Core Requirements: +- **Frontend**: Simple React form to submit URLs and display shortened links +- **Backend**: RESTful API (.NET Core, Python Flask, or Node.js Express) +- **Core Logic**: Generate unique short codes and store URL mappings +- **Redirection**: Handle redirects from short URLs to original URLs + +### User Stories: +1. As a user, I can paste a long URL and get a shortened version +2. As a user, I can click on a shortened URL and be redirected to the original +3. As a user, I can see a list of my recently shortened URLs +4. As a user, I get an error message for invalid URLs + +## 2. Hints + +### Technical Implementation Hints: +- **Short Code Generation**: Use random alphanumeric strings (6-8 characters) or base62 encoding +- **Storage**: Simple in-memory dictionary/map or array for URL mappings +- **Validation**: Check if input is a valid URL format +- **Frontend**: Single page with input form and results list +- **API Endpoints**: Just 2-3 endpoints needed: create short URL, redirect, and optional list + +### Quick Start Tips: +- Start with backend API first - it's simpler +- Use existing URL validation libraries +- Keep the UI minimal - focus on functionality +- Test with a few sample URLs to verify redirects work + +## 3. Time Needed + +**Estimated Duration: 45-60 minutes** + +### Time Breakdown: +- **Setup** (5-10 minutes): Create project structure, install dependencies +- **Backend API** (20-25 minutes): URL shortening endpoint, redirect endpoint, data storage +- **Frontend** (15-20 minutes): Simple React form, display results, basic styling +- **Integration & Testing** (5-10 minutes): Connect frontend to backend, test redirects + +## 4. Extra Features (Bonus Challenges) + +Quick additions if participants finish early: + +### Easy Additions (5-10 minutes each): +- **Click Counter**: Track how many times each short URL was accessed +- **Custom Short Codes**: Allow users to specify their own short code +- **URL Preview**: Show original URL when hovering over short link +- **Copy to Clipboard**: One-click copy button for short URLs + +### Medium Additions (10-15 minutes each): +- **QR Code Generation**: Generate QR codes for short URLs +- **Expiration Date**: Set expiration for short URLs +- **Basic Analytics**: Show creation date and last accessed time +- **Bulk Shortening**: Upload multiple URLs at once + +## 5. Solution Description + +### Architecture Overview: +Simple client-server architecture with minimal components - perfect for rapid development with AI coding assistance. + +### Backend Implementation: +- **Framework**: Java, Express.js, Flask, or .NET Core minimal API +- **Data Storage**: In-memory object/dictionary (no database needed) +- **Core Logic**: + - Generate random 6-character alphanumeric codes + - Store mapping between short codes and original URLs + - Handle redirects with HTTP 302 status + +### API Endpoints: +``` +POST /api/shorten + Body: { "url": "https://example.com/very/long/url" } + Response: { "shortUrl": "http://localhost:3000/abc123", "shortCode": "abc123" } + +GET /{shortCode} + Redirects to original URL or returns 404 if not found + +GET /api/urls (optional) + Returns list of all shortened URLs +``` + +### Frontend Implementation: +- **Single Page App**: One React component with form and results +- **State**: Store list of shortened URLs in component state +- **UI Elements**: + - URL input field with validation + - Submit button + - Results section showing original and shortened URLs + - Error messages for invalid inputs + + +### Key Features: +1. **Instant Results**: Users see shortened URLs immediately +2. **Working Redirects**: Short URLs actually redirect to original URLs +3. **Error Handling**: Clear feedback for invalid URLs +4. **Clean UI**: Minimal but functional interface +5. **Testable**: Easy to verify functionality with sample URLs From 00bffeb4af81284c4735db371d87810f3f16f3a4 Mon Sep 17 00:00:00 2001 From: Raffaele Marcello Date: Wed, 25 Feb 2026 22:47:58 +0100 Subject: [PATCH 6/9] Add URL Shortener challenge link to README.md --- README.md | 1 + challenges/{urlshortner => urlhortener}/README.md | 0 2 files changed, 1 insertion(+) rename challenges/{urlshortner => urlhortener}/README.md (100%) diff --git a/README.md b/README.md index c7a6415b..c0ccd46e 100644 --- a/README.md +++ b/README.md @@ -109,6 +109,7 @@ Run: - [Behavior Driven Development (BDD) challenge](./challenges/bdd/README.md) - [Analysis cryptocurrency market](./challenges/cryptoanalisis/crypto.md) - [Expense Tracker](./challenges/expensetracker/README.md) +- [URL Shortener](./challenges/urlhortener/README.md) ## Quick Links diff --git a/challenges/urlshortner/README.md b/challenges/urlhortener/README.md similarity index 100% rename from challenges/urlshortner/README.md rename to challenges/urlhortener/README.md From 78a9351ad9a1b5b574af0e1a49f7c5d6e6aba5a6 Mon Sep 17 00:00:00 2001 From: Raffaele Marcello Date: Wed, 25 Feb 2026 22:51:09 +0100 Subject: [PATCH 7/9] Fix URL Shortener link in README and add detailed challenge description --- README.md | 2 +- challenges/{urlhortener => urlshortener}/README.md | 0 2 files changed, 1 insertion(+), 1 deletion(-) rename challenges/{urlhortener => urlshortener}/README.md (100%) diff --git a/README.md b/README.md index c0ccd46e..19588a13 100644 --- a/README.md +++ b/README.md @@ -109,7 +109,7 @@ Run: - [Behavior Driven Development (BDD) challenge](./challenges/bdd/README.md) - [Analysis cryptocurrency market](./challenges/cryptoanalisis/crypto.md) - [Expense Tracker](./challenges/expensetracker/README.md) -- [URL Shortener](./challenges/urlhortener/README.md) +- [URL Shortener](./challenges/urlshortener/README.md) ## Quick Links diff --git a/challenges/urlhortener/README.md b/challenges/urlshortener/README.md similarity index 100% rename from challenges/urlhortener/README.md rename to challenges/urlshortener/README.md From b068707a54022fad097d730dc8f3864963c97d16 Mon Sep 17 00:00:00 2001 From: Raffaele Marcello Date: Wed, 10 Jun 2026 18:35:22 +0200 Subject: [PATCH 8/9] Add advanced additions and framework options to URL Shortener README --- challenges/urlshortener/README.md | 9 ++++++++- 1 file changed, 8 insertions(+), 1 deletion(-) diff --git a/challenges/urlshortener/README.md b/challenges/urlshortener/README.md index eb862b2f..181c8079 100644 --- a/challenges/urlshortener/README.md +++ b/challenges/urlshortener/README.md @@ -57,13 +57,20 @@ Quick additions if participants finish early: - **Basic Analytics**: Show creation date and last accessed time - **Bulk Shortening**: Upload multiple URLs at once +### Advanced Additions (15-20 minutes each): +- **Add Database**: Use SQLite, MySQL or PostgreSQL for persistent storage +- **Use Docker to initialize and run the database**: Create a Dockerfile and docker-compose.yml to set up the database environment +- **Use MCP Servers**: + - Configure MCP to interact with the database for storing URL mappings and analytics data + - Implement MCP servers to handle Frontend test + ## 5. Solution Description ### Architecture Overview: Simple client-server architecture with minimal components - perfect for rapid development with AI coding assistance. ### Backend Implementation: -- **Framework**: Java, Express.js, Flask, or .NET Core minimal API +- **Framework**: Choose your preferred framework, example: Java, Express.js, Flask, or .NET Core minimal API - **Data Storage**: In-memory object/dictionary (no database needed) - **Core Logic**: - Generate random 6-character alphanumeric codes From 00f31bed5838e788012c9da0279a331b439c2d5c Mon Sep 17 00:00:00 2001 From: Raffaele Marcello Date: Fri, 12 Jun 2026 15:39:30 +0200 Subject: [PATCH 9/9] Update README with enhanced storage options and advanced database suggestions --- challenges/urlshortener/README.md | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/challenges/urlshortener/README.md b/challenges/urlshortener/README.md index 181c8079..e7a97863 100644 --- a/challenges/urlshortener/README.md +++ b/challenges/urlshortener/README.md @@ -19,8 +19,9 @@ Build a **URL Shortener** microservice (like bit.ly or tinyurl) that converts lo ## 2. Hints ### Technical Implementation Hints: +- **Design**: Use GitHub Copilot to make a good architecture design. Identify challenges like performance, scalability, and security. - **Short Code Generation**: Use random alphanumeric strings (6-8 characters) or base62 encoding -- **Storage**: Simple in-memory dictionary/map or array for URL mappings +- **Storage**: Simple in-memory dictionary/map or array for URL mappings or use a cache - **Validation**: Check if input is a valid URL format - **Frontend**: Single page with input form and results list - **API Endpoints**: Just 2-3 endpoints needed: create short URL, redirect, and optional list @@ -58,7 +59,7 @@ Quick additions if participants finish early: - **Bulk Shortening**: Upload multiple URLs at once ### Advanced Additions (15-20 minutes each): -- **Add Database**: Use SQLite, MySQL or PostgreSQL for persistent storage +- **Add Database**: Use Redis, SQLite, MySQL or PostgreSQL for persistent storage - **Use Docker to initialize and run the database**: Create a Dockerfile and docker-compose.yml to set up the database environment - **Use MCP Servers**: - Configure MCP to interact with the database for storing URL mappings and analytics data