DEV Community

Cover image for Building a Collaborative World Explorer App: A 2-Day Team Challenge 🌍
Fonyuy Gita
Fonyuy Gita

Posted on

Building a Collaborative World Explorer App: A 2-Day Team Challenge 🌍

Project Overview

Welcome to your collaborative development challenge! Over the next 2 days (8 hours total), your team of 5 will build a stunning world exploration application using React.js, GitHub for collaboration, and the REST Countries API.

Timeline: 2 days × 4 hours each = 8 hours total

🎯 Project Goals

  • Build a beautiful, interactive world exploration interface
  • Master Git/GitHub collaborative workflows
  • Integrate with the REST Countries API
  • Practice effective team communication and task distribution

🛠 Tech Stack

  • Frontend: React.js with hooks
  • API: REST Countries API (No API key required!)
  • Styling: CSS3/Styled Components (your choice)
  • Version Control: Git & GitHub
  • Collaboration: GitHub Projects/Issues

👥 Team Roles & Responsibilities

Person 1: Team Lead & Repository Manager

  • Set up initial repository structure
  • Configure GitHub repository settings
  • Manage pull requests and code reviews
  • Coordinate team communications
  • Handle merge conflicts

Person 2: UI/UX Designer & Layout Developer

  • Design the overall application layout
  • Create reusable UI components
  • Implement responsive design with interactive maps
  • Handle styling and visual aesthetics
  • Create loading states and error handling UI

Person 3: API Integration Specialist

  • Set up REST Countries API integration
  • Create API service functions
  • Handle API error states
  • Implement data fetching logic
  • Manage data caching and optimization

Person 4: Feature Developer (Search & Filters)

  • Implement country search functionality
  • Create filter components (region, population, language)
  • Handle search state management
  • Implement sorting and pagination
  • Create advanced search features

Person 5: Feature Developer (Details & Comparison)

  • Create country detail pages/modals
  • Implement country comparison functionality
  • Handle favorites/visited countries list
  • Create country statistics visualizations
  • Implement border country navigation

🚀 Day 1: Setup & Foundation (4 hours)

Hour 1: Project Setup & Repository Creation

Team Lead (Person 1):

# Create new React app
npx create-react-app world-explorer-app
cd world-explorer-app

# Initialize git repository
git init
git add .
git commit -m "Initial commit: Create React app"

# Create GitHub repository and push
# Add all team members as collaborators
Enter fullscreen mode Exit fullscreen mode

Repository Setup Checklist:

  • [ ] Create repository on GitHub
  • [ ] Add all team members as collaborators
  • [ ] Set up branch protection rules for main
  • [ ] Create initial project structure
  • [ ] Add README.md with project description

Hour 2: API Setup & Data Structure

API Integration Specialist (Person 3):

  1. REST Countries API Overview:

    • Base URL: https://restcountries.com/v3.1/
    • No API key required! 🎉
    • Rate limit: Very generous for development
    • Data format: Rich JSON with flags, currencies, languages, etc.

  2. Key Endpoints:

   // All countries
   GET https://restcountries.com/v3.1/all

   // Search by name
   GET https://restcountries.com/v3.1/name/{name}

   // Filter by region
   GET https://restcountries.com/v3.1/region/{region}

   // Get by country code
   GET https://restcountries.com/v3.1/alpha/{code}

   // Filter by language
   GET https://restcountries.com/v3.1/lang/{language}
Enter fullscreen mode Exit fullscreen mode
  1. Create API service structure: 
   src/
   ├── services/
   │   ├── api.js
   │   └── countriesService.js
   ├── utils/
   │   ├── constants.js
   │   └── helpers.js
   ├── hooks/
   │   └── useCountries.js
Enter fullscreen mode Exit fullscreen mode

Hour 3: Git Workflow & Branch Strategy

Everyone learns and practices:

Branching Strategy:

main (protected)
├── develop
├── feature/search-functionality
├── feature/country-details
├── feature/ui-components
├── feature/api-integration
└── feature/comparison-tool
Enter fullscreen mode Exit fullscreen mode

Git Workflow Steps:

