Where in the world? By React & Next.js

🚀 This web application is built by React & Next.js and varnished by TailwindCSS. You will find both a mobile and desktop version in light and dark mode color schemes for each page. The api is provided by REST Countries API.

A demo of this application is available here.

Features

Developer experience first:

• 🔥 Next.js for Static Site Generator
• 🎨 Integrate with Tailwind CSS
• 💅 PostCSS for processing Tailwind CSS
• 🎉 Type checking TypeScript
• ✏️ Linter with ESLint
• 🛠 Code Formatter with Prettier
• 🦊 SEO metadata, JSON-LD and Open Graph tags with Next SEO
• ⚙️ Bundler Analyzer
• 🌈 Include a FREE minimalist theme
• 💯 Maximize lighthouse score

Built-in feature from Next.js:

• ☕ Minify HTML & CSS
• 💨 Live reload
• ✅ Cache busting

Philosophy

• Minimal code
• SEO-friendly
• 🚀 Production-ready

Requirements

• Node.js and npm

Getting started

Run the following command on your local environment:

git clone https://github.com/qadamgahiii/react-countries.git
cd react-countries
npm install

Then, you can run locally in development mode with live reload:

npm run dev

Open http://localhost:8080 with your favorite browser to see your project.

.
├── public        # Static files
└── src
    ├── pages     # Next.js pages
    └── styles    # CSS files

Deploy to production

You can see the results locally in production mode with:

$ npm run build
$ npm run start

The generated HTML and CSS files are minified (built-in feature from Next js). It will also removed unused CSS from Tailwind CSS.

You can create an optimized production build with:

npm run build-prod

Now, your blog is ready to be deployed. All generated files are located at dist folder, which you can deploy with any hosting service.