initial files

.gitignore

@@ -34,3 +34,19 @@ yarn-error.log*
 # typescript
 *.tsbuildinfo
 next-env.d.ts
+
+# Avoid accidental Sketch file upload 
+###############################################
+## Please do not remove line 5 - thanks! 🙂 ##
+###############################################
+*.sketch
+
+# Avoid accidental XD or Figma upload if you convert the design file
+#######################################################
+## Please do not remove lines 11 and 12 - thanks! 🙂 ##
+#######################################################
+*.xd
+*.fig
+
+# Avoid your project being littered with annoying .DS_Store files!
+.DS_Store

README.md

@@ -1,36 +1,133 @@
-This is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app).
+# Frontend Mentor - REST Countries API with color theme switcher solution
 
-## Getting Started
+This is a solution to the
+[REST Countries API with color theme switcher challenge on Frontend Mentor](https://www.frontendmentor.io/challenges/rest-countries-api-with-color-theme-switcher-5cacc469fec04111f7b848ca).
+Frontend Mentor challenges help you improve your coding skills by building realistic projects.
 
-First, run the development server:
+## Table of contents
 
-```bash
-npm run dev
-# or
-yarn dev
-# or
-pnpm dev
-# or
-bun dev
+-   [Overview](#overview)
+    -   [The challenge](#the-challenge)
+    -   [Screenshot](#screenshot)
+    -   [Links](#links)
+-   [My process](#my-process)
+    -   [Built with](#built-with)
+    -   [What I learned](#what-i-learned)
+    -   [Continued development](#continued-development)
+    -   [Useful resources](#useful-resources)
+-   [Author](#author)
+-   [Acknowledgments](#acknowledgments)
+
+**Note: Delete this note and update the table of contents based on what sections you keep.**
+
+## Overview
+
+### The challenge
+
+Users should be able to:
+
+-   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 _(optional)_
+
+### Screenshot
+
+![](./screenshot.jpg)
+
+Add a screenshot of your solution. The easiest way to do this is to use Firefox to view your project, right-click the
+page and select "Take a Screenshot". You can choose either a full-height screenshot or a cropped one based on how long
+the page is. If it's very long, it might be best to crop it.
+
+Alternatively, you can use a tool like [FireShot](https://getfireshot.com/) to take the screenshot. FireShot has a free
+option, so you don't need to purchase it.
+
+Then crop/optimize/edit your image however you like, add it to your project, and update the file path in the image
+above.
+
+**Note: Delete this note and the paragraphs above when you add your screenshot. If you prefer not to add a screenshot,
+feel free to remove this entire section.**
+
+### Links
+
+-   Solution URL: [Add solution URL here](https://your-solution-url.com)
+-   Live Site URL: [Add live site URL here](https://your-live-site-url.com)
+
+## My process
+
+### Built with
+
+-   Semantic HTML5 markup
+-   CSS custom properties
+-   Flexbox
+-   CSS Grid
+-   Mobile-first workflow
+-   [React](https://reactjs.org/) - JS library
+-   [Next.js](https://nextjs.org/) - React framework
+-   [Styled Components](https://styled-components.com/) - For styles
+
+**Note: These are just examples. Delete this note and replace the list above with your own choices**
+
+### What I learned
+
+Use this section to recap over some of your major learnings while working through this project. Writing these out and
+providing code samples of areas you want to highlight is a great way to reinforce your own knowledge.
+
+To see how you can add code snippets, see below:
+
+```html
+<h1>Some HTML code I'm proud of</h1>
+```
+
+```css
+.proud-of-this-css {
+    color: papayawhip;
+}
+```
+
+```js
+const proudOfThisFunc = () => {
+    console.log("🎉");
+};
 ```
 
-Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
+If you want more help with writing markdown, we'd recommend checking out
+[The Markdown Guide](https://www.markdownguide.org/) to learn more.
+
+**Note: Delete this note and the content within this section and replace with your own learnings.**
+
+### Continued development
+
+Use this section to outline areas that you want to continue focusing on in future projects. These could be concepts
+you're still not completely comfortable with or techniques you found useful that you want to refine and perfect.
+
+**Note: Delete this note and the content within this section and replace with your own plans for continued
+development.**
 
-You can start editing the page by modifying `app/page.js`. The page auto-updates as you edit the file.
+### Useful resources
 
-This project uses [`next/font`](https://nextjs.org/docs/basic-features/font-optimization) to automatically optimize and load Inter, a custom Google Font.
+-   [Example resource 1](https://www.example.com) - This helped me for XYZ reason. I really liked this pattern and will
+    use it going forward.
+-   [Example resource 2](https://www.example.com) - This is an amazing article which helped me finally understand XYZ.
+    I'd recommend it to anyone still learning this concept.
 
-## Learn More
+**Note: Delete this note and replace the list above with resources that helped you during the challenge. These could
+come in handy for anyone viewing your solution or for yourself when you look back on this project in the future.**
 
-To learn more about Next.js, take a look at the following resources:
+## Author
 
-- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
-- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
+-   Website - [Add your name here](https://www.your-site.com)
+-   Frontend Mentor - [@yourusername](https://www.frontendmentor.io/profile/yourusername)
+-   Twitter - [@yourusername](https://www.twitter.com/yourusername)
 
-You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js/) - your feedback and contributions are welcome!
+**Note: Delete this note and add/remove/edit lines above based on what links you'd like to share.**
 
-## Deploy on Vercel
+## Acknowledgments
 
-The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.
+This is where you can give a hat tip to anyone who helped you out on this project. Perhaps you worked in a team or got
+some inspiration from someone else's solution. This is the perfect place to give them some credit.
 
-Check out our [Next.js deployment documentation](https://nextjs.org/docs/deployment) for more details.
+**Note: Delete this note and edit this section's content as necessary. If you completed this challenge by yourself, feel
+free to delete this section entirely.**

app/components/country_card/index.js

@@ -0,0 +1,3 @@
+export default function CountryCard({ name }) {
+    return <main className="">{name}</main>;
+}

app/components/navbar/index.js

@@ -0,0 +1,3 @@
+export default function Navbar() {
+    return <main className="">{}</main>;
+}