# 1. Clone repository
git clone [repository-url]
cd world-explorer-app

# 2. Create and switch to your feature branch
git checkout -b feature/your-feature-name

# 3. Make changes and commit
git add .
git commit -m "Add: specific feature description"

# 4. Push your branch
git push origin feature/your-feature-name

# 5. Create Pull Request on GitHub
# 6. Wait for code review
# 7. Merge after approval
Enter fullscreen mode Exit fullscreen mode

Hour 4: Component Structure & Initial Development

UI/UX Designer (Person 2):
Create basic component structure:

src/
├── components/
│   ├── common/
│   │   ├── Header.js
│   │   ├── Navigation.js
│   │   ├── Loading.js
│   │   ├── ErrorMessage.js
│   │   └── SearchBar.js
│   ├── countries/
│   │   ├── CountryCard.js
│   │   ├── CountryGrid.js
│   │   ├── CountryDetails.js
│   │   ├── CountryMap.js
│   │   └── FlagDisplay.js
│   ├── filters/
│   │   ├── RegionFilter.js
│   │   ├── PopulationFilter.js
│   │   └── SortOptions.js
│   └── comparison/
│       ├── ComparisonTool.js
│       └── StatisticsChart.js
Enter fullscreen mode Exit fullscreen mode

All Team Members:

  • Set up their assigned feature branches
  • Create initial component files
  • Commit and push initial structure

🎯 Day 2: Development & Integration (4 hours)

Hour 5: Core Feature Development

Search & Filters Developer (Person 4):

  • Implement country search functionality
  • Create region filter (Africa, Americas, Asia, Europe, Oceania)
  • Add population range filters
  • Implement sorting (alphabetical, population, area)
  • Handle search state management

Details & Comparison Developer (Person 5):

  • Create detailed country modal/page
  • Implement country comparison tool (side-by-side)
  • Add favorites/visited countries functionality
  • Create statistics visualizations
  • Implement border countries navigation

Hour 6: API Integration & Data Flow

API Integration Specialist (Person 3):

Sample API Service Implementation:

// countriesService.js
const BASE_URL = 'https://restcountries.com/v3.1';

export const countriesAPI = {
  // Get all countries
  getAllCountries: async () => {
    const response = await fetch(`${BASE_URL}/all`);
    return response.json();
  },

  // Search countries by name
  searchByName: async (name) => {
    const response = await fetch(`${BASE_URL}/name/${name}`);
    return response.json();
  },

  // Filter by region
  getByRegion: async (region) => {
    const response = await fetch(`${BASE_URL}/region/${region}`);
    return response.json();
  },

  // Get country by code
  getByCode: async (code) => {
    const response = await fetch(`${BASE_URL}/alpha/${code}`);
    return response.json();
  }
};
Enter fullscreen mode Exit fullscreen mode

Key Data Points Available:

  • Country names (common & official)
  • High-quality flag images (SVG & PNG)
  • Capital cities
  • Population, area, region, subregion
  • Languages, currencies
  • Time zones
  • Neighboring countries (borders)
  • Coat of arms
  • Geographic coordinates

Hour 7: UI Polish & Interactive Features

UI/UX Designer (Person 2):

  • Create beautiful country cards with flags
  • Implement responsive grid layouts
  • Add smooth animations and transitions
  • Create interactive hover effects
  • Design mobile-first responsive layout
  • Add loading skeletons

Cool UI Ideas:

  • Flag-based color themes for country cards
  • Interactive world map overview
  • Animated statistics counters
  • Smooth card flip animations
  • Parallax scrolling effects

Hour 8: Integration, Testing & Polish

Team Lead (Person 1):

  • Coordinate final integration
  • Review all pull requests
  • Handle merge conflicts
  • Prepare for deployment

Everyone:

  • Final testing of all features
  • Bug fixes and polish
  • Create pull requests for final features
  • Code review session

📱 Required Features

Core Features (Must Have):

  • [ ] Country search with real-time results
  • [ ] Beautiful country grid with flags
  • [ ] Detailed country information modal/page
  • [ ] Region-based filtering
  • [ ] Responsive design (mobile + desktop)
  • [ ] Loading states and error handling

