Skip to content

Latest commit

 

History

History
129 lines (93 loc) · 3.32 KB

README.md

File metadata and controls

129 lines (93 loc) · 3.32 KB

🌍 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.

CountryApp Preview

🛠️ 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

🙏 Acknowledgments

⭐ Star this repository if you find it helpful!

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