Front-End Mentor Rest Countries API Challenge

Building Front-End Mentor Rest Countries API Challenge with React Js, Next Js, TypeScript, Tailwind CSS, Heroicons, Vercel Hosting (a mobile-friendly) Made with developer experience first ESLint + Prettier + Lint-Staged + VSCode setup .

Table of contents

• Author
• Demo
• Technologies
• Optimizations
• Contributing
• Status
• Features
• Inspiration
• Related Projects
• Support
• Feedback
• Run Locally
• Screenshots

Author

@Saddam Arbaa

Technologies

• React Js
• Next Js
• TypeScript
• Tailwind CSS
• Heroicons
• Vercel Hosting

Demo

LIVE DEMO

Optimizations

• Next' Js Image component
• Next' Js file-system based router
• Next' Js Server-side rendering
• Memoization (useMemo, Memo)
• Advanced Debouncing (custom Hook)
• Function components
• React hooks
• React useEffect cleanup
• TypeScript

Features

• View all countries
• View individual country details
• Search for single country
• Filter countries by region
• Toggle Dark/Light Mode
• Toggle Dark/Light Mode
• Google Map with zoom Focus to the country captical city
• View on real google map link

Contributing

Contributions are always welcome!

Related_Projects

Front-End Mentor Rest Countries API Challenge app built with React Native + TypeScript + Expo + React Navigation

Github Repo

Facebook Clone App built with React Js + Next Js + TypeScript + Redux + Styled Components

Github Repo

LIVE DEMO

Instagram Clone App built with React Js + Next Js + TypeScript + Redux + Tailwind CSS + Heroicons

Github Repo

LIVE DEMO

Messenger Clone App built with React Js + Next Js + Redux + Styled Components + Material-UI

Github Repo

LIVE DEMO

Airbnb Clone App built with React Js + Next Js + Redux + Tailwind CSS

Github Repo

LIVE DEMO

Amazon Clone App built with React Js + Redux + Styled Components

Github Repo

LIVE DEMO

Support

For support, email saddamarbaas@gmail.com.

Feedback

If you have any feedback, please reach out to me at saddamarbaas@gmail.com

Twitter https://twitter.com/ArbaaSaddam/

Linkedin. https://www.linkedin.com/in/saddamarbaa/

Github https://github.com/saddamarbaa

Instagram https://www.instagram.com/saddam.dev/

Facebook https://www.facebook.com/saddam.arbaa

Run_Locally

Clone the project

https://github.com/saddamarbaa/rest-countries-app-nextjs-typescript

Go to the project directory

  cd rest-countries-app-nextjs-typescript

Install dependencies

yarn install
# or
npm install

Start the server

npm run dev
# or
yarn dev

ESLint + Prettier + Lint-Staged Check

yarn lint
# check-types errors
yarn check-types
# check code format
yarn check-format
# check lint errors
yarn check-lint
# format code and fix prettier erros
yarn format
# test all ESLint + Prettier + types erros
yarn test-all
# or if You're using npm you can use npm instead of yarn for all the above ESLint + Prettier + Lint-Staged Check steps

Status

Project is now complete in (React js + Next js + TypeScript + Tailwind CSS) so my next step I would love to converted to (React Native + TypeScript)

Inspiration

Build By Saddam Arbaa Project inspired by [ Frontend Mentor] https://www.frontendmentor.io/challenges/rest-countries-api-with-color-theme-switcher-5cacc469fec04111f7b848ca

Screenshots

Responsive on large screens - Home Page

Responsive on tablet screens

Responsive on mobile screens

Single Country Page

404 Not Found Page

Search Page

Filter countries by Region

Filter countries by Region (America)

Filter countries by Region (Africa)

Filter countries by Region (Asia)

Filter countries by Region (Europe)

Filter countries by Region (Oceania)

Next.js + Tailwind CSS Example

This example shows how to use Tailwind CSS (v3.0) with Next.js. It follows the steps outlined in the official Tailwind docs.

Preview

Preview the example live on StackBlitz:

Deploy your own

Deploy the example using Vercel:

How to use

Execute create-next-app with npm or Yarn to bootstrap the example:

npx create-next-app --example with-tailwindcss with-tailwindcss-app
# or
yarn create next-app --example with-tailwindcss with-tailwindcss-app

Deploy it to the cloud with Vercel (Documentation).