arlagonix / countries-list

REST Countries API with color theme switcher. Solution to a FrontendMentor challenge

Where is the world

Made with HTML, CSS, TypeScript, ReactJS, styled-components
Bootstrapped with Vite

🖼 Screenshots • ℹ️ About • ⚙️ Tools • 🔨 How to Build Project • 📁 File Structure

📦 NPM Packages worth mentioning • 💡 Details • 🔗 Useful resources • 👤 Author

🖼 Screenshots

ℹ️ About

This is a solution to the challenge "REST Countries" from Frontend Mentor (link).

The challenge is to integrate with the REST Countries API to pull country data and display it like in the designs.

I made my own Figma prototype and redesigned the whole application.

Figma prototype: https://www.figma.com/file/9TUVcloltVpCdi5LHVCiVT/Countries

⚙️ Tools

• HTML5
  • ReactJS
• CSS
  • styled-components
• TypeScript
  • ReactJS
  • React Query
  • React Router
  • Vitest
  • Cypress
• NodeJS
• Vite
• Github Pages
• Github Actions for CI/CD

🔨 Build project

Command	Description
npm install	First of all install all required packages
npm run dev	Starts a local web server with HMR (Hot Module Replacement) for development
npm run build	Builds the project, and outputs to the ./build folder
npm run preview	Start a local web server that serves the built solution from ./build for previewing
npm run test:e2e	Open application that allows to run 2e2 tests
npm run test:unit	Runs unit tests
npm run lint	Check that code conforms to Eslint

📁 File Structure

├── 📁 .github
|   ├── 📁 workflows
|   |   └── 📝 main.yaml      CI/CD instructions for Github Actions
│   └── 📝 dependabot.yml     Instructions for Dependabot
|
├── 📁 cypress                End-to-end tests
│
├── 📁 docs                   Additional information, documentation 
│   └── 📁 results            Screenshots of how the application works after being fully developed
|
├── 📁 src                            Source files needed for application development
│   ├── 📁 assets                     Static assets: images, icons, favicons
│   ├── 📁 components                 React components
|   |   └── 📁 Component Name
|   |       ├── 📝 index.tsx          Component logic
|   |       ├── 📝 index.styled.tsx   Component styles
|   |       └── 📝 index.types.tsx    Component types (optional)
│   ├── 📁 global                     Global styles
│   ├── 📁 hooks                      Custom React hooks
│   ├── 📁 pages                      React page components
|   |   └── 📁 Page Name
|   |       ├── 📝 index.tsx          Page logic
|   |       ├── 📝 index.styled.tsx   Page styles
|   |       └── 📝 index.types.tsx    Page types (optional)
│   ├── 📁 utils                      Utility functions
│   ├── 📝 App.tsx                    App React component
│   ├── 📝 index.html                 Main html file
│   ├── 📝 index.tsx                  Entry point for the module bundler
│   ├── 📝 styled.d.ts                Types for Styled Components theme
│   ├── 📝 styles.css                 Styles for the loader displayed until JS is loaded
│   └── 📝 vite-end.d.ts              Some Typescript stuff for Vite
|
├── 📝 .eslintrc.json         ESLint configuration file
├── 📝 .gitignore             Instructions for Git about what files to ignore
├── 📝 LICENSE                MIT License. Basically you can do whatever you want with the code
├── 📝 README.md              Project description
├── 📝 cypress.config.cjs     Cypress configuration file
├── 📝 package-lock.json      Keeps track of the exact version of every package that is installed
├── 📝 package.json           Various metadata relevant to the project, scripts, dependencies
├── 📝 tsconfig.json          TypeScript configuration file
├── 📝 tsconfig.node.json     TypeScript configuration file for Vite
└── 📝 vite.config.js         Vite configuration file

📦 NPM Packages worth mentioning

styled-components	For CSS-in-JS
react-loading-skeleton	Used it to show skeletons while fetching new data
react-outside-click-handler	Used it to close options list in select component when clicking outside
react-router-dom	Routing between pages
react-transition-group	Animates showing and hiding of options list
antd	Used 1 component from it : Image, that helps to open image in a full-screen mode
@tanstack/react-query, @tanstack/react-query-devtools	API requests
cypress	End-to-end testing
vitest	Unit testing

💡 Details

Another project that seemed to be very simple, but took 2-3 weeks to complete

Features

• Light / Dark mode
• Skeletons during load
• Page for the list of countries, page for a country
• Custom select, input fields
• Used a component from Ant Design (but it looks like it made the bundle realy, really big)
• Unit & e2e testing
• CI/CD with Github Actions. Automatically lint, unit test, e2e test, build and deploy to Github Pages

🔗 Useful resources

• Web Dev Simplified Hooks Course - Great course with a lot of custom hooks
• How to Make a Custom Select Component
• StackOverflow : Guide on a spinner
• How to Make a Custom Spinner
• How to deploy a react app on GH Pages - to put shortly, just use HashRouter in the application
• How to Make a Custom Scrollbar
• Github Actions - Введение в CI/CD - Introduction to CI/CD with Github Actions, in Russian. Helped me to get understand the basics

👤 Author

• Frontend Mentor - @GrbnvAlex
• Telegram - @Arlagonix
• Github - @arlagonix

countries-list's Issues

Add dark theme

Create a custom select

• Change color on focus
• Placeholder moves up on focus, moves down on blur
• Placeholder stays up when there is value in it
• Display list of elements
• Hover animation of elements
• List hide when click outside

Use font Nunito Sans

Create a custom input

• Change color on focus
• Correct height
• Correct icon
• Placeholder moves up on focus, move down on blur

Miscellaneous

• Add icon in html
• Add spinner on initial load

Display when nothing's found

Make navigation menu

• Stick to top
• Hide shadow when nav is on top
• Show shadow when nav is not on top
• Header is link that leads to list, change color on hover
• Responsive
• Reuse it via router

Make a card component for the list

Write documentation in README