This is a solution to the REST Countries API with color theme switcher challenge on Frontend Mentor. Frontend Mentor challenges help you improve your coding skills by building realistic projects.
Users should be able to:
- See all countries from the API on the homepage
- Search for a country using an
inputfield - 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 (optional)
- Live Site URL: country-web-app
- Next.js - React framework
- Tailwind - For styles
- PnPm - disk space efficient package manager
- Cypress - easily create tests for your modern web applications
- Github Actions - GitHub Actions makes it easy to automate all your software workflows
- How to implement tests on the front-end using Cypress
- Cypress end to end testing basics
- Cypress testing syntax
describe("My First Test", () => {
beforeEach(() => { cy.visit("http://localhost:3000/"); });
it("put's the lotion on it's skin or it gets the hose again", ()
=> { cy.put("the lotion on it's skin"); });
})
- How to check and convert a non ASCII character to an ASCII character
const normalizeString = (str) => {
return /[^\u0000-\u007F]+/.test(str)
? str
.normalize("NFD")
.replace(/[\u0300-\u036f]/g, "")
.toLowerCase()
: str.toLowerCase();
};
- How to setup a Github Actions yml file
name: Next.js CI/CD
on:
pull_request:
branches: [main]
jobs:
build-and-test:
runs-on: ubuntu-latest
steps:
- name: Checkout repository
uses: actions/[email protected]
- name: Set up Node.js
uses: actions/[email protected]
with:
node-version: "20.9.0"
- name: Install pnpm
run: npm install -g pnpm
What I want to continue learning:
- Adding different tests to my project
- more about CI/CD tools
- cypress.io/guides/end-to-end-testing/writing-your-first-end-to-end-test - Helped me get started with end to end testing in cypress