indiecodermm / nation-guide

Mobile-first app which provides information about all countries. Built with React, Redux Toolkit & REST Countries API

Table of Contents

• 🌍 Nation Guide - Country Information Webapp
  • 🚀 Visit Website
  • 🧰 Tech Stack
  • 🔥 Features
  • ⚙️ Development
  • 💻 Getting Started
    • Prerequisites
    • Setup
    • Install
    • Usage
    • Run tests
    • Deployment
  • 📧 Contact
  • 🔭 Future Features
  • 🤝 Contributing
  • 💖 Show your support
  • 💎 Useful Resources
  • 📝 License

🌍 Nation Guide - Country Information Webapp

Nation Guide is an dynamic web application designed to provide users with a comprehensive database of country details. This project aimed to provide an efficient and user-friendly tool for users to quickly access information about countries. The app is fully responsive for mobile devices and optimized for a smooth user experience.

🚀 Visit Website

Experience the live website at Nation Guide Webapp.

(back to top)

🧰 Tech Stack

🔥 Features

• Explore Countries: Browse through a list of countries worldwide.
• Quick Search: Find countries by their names in a flash.
• Sort & Find: Easily organize countries by area or name.
• Detailed Information: Get detailed information about each country.
• Share Easily: Share country facts with friends.
• Day & Night Modes: Switch between dark and light themes.
• Mobile Friendly: Enjoy a smooth experience on your phone.
• Easy Navigation: Navigate between pages with ease.
• Real-time Updates: Get the latest country data from REST Countries API.

(back to top)

⚙️ Development

This app was developed using the latest industry-standards and best practices. The codebase is highly modularized and organized for easy maintenance and scalability.

Project Structure

With a focus on clean code and reusability, the project is structured as follows:

.
└── src/
    ├── assets
    ├── components/
    │   ├── styles
    │   ├── Navbar.jsx
    │   └── Footer.jsx
    ├── hooks
    ├── redux/
    │   ├── configureStore.js
    │   └── slice.js
    ├── lib/
    │   └── utils.js
    ├── pages/
    │   ├── Home/
    │   │   ├── index.jsx
    │   │   └── Countries.jsx
    │   ├── Detail
    │   └── NotFound.jsx
    ├── services
    ├── tests
    ├── App.jsx
    ├── index.jsx
    ├── index.css
    └── propTypes.js

💻 Getting Started

To get a local copy up and running, follow these steps.

Prerequisites

In order to run this project you need Node.js installed on your machine.

Setup

Clone this repository to your desired folder:

  cd my-project
  git clone [email protected]:IndieCoderMM/nation-guide.git .

Install

Install the dependencies with:

  npm install

Usage

To run the project, execute the following command:

  npm start

Run tests

To run tests, run the following command:

  npm run test

Deployment

You can deploy this project using:

  npm run build

This will create a production-ready build of your website in build/ folder, which you can use to deploy on a static site hosting platform.

(back to top)

📧 Contact

I am always looking for ways to improve my project. If you have any suggestions or ideas, I would love to hear from you.

(back to top)

🔭 Future Features

• Add desktop UI
• Include link to map
• Dark/Light mode
• User authentication
• Favorite countries

(back to top)

🤝 Contributing

I welcome any and all contributions to my website! If you have an idea for a new feature or have found a bug, please open an issue or submit a pull request.

Feel free to check the issues page.

(back to top)

💖 Show your support

If you like this project, please consider giving it a ⭐.

(back to top)

💎 Useful Resources

• Design Insipration - Frontend Mentor Challenge
• Rest Countries API - API to get information about all countries
• Undraw Illustrations - Open-source illustrations

(back to top)

📝 License

This project is MIT licensed.

(back to top)

nation-guide's Issues

Sweep: Create a custom dropdown menu for `SortingBox.jsx`

• Create a new dropdown component to replace the select element we're using
• This component should accept a list of options and a default value as props
• This should contain a trigger element that will open the dropdown items on click
• Make sure this custom component is accessible as a regular select

https://github.com/IndieCoderMM/nation-guide/blob/dev/src/components/SortingBox.jsx#L7-L16
https://github.com/IndieCoderMM/nation-guide/blob/dev/src/styles/SortingBox.module.css

Checklist

• src/components/Dropdown.jsx ✅ Commit 3fa3f4e

