Country-App w/React-Redux.js

Table of Contents

• Project Overview
• Features
• Project Setup
• Run the Application
• Skills Used

Project Overview

A Country App made with React-Redux.js & Next.js where you can add or remove your country data like name, rank, continent and flag image with the helpful tools.

Features

• A UI which shows a dropdown of the current list of countries on load.

• Changing the value in the drop down should display the details of the current selected country. (Name, Image, Rank).

• User can be able to add a new country Name.

  • Validation:
    • Min 3 chars and Max 20
    • County Image - Only accept Jpg and Png and Max 4 MB
    • Continent should be selected from dropdown having unique values from the data file
    • Rank should accept only numeric values

• Once successful post, user can be able to see all the updated list of countries from data file without page refresh

• User can be remove any country data by click on cross button

Project Setup

• Download as .zip file or clone this project:

  $ git clone https://github.com/msgaurav/country-app.git
  

• Open terminal, check that if you have Node.js installed. If installed, then move to the new cloned directory by using cd <folder-name> command
• Now install all project dependencies with npm install

Run the Application:

After installtion of project dependencies, run it locally:

• To run the app locally simply run npm run dev command in your terminal
• Then open your browser and go to http://localhost:3000/

Skills Used

• HTML5
• CSS3
• SASS
• Material-Ui
• JavaScript
• React.js / Hooks
• Next.js
• Redux.js
• Tools:
  • npm
  • ESLint
  • prop-types

Note

• I do not own any copyrights, all the rights go to their respective owners.

Thank You 😃