Enhanced Features (Nice to Have):

  • [ ] Country comparison tool (2-3 countries side by side)
  • [ ] Population and area filtering
  • [ ] Favorites/visited countries list
  • [ ] Border countries navigation
  • [ ] Statistics visualizations (charts/graphs)
  • [ ] Interactive world map
  • [ ] Dark/Light theme toggle

🎨 Design Inspiration

UI/UX Guidelines:

  • Color Palette: Use flag colors as inspiration
  • Typography: Clean, modern fonts
  • Layout: Card-based design with country flags prominently displayed
  • Interactions: Smooth hover effects and transitions
  • Mobile: Touch-friendly interface with swipe gestures
  • Visual Hierarchy: Clear information architecture

Cool Design Ideas:

  • Country cards that reflect the flag colors
  • Animated flag reveals
  • Interactive population/area comparisons
  • Beautiful typography for country names
  • Gradient backgrounds inspired by regions

🚨 Common Pitfalls to Avoid

API-Specific Issues:

  • Handle countries with missing data gracefully
  • Some countries may not have all fields populated
  • Flag URLs are direct links - implement proper loading states
  • Search can return partial matches - handle appropriately

Development Issues:

  • Don't assume all countries have the same data structure
  • Implement proper error boundaries
  • Handle slow network connections
  • Test with different country names and edge cases

📊 Success Metrics

Technical:

  • [ ] Fast, responsive country search
  • [ ] Smooth API integration with error handling
  • [ ] Mobile-responsive design
  • [ ] Clean, maintainable code structure
  • [ ] Proper Git workflow with meaningful commits

User Experience:

  • [ ] Intuitive navigation and search
  • [ ] Beautiful, engaging visual design
  • [ ] Fast loading and smooth interactions
  • [ ] Educational and informative content
  • [ ] Accessible design for all users

🎉 Bonus Challenges

If you finish early, try these advanced features:

  • [ ] Add country trivia/quiz functionality
  • [ ] Implement virtual "travel planner"
  • [ ] Add country news integration
  • [ ] Create country size comparisons
  • [ ] Add currency conversion feature
  • [ ] Implement country weather integration
  • [ ] Add cultural information and photos

📚 API Documentation & Resources

REST Countries API:

Example API Responses: 

{
  "name": {
    "common": "Germany",
    "official": "Federal Republic of Germany"
  },
  "capital": ["Berlin"],
  "region": "Europe",
  "subregion": "Western Europe",
  "population": 83240525,
  "area": 357114,
  "flags": {
    "png": "https://flagcdn.com/w320/de.png",
    "svg": "https://flagcdn.com/de.svg"
  },
  "currencies": {
    "EUR": {
      "name": "Euro",
      "symbol": "€"
    }
  },
  "languages": {
    "deu": "German"
  },
  "borders": ["AUT", "BEL", "CZE", "DNK", "FRA", "LUX", "NLD", "POL", "CHE"]
}
Enter fullscreen mode Exit fullscreen mode

🏆 Final Deliverables

By the end of Day 2, your team should have:

  • [ ] Fully functional world explorer app
  • [ ] Beautiful, responsive design
  • [ ] Comprehensive README with setup instructions
  • [ ] Live demo (GitHub Pages or Netlify)
  • [ ] Team retrospective and lessons learned

🌟 Why This Project is Awesome

Educational Value:

  • Learn about world geography and cultures
  • Practice with real-world API integration
  • Build something visually impressive
  • Great for portfolio projects

Technical Skills:

  • RESTful API consumption
  • State management in React
  • Responsive design principles
  • Git collaboration workflows
  • Error handling and user experience

Fun Factor:

  • Discover new countries and facts
  • Beautiful flags and visual data
  • Interactive and engaging
  • Something you'd actually want to use!

Remember: This project combines learning with exploration. You're not just building an app - you're creating a window to the world! 🌍✨

Good luck, and happy coding! 🚀

Top comments (0)

Some comments may only be visible to logged-in visitors. Sign in to view all comments.