Global Agent Frontend

Project Overview

Global Agent is an innovative edutainment application designed for middle to high school students, where players join an elite agency of news detectives to solve cases by investigating current events and world news. This project utilizes a gamified approach to education, making learning engaging and interactive.

Team Members

• Anita Owen - GitHub
• Armando Pires - GitHub
• Brenda Soto - GitHub
• Luis Tejada - GitHub
• Marlon Regis - GitHub

Game Structure

1. Agency Headquarters (Dashboard): The main interface for managing detective profiles, viewing cases, and tracking progress.
2. Case Files: Each news article is transformed into a case file with a brief headline and a "difficulty rating".
3. Investigation Process:
   • Read the article summary (case briefing)
   • Gather evidence (answer questions about the article)
   • Write up the case report (final summary question or task)
4. Ranking System:
   • Rookie Detective - 0 xp
   • Junior Investigator - 500 xp
   • Gumshoe - 1300 xp
   • Chief Detective - 2800 xp
   • Master Sleuth - 5000 xp
5. Rewards:
   • Detective badges for different countries
   • Agency points for solving cases and leveling up to buy special gear or tools
6. Missions:
   • Daily cases (breaking news)
   • Weekly investigations (in-depth stories)

Future Features

• Multiplayer Elements: Form detective teams, agency competitions, and global leaderboards.
• Mini-games: Spot the fake news, rapid fact-checking, and guessing the country of case file images.
• Social Media Connect: Create, share, and feature new cases; integrate badges and achievements.
• All Countries & Ages: Expanded demographics, language customization, and translation options.

Technologies Used

• React Hooks
• React Router 6.2.1
• Express Server
• Firebase
• APIs: "World News API", "CLAUDE" by Anthropic
• HTML, CSS, JS
• CSS Grid
• Cloudinary
• Trello Board
• dbdiagram (ERDs)
• Figma for wireframes

User Stories

1. The app should be free to download and informative on any mobile device.
2. Users can create personalized detective avatars and profiles.
3. Users receive daily or weekly news cases to solve.
4. Users earn badges and rewards for solving cases and completing challenges.
5. Users can participate in leaderboards and compete with others.
6. Users can collaborate on complex cases and share insights.
7. Users can track their progress and review solved cases.
8. Users receive feedback and tips from virtual mentors.

Visual Examples

Here are some visual examples of the Global Agent app at different stages of development:

Wireframes

• 
• 
• 
• 
• 
• 

Deployment Links

• Live Application: Global Agent
• Frontend Repository: GitHub - Global Agent Frontend
• Backend Repository: GitHub - Global Agent Backend
• Digital Ocean: Global Agent on Digital Ocean
• ERD:
• Wireframe & Workflow:
• Trello Board:
• Presentation Slide: