Code Monkey home page Code Monkey logo

countries-app's Introduction

Countries-app

Demo 📸


Application deploy with netlify: 💨

https://countries-app-wsl.netlify.app

📜 About the Project

Countries-app is a project that show all countries and your main informations.

📋 User Stories:

  • - See all countries from the API on the homepage
  • - Search for a country using an input field
  • - Filter countries by region
  • - Click on a country to see more detailed information on a separate page
  • - Click through to the border countries on the detail page
  • - Toggle the color scheme between light and dark mode
  • - Keep dark/light mode, even after refreshing page

🛠 Technologies

  • React.js
  • Styled-components
  • Rest Countries API
  • SWR
  • Axios
  • TypeScript
  • React Spinners
  • react-router-dom
  • eslint
  • prettier
  • EditorConfig

  • 💻 How to run the application

    Pre-requisites:

    You must have the tools installed: Git, Node.js.

    # In the terminal, clone the project:
    $ git clone https://github.com/Wesley-wsl/countries-app.git
    
    # Enter the project folder:
    $ cd countries-app
    
    # Install dependencies:
    $ yarn
    or
    $ npm install
    
    # Run the application:
    $ yarn start
    or
    $ npm run start
    

    Okay, now you can access the application from the route: https://localhost:3000/

    countries-app's People

    Contributors

    wesley-wsl avatar

    Stargazers

     avatar  avatar

    Watchers

     avatar

    Recommend Projects

    • React photo React

      A declarative, efficient, and flexible JavaScript library for building user interfaces.

    • Vue.js photo Vue.js

      🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

    • Typescript photo Typescript

      TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

    • TensorFlow photo TensorFlow

      An Open Source Machine Learning Framework for Everyone

    • Django photo Django

      The Web framework for perfectionists with deadlines.

    • D3 photo D3

      Bring data to life with SVG, Canvas and HTML. 📊📈🎉

    Recommend Topics

    • javascript

      JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

    • web

      Some thing interesting about web. New door for the world.

    • server

      A server is a program made to process requests and deliver data to clients.

    • Machine learning

      Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

    • Game

      Some thing interesting about game, make everyone happy.

    Recommend Org

    • Facebook photo Facebook

      We are working to build community through open source technology. NB: members must have two-factor auth.

    • Microsoft photo Microsoft

      Open source projects and samples from Microsoft.

    • Google photo Google

      Google ❤️ Open Source for everyone.

    • D3 photo D3

      Data-Driven Documents codes.