• Import React and useState from 'react'. • Define a new functional component named Dropdown that accepts props for options, defaultValue, and onChange. • Use the useState hook to manage the state of the dropdown (whether it's open or not). • Render a div that will act as the trigger element. This div should display the current selected option and toggle the open state of the dropdown when clicked. • Render a list of divs for the dropdown items. These divs should display the option values and call the onChange prop with their value when clicked. • Add appropriate ARIA roles and properties to the trigger element and the dropdown items to ensure accessibility.

Sandbox Execution Logs

trunk init 1/31 ✓

⡿ Downloading Trunk 1.15.0...
⡿ Downloading Trunk 1.15.0...
⢿ Downloading Trunk 1.15.0...
⣻ Downloading Trunk 1.15.0...
⣽ Downloading Trunk 1.15.0...
⣾ Downloading Trunk 1.15.0...
⣷ Downloading Trunk 1.15.0...
✔ Downloading Trunk 1.15.0... done
⡿ Verifying Trunk sha256...
✔ Verifying Trunk sha256... done
⡿ Unpacking Trunk...
✔ Unpacking Trunk... done























































✔ 13 linters were enabled (.trunk/trunk.yaml)
  actionlint 1.6.25 (1 github-workflow file)
  checkov 2.4.9 (4 json, 2 yaml files)
  eslint 8.49.0 (26 javascript files)
  git-diff-check (58 files)
  markdownlint 0.36.0 (1 markdown file) (created .markdownlint.yaml)
  osv-scanner 1.4.0 (1 lockfile file)
  oxipng 8.0.0 (3 png files)
  prettier 3.0.3 (13 css, 1 html, 26 javascript, 3 json, 1 markdown, 2 yaml files)
  stylelint 15.10.3 (13 css files)
  svgo 3.0.2 (2 svg files) (created svgo.config.js)
  trivy 0.45.1 (1 lockfile, 2 yaml files)
  trufflehog 3.56.1 (59 files)
  yamllint 1.32.0 (2 yaml files) (created .yamllint.yaml)
Next Steps
 1. Read documentation
    Our documentation can be found at https://docs.trunk.io
 2. Get help and give feedback
    Join the Trunk community at https://slack.trunk.io

trunk fmt src/components/Dropdown.jsx 2/31 ✓

 ✔ Formatted src/components/Dropdown.jsx
Re-checking autofixed files...








Checked 1 file
✔ No issues

trunk check --fix src/components/Dropdown.jsx 3/31 ❌ (`1`)

  FAILURES  
 eslint  src/components/Dropdown.jsx  .trunk/out/RVALc.yaml
  NOTICES  
 [suggestion] Eslint could not resolve dependencies; try running `npm install` 
 A tool failed to run. You can open the details yaml file for more information.
Checked 1 file
✖ No issues, 1 failure

trunk fmt src/components/Dropdown.jsx 4/31 ✓

 ✔ Formatted src/components/Dropdown.jsx
Re-checking autofixed files...



Checked 1 file
✔ No issues

trunk check --fix src/components/Dropdown.jsx 5/31 ❌ (`1`)

  FAILURES  
 eslint  src/components/Dropdown.jsx  .trunk/out/p1wOk.yaml
  NOTICES  
 [suggestion] Eslint could not resolve dependencies; try running `npm install` 
 A tool failed to run. You can open the details yaml file for more information.
Checked 1 file
✖ No issues, 1 failure

trunk fmt src/components/Dropdown.jsx 6/31 ✓

 ✔ Formatted src/components/Dropdown.jsx
Re-checking autofixed files...



Checked 1 file
✔ No issues

trunk check --fix src/components/Dropdown.jsx 7/31 ❌ (`1`)

  FAILURES  
 eslint  src/components/Dropdown.jsx  .trunk/out/OspBu.yaml
  NOTICES  
 [suggestion] Eslint could not resolve dependencies; try running `npm install` 
 A tool failed to run. You can open the details yaml file for more information.
Checked 1 file
✖ No issues, 1 failure

trunk fmt src/components/Dropdown.jsx 8/31 ✓

 ✔ Formatted src/components/Dropdown.jsx
Re-checking autofixed files...



Checked 1 file
✔ No issues

trunk check --fix src/components/Dropdown.jsx 9/31 ❌ (`1`)

  FAILURES  
 eslint  src/components/Dropdown.jsx  .trunk/out/ieL7X.yaml
  NOTICES  
 [suggestion] Eslint could not resolve dependencies; try running `npm install` 
 A tool failed to run. You can open the details yaml file for more information.
Checked 1 file
✖ No issues, 1 failure

trunk fmt src/components/Dropdown.jsx 10/31 ✓

 ✔ Formatted src/components/Dropdown.jsx
Re-checking autofixed files...



Checked 1 file
✔ No issues

trunk check --fix src/components/Dropdown.jsx 11/31 ❌ (`1`)

  FAILURES  
 eslint  src/components/Dropdown.jsx  .trunk/out/0LEOj.yaml
  NOTICES  
 [suggestion] Eslint could not resolve dependencies; try running `npm install` 
 A tool failed to run. You can open the details yaml file for more information.
Checked 1 file
✖ No issues, 1 failure

trunk fmt src/components/Dropdown.jsx 12/31 ✓

 ✔ Formatted src/components/Dropdown.jsx
Re-checking autofixed files...



Checked 1 file
✔ No issues

trunk check --fix src/components/Dropdown.jsx 13/31 ❌ (`1`)

  FAILURES  
 eslint  src/components/Dropdown.jsx  .trunk/out/cKg19.yaml
  NOTICES  
 [suggestion] Eslint could not resolve dependencies; try running `npm install` 
 A tool failed to run. You can open the details yaml file for more information.
Checked 1 file
✖ No issues, 1 failure

trunk fmt src/components/Dropdown.jsx 14/31 ✓

 ✔ Formatted src/components/Dropdown.jsx
Re-checking autofixed files...



Checked 1 file
✔ No issues

trunk check --fix src/components/Dropdown.jsx 15/31 ❌ (`1`)

  FAILURES  
 eslint  src/components/Dropdown.jsx  .trunk/out/w7Fpa.yaml
  NOTICES  
 [suggestion] Eslint could not resolve dependencies; try running `npm install` 
 A tool failed to run. You can open the details yaml file for more information.
Checked 1 file
✖ No issues, 1 failure

trunk fmt src/components/Dropdown.jsx 16/31 ✓

 ✔ Formatted src/components/Dropdown.jsx
Re-checking autofixed files...



Checked 1 file
✔ No issues

trunk check --fix src/components/Dropdown.jsx 17/31 ❌ (`1`)

  FAILURES  
 eslint  src/components/Dropdown.jsx  .trunk/out/D7E7H.yaml
  NOTICES  
 [suggestion] Eslint could not resolve dependencies; try running `npm install` 
 A tool failed to run. You can open the details yaml file for more information.
Checked 1 file
✖ No issues, 1 failure

trunk fmt src/components/Dropdown.jsx 18/31 ✓

 ✔ Formatted src/components/Dropdown.jsx
Re-checking autofixed files...



Checked 1 file
✔ No issues

trunk check --fix src/components/Dropdown.jsx 19/31 ❌ (`1`)

  FAILURES  
 eslint  src/components/Dropdown.jsx  .trunk/out/xh5LQ.yaml
  NOTICES  
 [suggestion] Eslint could not resolve dependencies; try running `npm install` 
 A tool failed to run. You can open the details yaml file for more information.
Checked 1 file
✖ No issues, 1 failure

trunk fmt src/components/Dropdown.jsx 20/31 ✓

 ✔ Formatted src/components/Dropdown.jsx
Re-checking autofixed files...



Checked 1 file
✔ No issues

trunk check --fix src/components/Dropdown.jsx 21/31 ❌ (`1`)

  FAILURES  
 eslint  src/components/Dropdown.jsx  .trunk/out/DH8rh.yaml
  NOTICES  
 [suggestion] Eslint could not resolve dependencies; try running `npm install` 
 A tool failed to run. You can open the details yaml file for more information.
Checked 1 file
✖ No issues, 1 failure

trunk fmt src/components/Dropdown.jsx 22/31 ✓

 ✔ Formatted src/components/Dropdown.jsx
Re-checking autofixed files...



Checked 1 file
✔ No issues

trunk check --fix src/components/Dropdown.jsx 23/31 ❌ (`1`)

  FAILURES  
 eslint  src/components/Dropdown.jsx  .trunk/out/s4iTS.yaml
  NOTICES  
 [suggestion] Eslint could not resolve dependencies; try running `npm install` 
 A tool failed to run. You can open the details yaml file for more information.
Checked 1 file
✖ No issues, 1 failure

trunk fmt src/components/Dropdown.jsx 24/31 ✓

 ✔ Formatted src/components/Dropdown.jsx
Re-checking autofixed files...



Checked 1 file
✔ No issues

trunk check --fix src/components/Dropdown.jsx 25/31 ❌ (`1`)

  FAILURES  
 eslint  src/components/Dropdown.jsx  .trunk/out/0lBv0.yaml
  NOTICES  
 [suggestion] Eslint could not resolve dependencies; try running `npm install` 
 A tool failed to run. You can open the details yaml file for more information.
Checked 1 file
✖ No issues, 1 failure

trunk fmt src/components/Dropdown.jsx 26/31 ✓

 ✔ Formatted src/components/Dropdown.jsx
Re-checking autofixed files...



Checked 1 file
✔ No issues

trunk check --fix src/components/Dropdown.jsx 27/31 ❌ (`1`)

  FAILURES  
 eslint  src/components/Dropdown.jsx  .trunk/out/ntMG7.yaml
  NOTICES  
 [suggestion] Eslint could not resolve dependencies; try running `npm install` 
 A tool failed to run. You can open the details yaml file for more information.
Checked 1 file
✖ No issues, 1 failure

trunk fmt src/components/Dropdown.jsx 28/31 ✓

 ✔ Formatted src/components/Dropdown.jsx
Re-checking autofixed files...



Checked 1 file
✔ No issues

trunk check --fix src/components/Dropdown.jsx 29/31 ❌ (`1`)

  FAILURES  
 eslint  src/components/Dropdown.jsx  .trunk/out/TvqdU.yaml
  NOTICES  
 [suggestion] Eslint could not resolve dependencies; try running `npm install` 
 A tool failed to run. You can open the details yaml file for more information.
Checked 1 file
✖ No issues, 1 failure

trunk fmt src/components/Dropdown.jsx 30/31 ✓

 ✔ Formatted src/components/Dropdown.jsx
Re-checking autofixed files...



Checked 1 file
✔ No issues

trunk check --fix src/components/Dropdown.jsx 31/31 ❌ (`1`)

  FAILURES  
 eslint  src/components/Dropdown.jsx  .trunk/out/XVKQs.yaml
  NOTICES  
 [suggestion] Eslint could not resolve dependencies; try running `npm install` 
 A tool failed to run. You can open the details yaml file for more information.
Checked 1 file
✖ No issues, 1 failure

• src/components/SortingBox.jsx ✅ Commit 7ecd7d2

• Import the new Dropdown component. • Replace the select element with the Dropdown component. Pass the sorter and setSorter props to the Dropdown component as the options and onChange props respectively.

Sandbox Execution Logs

trunk init 1/31 ✓

⡿ Downloading Trunk 1.15.0...
⡿ Downloading Trunk 1.15.0...
⢿ Downloading Trunk 1.15.0...
⣻ Downloading Trunk 1.15.0...
⣽ Downloading Trunk 1.15.0...
⣾ Downloading Trunk 1.15.0...
⣷ Downloading Trunk 1.15.0...
⣯ Downloading Trunk 1.15.0...
✔ Downloading Trunk 1.15.0... done
⡿ Verifying Trunk sha256...
✔ Verifying Trunk sha256... done
⡿ Unpacking Trunk...
✔ Unpacking Trunk... done




























✔ 13 linters were enabled (.trunk/trunk.yaml)
  actionlint 1.6.25 (1 github-workflow file)
  checkov 2.4.9 (4 json, 2 yaml files)
  eslint 8.49.0 (25 javascript files)
  git-diff-check (57 files)
  markdownlint 0.36.0 (1 markdown file) (created .markdownlint.yaml)
  osv-scanner 1.4.0 (1 lockfile file)
  oxipng 8.0.0 (3 png files)
  prettier 3.0.3 (13 css, 1 html, 25 javascript, 3 json, 1 markdown, 2 yaml files)
  stylelint 15.10.3 (13 css files)
  svgo 3.0.2 (2 svg files) (created svgo.config.js)
  trivy 0.45.1 (1 lockfile, 2 yaml files)
  trufflehog 3.56.1 (58 files)
  yamllint 1.32.0 (2 yaml files) (created .yamllint.yaml)
Next Steps
 1. Read documentation
    Our documentation can be found at https://docs.trunk.io
 2. Get help and give feedback
    Join the Trunk community at https://slack.trunk.io

trunk fmt src/components/SortingBox.jsx 2/31 ✓

 ✔ Formatted src/components/SortingBox.jsx
Re-checking autofixed files...





Checked 1 file
✔ No issues

trunk check --fix src/components/SortingBox.jsx 3/31 ❌ (`1`)

  FAILURES  
 eslint  src/components/SortingBox.jsx  .trunk/out/u2nko.yaml
 eslint  src/components/SortingBox.jsx  .trunk/out/FHV1o.yaml
  NOTICES  
 [suggestion] Eslint could not resolve dependencies; try running `npm install`      
 Some tools failed to run. You can open the details yaml files for more information.
Checked 1 file
✖ No issues, 2 failures

trunk fmt src/components/SortingBox.jsx 4/31 ✓

 ✔ Formatted src/components/SortingBox.jsx
Re-checking autofixed files...



Checked 1 file
✔ No issues

trunk check --fix src/components/SortingBox.jsx 5/31 ❌ (`1`)

  FAILURES  
 eslint  src/components/SortingBox.jsx  .trunk/out/wl5Y1.yaml
 eslint  src/components/SortingBox.jsx  .trunk/out/r7VbL.yaml
  NOTICES  
 [suggestion] Eslint could not resolve dependencies; try running `npm install`      
 Some tools failed to run. You can open the details yaml files for more information.
Checked 1 file
✖ No issues, 2 failures

trunk fmt src/components/SortingBox.jsx 6/31 ✓

 ✔ Formatted src/components/SortingBox.jsx
Re-checking autofixed files...



Checked 1 file
✔ No issues

trunk check --fix src/components/SortingBox.jsx 7/31 ❌ (`1`)

  FAILURES  
 eslint  src/components/SortingBox.jsx  .trunk/out/bqLTU.yaml
 eslint  src/components/SortingBox.jsx  .trunk/out/4WiTe.yaml
  NOTICES  
 [suggestion] Eslint could not resolve dependencies; try running `npm install`      
 Some tools failed to run. You can open the details yaml files for more information.
Checked 1 file
✖ No issues, 2 failures

trunk fmt src/components/SortingBox.jsx 8/31 ✓

 ✔ Formatted src/components/SortingBox.jsx
Re-checking autofixed files...



Checked 1 file
✔ No issues

trunk check --fix src/components/SortingBox.jsx 9/31 ❌ (`1`)

  FAILURES  
 eslint  src/components/SortingBox.jsx  .trunk/out/433NW.yaml
 eslint  src/components/SortingBox.jsx  .trunk/out/qiLW8.yaml
  NOTICES  
 [suggestion] Eslint could not resolve dependencies; try running `npm install`      
 Some tools failed to run. You can open the details yaml files for more information.
Checked 1 file
✖ No issues, 2 failures

trunk fmt src/components/SortingBox.jsx 10/31 ✓

 ✔ Formatted src/components/SortingBox.jsx
Re-checking autofixed files...



Checked 1 file
✔ No issues

trunk check --fix src/components/SortingBox.jsx 11/31 ❌ (`1`)

  FAILURES  
 eslint  src/components/SortingBox.jsx  .trunk/out/l1KIk.yaml
 eslint  src/components/SortingBox.jsx  .trunk/out/sB8HU.yaml
  NOTICES  
 [suggestion] Eslint could not resolve dependencies; try running `npm install`      
 Some tools failed to run. You can open the details yaml files for more information.
Checked 1 file
✖ No issues, 2 failures

trunk fmt src/components/SortingBox.jsx 12/31 ✓

 ✔ Formatted src/components/SortingBox.jsx
Re-checking autofixed files...



Checked 1 file
✔ No issues

trunk check --fix src/components/SortingBox.jsx 13/31 ❌ (`1`)

  FAILURES  
 eslint  src/components/SortingBox.jsx  .trunk/out/QvXN7.yaml
 eslint  src/components/SortingBox.jsx  .trunk/out/o96Y2.yaml
  NOTICES  
 [suggestion] Eslint could not resolve dependencies; try running `npm install`      
 Some tools failed to run. You can open the details yaml files for more information.
Checked 1 file
✖ No issues, 2 failures

trunk fmt src/components/SortingBox.jsx 14/31 ✓

 ✔ Formatted src/components/SortingBox.jsx
Re-checking autofixed files...



Checked 1 file
✔ No issues

trunk check --fix src/components/SortingBox.jsx 15/31 ❌ (`1`)

  FAILURES  
 eslint  src/components/SortingBox.jsx  .trunk/out/K9xCi.yaml
 eslint  src/components/SortingBox.jsx  .trunk/out/aZgG3.yaml
  NOTICES  
 [suggestion] Eslint could not resolve dependencies; try running `npm install`      
 Some tools failed to run. You can open the details yaml files for more information.
Checked 1 file
✖ No issues, 2 failures

trunk fmt src/components/SortingBox.jsx 16/31 ✓

 ✔ Formatted src/components/SortingBox.jsx
Re-checking autofixed files...



Checked 1 file
✔ No issues

trunk check --fix src/components/SortingBox.jsx 17/31 ❌ (`1`)

  FAILURES  
 eslint  src/components/SortingBox.jsx  .trunk/out/6E3e0.yaml
 eslint  src/components/SortingBox.jsx  .trunk/out/u7rd7.yaml
  NOTICES  
 [suggestion] Eslint could not resolve dependencies; try running `npm install`      
 Some tools failed to run. You can open the details yaml files for more information.
Checked 1 file
✖ No issues, 2 failures

trunk fmt src/components/SortingBox.jsx 18/31 ✓

 ✔ Formatted src/components/SortingBox.jsx
Re-checking autofixed files...



Checked 1 file
✔ No issues

trunk check --fix src/components/SortingBox.jsx 19/31 ❌ (`1`)

  FAILURES  
 eslint  src/components/SortingBox.jsx  .trunk/out/uDrlV.yaml
 eslint  src/components/SortingBox.jsx  .trunk/out/OLJUN.yaml
  NOTICES  
 [suggestion] Eslint could not resolve dependencies; try running `npm install`      
 Some tools failed to run. You can open the details yaml files for more information.
Checked 1 file
✖ No issues, 2 failures

trunk fmt src/components/SortingBox.jsx 20/31 ✓

 ✔ Formatted src/components/SortingBox.jsx
Re-checking autofixed files...



Checked 1 file
✔ No issues

trunk check --fix src/components/SortingBox.jsx 21/31 ❌ (`1`)

  FAILURES  
 eslint  src/components/SortingBox.jsx  .trunk/out/u1D0j.yaml
 eslint  src/components/SortingBox.jsx  .trunk/out/5HPCi.yaml
  NOTICES  
 [suggestion] Eslint could not resolve dependencies; try running `npm install`      
 Some tools failed to run. You can open the details yaml files for more information.
Checked 1 file
✖ No issues, 2 failures

trunk fmt src/components/SortingBox.jsx 22/31 ✓

 ✔ Formatted src/components/SortingBox.jsx
Re-checking autofixed files...



Checked 1 file
✔ No issues

trunk check --fix src/components/SortingBox.jsx 23/31 ❌ (`1`)

  FAILURES  
 eslint  src/components/SortingBox.jsx  .trunk/out/qvTZZ.yaml
 eslint  src/components/SortingBox.jsx  .trunk/out/Nk0QA.yaml
  NOTICES  
 [suggestion] Eslint could not resolve dependencies; try running `npm install`      
 Some tools failed to run. You can open the details yaml files for more information.
Checked 1 file
✖ No issues, 2 failures

trunk fmt src/components/SortingBox.jsx 24/31 ✓

 ✔ Formatted src/components/SortingBox.jsx
Re-checking autofixed files...



Checked 1 file
✔ No issues

trunk check --fix src/components/SortingBox.jsx 25/31 ❌ (`1`)

  FAILURES  
 eslint  src/components/SortingBox.jsx  .trunk/out/PuCSp.yaml
 eslint  src/components/SortingBox.jsx  .trunk/out/bx70h.yaml
  NOTICES  
 [suggestion] Eslint could not resolve dependencies; try running `npm install`      
 Some tools failed to run. You can open the details yaml files for more information.
Checked 1 file
✖ No issues, 2 failures

trunk fmt src/components/SortingBox.jsx 26/31 ✓

 ✔ Formatted src/components/SortingBox.jsx
Re-checking autofixed files...



Checked 1 file
✔ No issues

trunk check --fix src/components/SortingBox.jsx 27/31 ❌ (`1`)

  FAILURES  
 eslint  src/components/SortingBox.jsx  .trunk/out/RdiiD.yaml
 eslint  src/components/SortingBox.jsx  .trunk/out/DTnG5.yaml
  NOTICES  
 [suggestion] Eslint could not resolve dependencies; try running `npm install`      
 Some tools failed to run. You can open the details yaml files for more information.
Checked 1 file
✖ No issues, 2 failures

trunk fmt src/components/SortingBox.jsx 28/31 ✓

 ✔ Formatted src/components/SortingBox.jsx
Re-checking autofixed files...



Checked 1 file
✔ No issues

trunk check --fix src/components/SortingBox.jsx 29/31 ❌ (`1`)

  FAILURES  
 eslint  src/components/SortingBox.jsx  .trunk/out/oYpJT.yaml
 eslint  src/components/SortingBox.jsx  .trunk/out/iBjwT.yaml
  NOTICES  
 [suggestion] Eslint could not resolve dependencies; try running `npm install`      
 Some tools failed to run. You can open the details yaml files for more information.
Checked 1 file
✖ No issues, 2 failures

trunk fmt src/components/SortingBox.jsx 30/31 ✓

 ✔ Formatted src/components/SortingBox.jsx
Re-checking autofixed files...



Checked 1 file
✔ No issues

trunk check --fix src/components/SortingBox.jsx 31/31 ❌ (`1`)

  FAILURES  
 eslint  src/components/SortingBox.jsx  .trunk/out/hpwBr.yaml
 eslint  src/components/SortingBox.jsx  .trunk/out/ZYUce.yaml
  NOTICES  
 [suggestion] Eslint could not resolve dependencies; try running `npm install`      
 Some tools failed to run. You can open the details yaml files for more information.
Checked 1 file
✖ No issues, 2 failures

• src/styles/Dropdown.module.css ✅ Commit 84f8659

• Define styles for the dropdown component. The styles should match the design of the current select element in the SortingBox component.

Sandbox Execution Logs

trunk init 1/16 ✓

⡿ Downloading Trunk 1.15.0...
⡿ Downloading Trunk 1.15.0...
⢿ Downloading Trunk 1.15.0...
⣻ Downloading Trunk 1.15.0...
⣽ Downloading Trunk 1.15.0...
⣾ Downloading Trunk 1.15.0...
⣷ Downloading Trunk 1.15.0...
✔ Downloading Trunk 1.15.0... done
⡿ Verifying Trunk sha256...
✔ Verifying Trunk sha256... done
⡿ Unpacking Trunk...
✔ Unpacking Trunk... done


























✔ 13 linters were enabled (.trunk/trunk.yaml)
  actionlint 1.6.25 (1 github-workflow file)
  checkov 2.4.9 (4 json, 2 yaml files)
  eslint 8.49.0 (25 javascript files)
  git-diff-check (58 files)
  markdownlint 0.36.0 (1 markdown file) (created .markdownlint.yaml)
  osv-scanner 1.4.0 (1 lockfile file)
  oxipng 8.0.0 (3 png files)
  prettier 3.0.3 (14 css, 1 html, 25 javascript, 3 json, 1 markdown, 2 yaml files)
  stylelint 15.10.3 (14 css files)
  svgo 3.0.2 (2 svg files) (created svgo.config.js)
  trivy 0.45.1 (1 lockfile, 2 yaml files)
  trufflehog 3.56.1 (59 files)
  yamllint 1.32.0 (2 yaml files) (created .yamllint.yaml)
Next Steps
 1. Read documentation
    Our documentation can be found at https://docs.trunk.io
 2. Get help and give feedback
    Join the Trunk community at https://slack.trunk.io

trunk fmt src/styles/Dropdown.module.css 2/16 ❌ (`1`)

 ✔ Formatted src/styles/Dropdown.module.css
Re-checking autofixed files...






  FAILURES  
 stylelint  src/styles/Dropdown.module.css  .trunk/out/zoexN.yaml
 stylelint  src/styles/Dropdown.module.css  .trunk/out/e2KrQ.yaml
  NOTICES  
 Some tools failed to run. You can open the details yaml files for more information.
Checked 1 file
✖ No issues, 2 failures

trunk fmt src/styles/Dropdown.module.css 3/16 ❌ (`1`)

 ✔ Formatted src/styles/Dropdown.module.css
Re-checking autofixed files...




  FAILURES  
 stylelint  src/styles/Dropdown.module.css  .trunk/out/zeI80.yaml
 stylelint  src/styles/Dropdown.module.css  .trunk/out/VKf7s.yaml
  NOTICES  
 Some tools failed to run. You can open the details yaml files for more information.
Checked 1 file
✖ No issues, 2 failures

trunk fmt src/styles/Dropdown.module.css 4/16 ❌ (`1`)

 ✔ Formatted src/styles/Dropdown.module.css
Re-checking autofixed files...



  FAILURES  
 stylelint  src/styles/Dropdown.module.css  .trunk/out/TOQdf.yaml
 stylelint  src/styles/Dropdown.module.css  .trunk/out/JdV2E.yaml
  NOTICES  
 Some tools failed to run. You can open the details yaml files for more information.
Checked 1 file
✖ No issues, 2 failures

trunk fmt src/styles/Dropdown.module.css 5/16 ❌ (`1`)

  FAILURES  
 prettier   src/styles/Dropdown.module.css  .trunk/out/9UHQz.yaml
 stylelint  src/styles/Dropdown.module.css  .trunk/out/EJ0Yz.yaml
  NOTICES  
 Some tools failed to run. You can open the details yaml files for more information.
Checked 0 files
✖ No issues, 2 failures

trunk fmt src/styles/Dropdown.module.css 6/16 ❌ (`1`)

 ✔ Formatted src/styles/Dropdown.module.css
Re-checking autofixed files...




  FAILURES  
 stylelint  src/styles/Dropdown.module.css  .trunk/out/vYGXq.yaml
 stylelint  src/styles/Dropdown.module.css  .trunk/out/Wnirr.yaml
  NOTICES  
 Some tools failed to run. You can open the details yaml files for more information.
Checked 1 file
✖ No issues, 2 failures

trunk fmt src/styles/Dropdown.module.css 7/16 ❌ (`1`)

 ✔ Formatted src/styles/Dropdown.module.css
Re-checking autofixed files...




  FAILURES  
 stylelint  src/styles/Dropdown.module.css  .trunk/out/88wik.yaml
 stylelint  src/styles/Dropdown.module.css  .trunk/out/KUEz5.yaml
  NOTICES  
 Some tools failed to run. You can open the details yaml files for more information.
Checked 1 file
✖ No issues, 2 failures

trunk fmt src/styles/Dropdown.module.css 8/16 ❌ (`1`)

 ✔ Formatted src/styles/Dropdown.module.css
Re-checking autofixed files...




  FAILURES  
 stylelint  src/styles/Dropdown.module.css  .trunk/out/IiK1g.yaml
 stylelint  src/styles/Dropdown.module.css  .trunk/out/PEmzS.yaml
  NOTICES  
 Some tools failed to run. You can open the details yaml files for more information.
Checked 1 file
✖ No issues, 2 failures

trunk fmt src/styles/Dropdown.module.css 9/16 ❌ (`1`)

 ✔ Formatted src/styles/Dropdown.module.css
Re-checking autofixed files...




  FAILURES  
 stylelint  src/styles/Dropdown.module.css  .trunk/out/9n4Tm.yaml
 stylelint  src/styles/Dropdown.module.css  .trunk/out/Z1w1f.yaml
  NOTICES  
 Some tools failed to run. You can open the details yaml files for more information.
Checked 1 file
✖ No issues, 2 failures

trunk fmt src/styles/Dropdown.module.css 10/16 ❌ (`1`)

  FAILURES  
 stylelint  src/styles/Dropdown.module.css  .trunk/out/g4OyI.yaml
  NOTICES  
 A tool failed to run. You can open the details yaml file for more information.
Checked 1 file
✖ No issues, 1 failure

trunk fmt src/styles/Dropdown.module.css 11/16 ❌ (`1`)

  FAILURES  
 prettier   src/styles/Dropdown.module.css  .trunk/out/Z46Tp.yaml
 stylelint  src/styles/Dropdown.module.css  .trunk/out/AE8PP.yaml
  NOTICES  
 Some tools failed to run. You can open the details yaml files for more information.
Checked 0 files
✖ No issues, 2 failures

trunk fmt src/styles/Dropdown.module.css 12/16 ❌ (`1`)

 ✔ Formatted src/styles/Dropdown.module.css
Re-checking autofixed files...




  FAILURES  
 stylelint  src/styles/Dropdown.module.css  .trunk/out/tuGHg.yaml
 stylelint  src/styles/Dropdown.module.css  .trunk/out/IeWVP.yaml
  NOTICES  
 Some tools failed to run. You can open the details yaml files for more information.
Checked 1 file
✖ No issues, 2 failures

trunk fmt src/styles/Dropdown.module.css 13/16 ❌ (`1`)

 ✔ Formatted src/styles/Dropdown.module.css
Re-checking autofixed files...



  FAILURES  
 stylelint  src/styles/Dropdown.module.css  .trunk/out/V8tQR.yaml
 stylelint  src/styles/Dropdown.module.css  .trunk/out/kYdDo.yaml
  NOTICES  
 Some tools failed to run. You can open the details yaml files for more information.
Checked 1 file
✖ No issues, 2 failures

trunk fmt src/styles/Dropdown.module.css 14/16 ❌ (`1`)

 ✔ Formatted src/styles/Dropdown.module.css
Re-checking autofixed files...




  FAILURES  
 stylelint  src/styles/Dropdown.module.css  .trunk/out/ZKttk.yaml
 stylelint  src/styles/Dropdown.module.css  .trunk/out/kQIJU.yaml
  NOTICES  
 Some tools failed to run. You can open the details yaml files for more information.
Checked 1 file
✖ No issues, 2 failures

trunk fmt src/styles/Dropdown.module.css 15/16 ❌ (`1`)

 ✔ Formatted src/styles/Dropdown.module.css
Re-checking autofixed files...




  FAILURES  
 stylelint  src/styles/Dropdown.module.css  .trunk/out/Vsn03.yaml
 stylelint  src/styles/Dropdown.module.css  .trunk/out/IUzF6.yaml
  NOTICES  
 Some tools failed to run. You can open the details yaml files for more information.
Checked 1 file
✖ No issues, 2 failures

trunk fmt src/styles/Dropdown.module.css 16/16 ❌ (`1`)

 ✔ Formatted src/styles/Dropdown.module.css
Re-checking autofixed files...



  FAILURES  
 stylelint  src/styles/Dropdown.module.css  .trunk/out/QqgGN.yaml
 stylelint  src/styles/Dropdown.module.css  .trunk/out/Eq9r1.yaml
  NOTICES  
 Some tools failed to run. You can open the details yaml files for more information.
Checked 1 file
✖ No issues, 2 failures

Sweep: Implement a feature to display more countries in `Home.jsx`

On the homepage, only at most 12 countries are shown currently. We need to add a button to load more countries when clicked.

• Create a button after the Countries component. Clicking this should load 12 more countries.
• Show a loading spinner for 3 seconds before displaying new items. For styling spinner, reference this.

https://github.com/IndieCoderMM/nation-guide/blob/dev/src/pages/Home.jsx#L39

Checklist

• src/pages/Home.jsx ✅ Commit 052e070

• Add a new state variable `displayCount` with initial value 12 to keep track of the number of countries currently displayed. • Add a new state variable `loadingMore` with initial value false to keep track of whether the loading spinner should be displayed. • Modify the `countries` variable to slice the first `displayCount` countries instead of always slicing the first 12 countries. • Add a button after the `Countries` component. When this button is clicked, set `loadingMore` to true and use `setTimeout` to set `displayCount` to `displayCount + 12` and `loadingMore` to false after 3 seconds. • Before the `Countries` component, add a conditional rendering to display the loading spinner if `loadingMore` is true. Use the styling from the `Splash.module.css` file for the spinner.

Sandbox Execution Logs

trunk init 1/20 ✓

⡿ Downloading Trunk 1.15.0...
⡿ Downloading Trunk 1.15.0...
⢿ Downloading Trunk 1.15.0...
⣻ Downloading Trunk 1.15.0...
⣽ Downloading Trunk 1.15.0...
⣾ Downloading Trunk 1.15.0...
⣷ Downloading Trunk 1.15.0...
✔ Downloading Trunk 1.15.0... done
⡿ Verifying Trunk sha256...
✔ Verifying Trunk sha256... done
⡿ Unpacking Trunk...
✔ Unpacking Trunk... done























































✔ 13 linters were enabled (.trunk/trunk.yaml)
  actionlint 1.6.25 (1 github-workflow file)
  checkov 2.4.9 (4 json, 2 yaml files)
  eslint 8.49.0 (25 javascript files)
  git-diff-check (57 files)
  markdownlint 0.36.0 (1 markdown file) (created .markdownlint.yaml)
  osv-scanner 1.4.0 (1 lockfile file)
  oxipng 8.0.0 (3 png files)
  prettier 3.0.3 (13 css, 1 html, 25 javascript, 3 json, 1 markdown, 2 yaml files)
  stylelint 15.10.3 (13 css files)
  svgo 3.0.2 (2 svg files) (created svgo.config.js)
  trivy 0.45.0 (1 lockfile, 2 yaml files)
  trufflehog 3.56.0 (58 files)
  yamllint 1.32.0 (2 yaml files) (created .yamllint.yaml)
Next Steps
 1. Read documentation
    Our documentation can be found at https://docs.trunk.io
 2. Get help and give feedback
    Join the Trunk community at https://slack.trunk.io

trunk fmt src/pages/Home.jsx 2/20 ✓

 ✔ Formatted src/pages/Home.jsx
Re-checking autofixed files...






Checked 1 file
✔ No issues

trunk check --fix src/pages/Home.jsx 3/20 ❌ (`1`)

  FAILURES  
 eslint  src/pages/Home.jsx  .trunk/out/GsiMR.yaml
 eslint  src/pages/Home.jsx  .trunk/out/5vBJV.yaml
  NOTICES  
 [suggestion] Eslint could not resolve dependencies; try running `npm install`      
 Some tools failed to run. You can open the details yaml files for more information.
Checked 1 file
✖ No issues, 2 failures

trunk fmt src/pages/Home.jsx 4/20 ✓

 ✔ Formatted src/pages/Home.jsx
Re-checking autofixed files...



Checked 1 file
✔ No issues

trunk check --fix src/pages/Home.jsx 5/20 ❌ (`1`)

  FAILURES  
 eslint  src/pages/Home.jsx  .trunk/out/zvKpe.yaml
 eslint  src/pages/Home.jsx  .trunk/out/2zAbc.yaml
  NOTICES  
 [suggestion] Eslint could not resolve dependencies; try running `npm install`      
 Some tools failed to run. You can open the details yaml files for more information.
Checked 1 file
✖ No issues, 2 failures

trunk fmt src/pages/Home.jsx 6/20 ✓

 ✔ Formatted src/pages/Home.jsx
Re-checking autofixed files...



Checked 1 file
✔ No issues

trunk check --fix src/pages/Home.jsx 7/20 ❌ (`1`)

  FAILURES  
 eslint  src/pages/Home.jsx  .trunk/out/PJghV.yaml
 eslint  src/pages/Home.jsx  .trunk/out/G5rCt.yaml
  NOTICES  
 [suggestion] Eslint could not resolve dependencies; try running `npm install`      
 Some tools failed to run. You can open the details yaml files for more information.
Checked 1 file
✖ No issues, 2 failures

trunk fmt src/pages/Home.jsx 8/20 ✓

 ✔ Formatted src/pages/Home.jsx
Re-checking autofixed files...



Checked 1 file
✔ No issues

trunk check --fix src/pages/Home.jsx 9/20 ❌ (`1`)

  FAILURES  
 eslint  src/pages/Home.jsx  .trunk/out/qU2v5.yaml
 eslint  src/pages/Home.jsx  .trunk/out/DIznc.yaml
  NOTICES  
 [suggestion] Eslint could not resolve dependencies; try running `npm install`      
 Some tools failed to run. You can open the details yaml files for more information.
Checked 1 file
✖ No issues, 2 failures

trunk fmt src/pages/Home.jsx 10/20 ❌ (`1`)

  FAILURES  
 prettier  src/pages/Home.jsx  .trunk/out/LOGWn.yaml
  NOTICES  
 A tool failed to run. You can open the details yaml file for more information.
Checked 0 files
✖ No issues, 1 failure

trunk fmt src/pages/Home.jsx 11/20 ❌ (`1`)

  FAILURES  
 prettier  src/pages/Home.jsx  .trunk/out/gpLm1.yaml
  NOTICES  
 A tool failed to run. You can open the details yaml file for more information.
Checked 0 files
✖ No issues, 1 failure

trunk fmt src/pages/Home.jsx 12/20 ❌ (`1`)

  FAILURES  
 prettier  src/pages/Home.jsx  .trunk/out/U4zLz.yaml
  NOTICES  
 A tool failed to run. You can open the details yaml file for more information.
Checked 0 files
✖ No issues, 1 failure

trunk fmt src/pages/Home.jsx 13/20 ❌ (`1`)

  FAILURES  
 prettier  src/pages/Home.jsx  .trunk/out/3Lmzu.yaml
  NOTICES  
 A tool failed to run. You can open the details yaml file for more information.
Checked 0 files
✖ No issues, 1 failure

trunk fmt src/pages/Home.jsx 14/20 ❌ (`1`)

  FAILURES  
 prettier  src/pages/Home.jsx  .trunk/out/bc3VF.yaml
  NOTICES  
 A tool failed to run. You can open the details yaml file for more information.
Checked 0 files
✖ No issues, 1 failure

trunk fmt src/pages/Home.jsx 15/20 ❌ (`1`)

  FAILURES  
 prettier  src/pages/Home.jsx  .trunk/out/Fk2Ns.yaml
  NOTICES  
 A tool failed to run. You can open the details yaml file for more information.
Checked 0 files
✖ No issues, 1 failure

trunk fmt src/pages/Home.jsx 16/20 ❌ (`1`)

  FAILURES  
 prettier  src/pages/Home.jsx  .trunk/out/71jBw.yaml
  NOTICES  
 A tool failed to run. You can open the details yaml file for more information.
Checked 0 files
✖ No issues, 1 failure

trunk fmt src/pages/Home.jsx 17/20 ❌ (`1`)

  FAILURES  
 prettier  src/pages/Home.jsx  .trunk/out/cnXHq.yaml
  NOTICES  
 A tool failed to run. You can open the details yaml file for more information.
Checked 0 files
✖ No issues, 1 failure

trunk fmt src/pages/Home.jsx 18/20 ❌ (`1`)

  FAILURES  
 prettier  src/pages/Home.jsx  .trunk/out/seMy3.yaml
  NOTICES  
 A tool failed to run. You can open the details yaml file for more information.
Checked 0 files
✖ No issues, 1 failure

trunk fmt src/pages/Home.jsx 19/20 ❌ (`1`)

  FAILURES  
 prettier  src/pages/Home.jsx  .trunk/out/d9O8C.yaml
  NOTICES  
 A tool failed to run. You can open the details yaml file for more information.
Checked 0 files
✖ No issues, 1 failure

trunk fmt src/pages/Home.jsx 20/20 ❌ (`1`)

  FAILURES  
 prettier  src/pages/Home.jsx  .trunk/out/ISD6a.yaml
  NOTICES  
 A tool failed to run. You can open the details yaml file for more information.
Checked 0 files
✖ No issues, 1 failure