https://github.com/saddamarbaa/rest-countries-app-nextjs-typescript
==> Web App that provides you information about all countries in the world build with React Js + Next Js + TypeScript + Tailwind CSS + Redux, Made with developer experience first ESLint + Prettier setup (a mobile-friendly)
https://github.com/saddamarbaa/rest-countries-app-nextjs-typescript
nextjs reactjs redux redux-thunk restful-api tailwind-css typescript
Last synced: 2 months ago
JSON representation
==> Web App that provides you information about all countries in the world build with React Js + Next Js + TypeScript + Tailwind CSS + Redux, Made with developer experience first ESLint + Prettier setup (a mobile-friendly)
- Host: GitHub
- URL: https://github.com/saddamarbaa/rest-countries-app-nextjs-typescript
- Owner: saddamarbaa
- License: mit
- Created: 2022-01-09T12:12:23.000Z (over 3 years ago)
- Default Branch: main
- Last Pushed: 2024-01-22T15:36:23.000Z (over 1 year ago)
- Last Synced: 2025-02-03T14:48:36.374Z (4 months ago)
- Topics: nextjs, reactjs, redux, redux-thunk, restful-api, tailwind-css, typescript
- Language: TypeScript
- Homepage: https://rest-countries-app-two.vercel.app/
- Size: 1.13 MB
- Stars: 2
- Watchers: 2
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# 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](#Author)
- [Demo](#Demo)
- [Technologies](#Technologies)
- [Optimizations](#Optimizations)
- [Contributing](#Contributing)
- [Status](#status)
- [Features](#Features)
- [Inspiration](#inspiration)
- [Related Projects](#Related_Projects)
- [Support](#Support)
- [Feedback](#Feedback)
- [Run Locally](#Run_Locally)
- [Screenshots](#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 [email protected].
# Feedback
If you have any feedback, please reach out to me at [email protected]
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
```bash
https://github.com/saddamarbaa/rest-countries-app-nextjs-typescript
```
Go to the project directory
```bash
cd rest-countries-app-nextjs-typescript
```
Install dependencies
```bash
yarn install
# or
npm install
```
Start the server
```bash
npm run dev
# or
yarn dev
```
ESLint + Prettier + Lint-Staged Check
```bash
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](https://tailwindcss.com/) [(v3.0)](https://tailwindcss.com/blog/tailwindcss-v3) with Next.js. It follows the steps outlined in the official [Tailwind docs](https://tailwindcss.com/docs/guides/nextjs).
## Preview
Preview the example live on [StackBlitz](http://stackblitz.com/):
[](https://stackblitz.com/github/vercel/next.js/tree/canary/examples/with-tailwindcss)
## Deploy your own
Deploy the example using [Vercel](https://vercel.com?utm_source=github&utm_medium=readme&utm_campaign=next-example):
[](https://vercel.com/new/git/external?repository-url=https://github.com/vercel/next.js/tree/canary/examples/with-tailwindcss&project-name=with-tailwindcss&repository-name=with-tailwindcss)
## How to use
Execute [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app) with [npm](https://docs.npmjs.com/cli/init) or [Yarn](https://yarnpkg.com/lang/en/docs/cli/create/) to bootstrap the example:
```bash
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](https://vercel.com/new?utm_source=github&utm_medium=readme&utm_campaign=next-example) ([Documentation](https://nextjs.org/docs/deployment)).