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 .
- Author
- Demo
- Technologies
- Optimizations
- Contributing
- Status
- Features
- Inspiration
- Related Projects
- Support
- Feedback
- Run Locally
- Screenshots
- React Js
- Next Js
- TypeScript
- Tailwind CSS
- Heroicons
- Vercel Hosting
- 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
- 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
Contributions are always welcome!
Front-End Mentor Rest Countries API Challenge app built with React Native + TypeScript + Expo + React Navigation
For support, email saddamarbaas@gmail.com.
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
Clone the project
https://github.com/saddamarbaa/rest-countries-app-nextjs-typescriptGo to the project directory
cd rest-countries-app-nextjs-typescriptInstall dependencies
yarn install
# or
npm installStart the server
npm run dev
# or
yarn devESLint + 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 stepsProject is now complete in (React js + Next js + TypeScript + Tailwind CSS) so my next step I would love to converted to (React Native + TypeScript)
Build By Saddam Arbaa Project inspired by [ Frontend Mentor] https://www.frontendmentor.io/challenges/rest-countries-api-with-color-theme-switcher-5cacc469fec04111f7b848ca
This example shows how to use Tailwind CSS (v3.0) with Next.js. It follows the steps outlined in the official Tailwind docs.
Preview the example live on StackBlitz:
Deploy the example using Vercel:
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-appDeploy it to the cloud with Vercel (Documentation).