A web application to search all the different countries in the world and get details about them which can include languages, currencies, population, domain e.t.c This application is built with CSS, React, Redux-Toolkit and React-Router.

Overview

Contra

Countra is a web application built for users to be able to search all the different countries in the world, view details which includes, languages, food, currencies, population e.t.c and also countries they share borders with.

Countra also provides a filter feature in which users can filter countries by region/continent and users can also search countries.

Countra also provides theme switching from dark to light theme and vice-versa.

Countra is responsive on all devices from mobile to tablet and desktop.

Countra is built with React, Redux-Toolkit for State Management, React-Router for Client style routing and also CSS for styling.

You can check out the love site here

Bonus: There is a beautiful 404 page incase you land on apage that doesn't exist in this application

Check out the view below

Home Page

Details Page to view more about a country

404 page not found/ Error page

Dark mode

Home Page

Details Page to view more about a country

404 page not found/ Error page

This project was bootstrapped with Create React App.

Available Scripts

In the project directory, you can run:

npm start

Runs the app in the development mode.
Open http://localhost:3000 to view it in the browser.

The page will reload if you make edits.
You will also see any lint errors in the console.

npm test

Launches the test runner in the interactive watch mode.
See the section about running tests for more information.

npm run build

Builds the app for production to the build folder.
It correctly bundles React in production mode and optimizes the build for the best performance.

The build is minified and the filenames include the hashes.
Your app is ready to be deployed!

See the section about deployment for more information.

npm run eject

Note: this is a one-way operation. Once you eject, you can’t go back!

If you aren’t satisfied with the build tool and configuration choices, you can eject at any time. This command will remove the single build dependency from your project.

Instead, it will copy all the configuration files and the transitive dependencies (webpack, Babel, ESLint, etc) right into your project so you have full control over them. All of the commands except eject will still work, but they will point to the copied scripts so you can tweak them. At this point you’re on your own.

You don’t have to ever use eject. The curated feature set is suitable for small and middle deployments, and you shouldn’t feel obligated to use this feature. However we understand that this tool wouldn’t be useful if you couldn’t customize it when you are ready for it.

Learn More

You can learn more in the Create React App documentation.

To learn React, check out the React documentation.

Code Splitting

This section has moved here: https://facebook.github.io/create-react-app/docs/code-splitting

Analyzing the Bundle Size

This section has moved here: https://facebook.github.io/create-react-app/docs/analyzing-the-bundle-size

Making a Progressive Web App

This section has moved here: https://facebook.github.io/create-react-app/docs/making-a-progressive-web-app

Advanced Configuration

This section has moved here: https://facebook.github.io/create-react-app/docs/advanced-configuration

Deployment

This section has moved here: https://facebook.github.io/create-react-app/docs/deployment

npm run build fails to minify

This section has moved here: https://facebook.github.io/create-react-app/docs/troubleshooting#npm-run-build-fails-to-minify

You might also like...

To eleventy and beyond! The all-in-one tool for templates where you want them, component frameworks where you need them 🚀

To eleventy and beyond! The all-in-one tool for templates where you want them, component frameworks where you need them 🚀

Slinkity 🚧 This project is heavily under construction! 🚧 As excited as you may be, we don't recommend this early alpha for production use. Still, gi

Dec 27, 2022

A web application which has leetcode questions listed on the basis of different companies.

URL A web application which has leetcode questions listed on the basis of different companies. This project was made using React.js and Flask to help

May 24, 2022

Edvora App is a web application based on an external API, showing data about different types of products and the user can filter these data by choosing a specific state, city or product name. Build with React.js

 Edvora App is a web application based on an external API, showing data about different types of products and the user can filter these data by choosing a specific state, city or product name. Build with React.js

Edvora App is a web application based on an external API, showing data about different types of products and the user can filter these data by choosing a specific state, city or product name. Build with React.js

Mar 11, 2022

A hotel reservation app displays all the existing hotels and details of each hotel, allowing the user to reserve the hotel they want.

Reservify A hotel reservation app displays all the existing hotels and details of each hotel, allowing the user to reserve the hotel they want. Allows

Oct 6, 2022

