A modern, responsive React application that displays comprehensive information about countries worldwide using the REST Countries API. Features a fixed header navigation, interactive country cards, and advanced filtering capabilities for an optimal user experience.
Experience the Country Explorer in action at: https://countries-dusky-five.vercel.app/
- Comprehensive Country Data: View flags, names, continents, capitals, populations, and areas
- Alphabetical Sorting: Countries automatically sorted A-Z for easy navigation
- Real-time Search: Instant search by country name with live filtering
- Region Filtering: Filter by continent (Africa, Americas, Asia, Europe, Oceania)
- Fixed Header Navigation: Sticky header with always-accessible search and filters
- Interactive Country Cards: Hover effects with smooth animations and scaling
- Responsive Grid Layout: Adapts from 3-6+ cards per row based on screen size
- Modern Design: Clean, professional interface with consistent styling
- Custom Globe Favicon: Branded favicon matching the app theme
- Clickable Header: Click title to reset all filters and reload the app
- External CSS Architecture: Organized, maintainable stylesheets
- Accessibility: Proper focus states and keyboard navigation
- Error Handling: Graceful API error handling with user-friendly messages
- Performance Optimized: Smooth 60fps animations and efficient rendering
- React 19 - Modern React with hooks and functional components
- Vite - Lightning-fast build tool and development server
- Axios - Promise-based HTTP client for API requests
- REST Countries API - Comprehensive source of country data
- CSS Grid & Flexbox - Advanced responsive layout systems
- CSS3 Animations - Smooth hover effects and transitions
- ESLint - Code linting and formatting for code quality
- Clone the repository:
https://github.com/Mania124/countries.git
cd countries- Install dependencies:
npm install- Start the development server:
npm run dev- Open your browser and navigate to
http://localhost:5173
This application is deployed on Vercel with automatic CI/CD deployment.
- URL: https://countries-dusky-five.vercel.app/
- Hosting: Vercel
- Deployment: Automatic via Vercel Git integration
To deploy manually:
npm run deploy- Automatic: Every push to main branch triggers deployment
- Build: Vercel builds the optimized production bundle
- Deploy: Built files are automatically deployed to Vercel
- Live: Changes are reflected on the live site within seconds
src/
├── components/
│ ├── CountryCard.jsx # Individual country display component
│ ├── CountryCard.css # Country card styles with hover effects
│ ├── Filter.jsx # Search and region filter component
│ └── Filter.css # Filter component styles
├── App.jsx # Main application component with state management
├── App.css # Application styles and layout
├── index.css # Global styles and font rendering
└── main.jsx # Application entry point
public/
├── globe-favicon.svg # Custom globe favicon
└── index.html # HTML template with updated title
├── LICENSE # MIT License
├── CONTRIBUTORS.md # Contributors guide and acknowledgments
└── README.md # Project documentation
This application uses the REST Countries API to fetch country data. The API provides comprehensive information about countries including:
- Country names and flags
- Geographic information (region, area)
- Population data
- Capital cities
- And much more
- Custom Globe Favicon: SVG favicon matching the application's globe theme
- Fixed Header Layout: Sticky navigation with title and filters always visible
- Interactive Country Cards: Smooth hover animations with lift effects and scaling
- Professional Typography: Optimized font rendering with antialiasing
- Adaptive Grid: Automatically adjusts from 3-6+ cards per row based on screen size
- Mobile-First: Optimized touch targets and stacked layouts on small screens
- Full Viewport Usage: Efficient use of available screen space
- Keyboard Navigation: Full keyboard accessibility with proper focus states
- High Contrast: Proper color contrast ratios for readability
- Loading States: User-friendly loading and error messages
- Semantic HTML: Proper structure for screen readers
- Click-to-Reset: Intuitive header click to reset all filters
npm run dev- Start development server with hot reloadnpm run build- Build optimized production bundlenpm run preview- Preview production build locallynpm run lint- Run ESLint for code quality checks
- Type in the search box to find countries by name instantly
- Use the dropdown to filter by continent/region
- Both filters work together for refined results
- Hover over country cards to see smooth animations
- Click the header title to reset all filters and return to full list
- Scroll through countries while keeping filters accessible in fixed header
- Countries are automatically sorted alphabetically
- Each card shows: flag, name, continent, capital, population, and area
- Responsive grid adapts to your screen size for optimal viewing
- Component-Based: Modular React components for maintainability
- External CSS: Separation of concerns with dedicated stylesheets
- State Management: Efficient React hooks for data and UI state
- API Integration: Robust error handling and data fetching with Axios
- Performance: Optimized rendering and smooth 60fps animations
We welcome contributions from the community! See CONTRIBUTORS.md for detailed guidelines.
- Fork the repository
- Create a feature branch (
git checkout -b feature/amazing-feature) - Commit your changes (
git commit -m 'Add some amazing feature') - Push to the branch (
git push origin feature/amazing-feature) - Open a Pull Request
Thanks to all the amazing people who have contributed to Country Explorer:
- Mania124 - Project Creator & Main Developer
See CONTRIBUTORS.md for detailed contribution guidelines and how to get involved!
- Live Application: https://countries-dusky-five.vercel.app/
- Repository: https://github.com/Mania124/countries
- REST Countries API: https://restcountries.com
This project is open source and available under the MIT License.