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
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
- HTML5
- ReactJS
- CSS
- styled-components
- TypeScript
- ReactJS
- React Query
- React Router
- Vitest
- Cypress
- NodeJS
- Vite
- Github Pages
- Github Actions for CI/CD
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 |
βββ π .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
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 |
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
- 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
- Frontend Mentor - @GrbnvAlex
- Telegram - @Arlagonix
- Github - @arlagonix