🌍 CountryApp - Modern Country Explorer

A cutting-edge web application built with the latest React technologies to explore countries worldwide. This project showcases modern web development practices and powerful features for an exceptional user experience.

🛠️ Tech Stack

Core Technologies

• ⚛️ React 19 - Latest version with enhanced features
• 🛣️ React Router v7 - For seamless client-side routing
• 📱 TypeScript - For type-safe development
• 🎨 TailwindCSS - Utility-first CSS framework
• 🔄 SWR - For efficient data fetching and caching

Development Tools

• ⚡ Vite - Next-generation frontend tooling
• 🎯 TypeScript - Static type checking
• 🎨 PostCSS - CSS processing
• 🔧 Autoprefixer - CSS compatibility
• 📦 React Icons - Comprehensive icon library

✨ Key Features

• 🔍 Advanced country search functionality
• 🌎 Continental filtering system
• 🎭 Dynamic theme switching (Dark/Light mode)
• 📱 Fully responsive design
• ⚡ Lightning-fast performance
• 🔄 Real-time data updates
• 🌐 SEO optimized

🚀 Quick Start

Prerequisites

• Node.js (v18 or higher)
• npm/yarn/pnpm

Installation

1. Clone the repository:

   git clone https://github.com/PouyaBirvand/CountryApp.git
   

📜 Available Scripts

• npm run dev - Start development server
• npm run build - Create production build
• npm start - Serve production build
• npm run typecheck - Run type checking
• npm run format - Format code with Prettier

🏗️ Project Structure

app/
├── routes/
│   ├── about.tsx
│   ├── countries.tsx
│   ├── country.tsx
│   ├── home.tsx
│   └── components/
│       └── navbar.tsx
├── app.css
├── root.tsx
└── routes.ts

📱 Responsive Design

• Mobile-first approach
• Breakpoints for all device sizes
• Optimized layouts for different screen sizes

⚡ Performance Optimizations

• Code splitting with React Router
• SWR for efficient data caching
• Lazy loading of images
• Optimized bundle size

🔒 Security

• Type-safe development with TypeScript
• Secure API calls
• XSS protection
• CORS handling

🤝 Contributing

1. Fork the repository
2. Create your feature branch (git checkout -b feature/AmazingFeature)
3. Commit changes (git commit -m 'Add AmazingFeature')
4. Push to branch (git push origin feature/AmazingFeature)
5. Open a Pull Request

📈 Future Enhancements

• Advanced filtering options
• Country comparison feature
• Interactive maps integration
• Offline support
• Multi-language support

📄 License

This project is licensed under the MIT License - see the LICENSE file for details.

👨‍💻 Author

Pouya Birvand

• GitHub: @PouyaBirvand
• LinkedIn: Pouya Birvand

🙏 Acknowledgments

• REST Countries API
• React Router Team
• Tailwind CSS
• React Icons

⭐ Star this repository if you find it helpful!

📝 For detailed documentation and API references, check out our Wiki.