A weather app done with React. Allows you to make a search for the current weather by simply typing "common knowledge" cities and save them to favourites on local storage.

A weather app done with React. Allows you to make a search for the current weather by simply typing

Simpliest Weather React-App A weather app done with React. Allows you to make a search for the current weather by simply typing "common knowledge" cit

Aug 24, 2022

Provide solutions to make your app flexible for different screen sizes, different devices.

Provide solutions to make your app flexible for different screen sizes, different devices.

react-native-size-scaling Provide solutions to make your app flexible for different screen sizes, different devices, based on your device's pixel rati

Dec 23, 2022

a more intuitive way of defining private, public and common routes for react applications using react-router-dom v6

auth-react-router is a wrapper over react-router-dom v6 that provides a simple API for configuring public, private and common routes (React suspense r

Dec 3, 2022

Basic React Project with React Router, ContextAPI and Login

Getting Started with Create React App This project was bootstrapped with Create React App. Available Scripts In the project directory, you can run: np

Jan 3, 2023

IngredientRecipeFinder - Web app built with react using Edamam API to find any recipe for an ingredient search with nutrition filters (high protein, low carb,etc)

Ingredient Recipe Finder Web app This web app built with the use of Edamam API allows you to find any type of recipe for a specific ingredient you are

Jan 4, 2022
Owner
Franklin Okolie
A Software Engineer with keen interest in building pixel-perfect design and aesthetic, clean user interfaces, with focus on user experience and interaction.
Franklin Okolie
⚡️The Fullstack React Framework — built on Next.js

The Fullstack React Framework "Zero-API" Data Layer — Built on Next.js — Inspired by Ruby on Rails Read the Documentation “Zero-API” data layer lets y

⚡️Blitz 12.5k Jan 4, 2023
A React Native starter template project with built-in navigation & redux toolkit.

react-native-template A React Native starter template project with built-in navigation & redux toolkit. What's included? @react-native-async-storage/a

Manish Bista 8 Oct 29, 2022
Router JS 💽 Simple Router building in JavaScript

Router JS ?? Simple Router building in JavaScript

David Montaño Tamayo 1 Feb 12, 2022
Redux-Toolkit example with React Hooks CRUD Application, Axios, Rest API, Bootstrap

Redux-Toolkit CRUD example with React Hooks, Axios & Web API Build Redux-Toolkit CRUD application with React Hooks and Rest API calls in that: Each it

null 69 Dec 27, 2022
Boilerplate for Truffle, Web3.js, React, Redux Toolkit

Truffle, React, Redux Toolkit, Web3.js boilerplate What it's for Currently, it's a nightmare and takes forever trying to get React working with Truffl

Adrian Delgado Ξ 29 Jun 9, 2022
A Higher Order Component using react-redux to keep form state in a Redux store

redux-form You build great forms, but do you know HOW users use your forms? Find out with Form Nerd! Professional analytics from the creator of Redux

Redux Form 12.6k Jan 3, 2023
Redux-todos - simple react, redux todos

Redux Todos Please star this repo if you like ⭐ It's motivates me a lot! Getting Started This project was bootstrapped with Create React App. Stack Av

Ruslan Shvetsov 2 Jul 29, 2022
USA Covid-19 Tracker is a mobile-first application built with React and Redux to give precise information about the virus behavior in the United States. Great transitions and user feedback made with plain CSS.

React.js USA Covid-19 Tracker This application allows the public to keep track of the stadistics of the Covid-19 Pandemic in the United Stated. You wi

Rafael Echart 14 Oct 25, 2022
A Google Clone which built with ReactJS. You can click the demo and search whatever you want!

Google Clone with ReactJS A small web app that imitate the desktop web version of google site, you can search whatever you want. Google Clone Demo Lin

Özge Coşkun Gürsucu 36 Aug 14, 2022
Single Page Application with React, React Router, PostCSS, Webpack, Docker and Docker Compose.

spa-store Single Page Application with React, React Router, PostCSS, Webpack, Docker and Docker Compose. Contributing Feedback Roadmap Releases Check

Luis Falcon 2 Jul 4, 2022