The goal is to Create a project using Rest Countries to let users search and select a country and see details about it.
VSCode + Volar (and disable Vetur).
npm installnpm run devnpm run buildLint with ESLint
npm run lintHere are some notes to share about the mindset behind alot of the decisions made on this project:
-
Since the descriptions are intentionally open, and the Rest Countries API returns unpaginated responses, I decided to imagine if they were paginated, use them like they were and optimize my code around that while displaying my abilty to handle the challenge in the process.
-
There are more than one way to select a country, and having only a search would've limited the visual aspect of the site, so I decided to add a World Map and and let users select any country off of the map and coordinate with a Rest Countries API to see the results. I've also decided to hightlight the countries that appear in user searches for a better visual display of data and UX.
-
I wanted to add a few more common functionalities to the website, so I thought what would Majority might use in their project to suit their customer base's needs. So Internationalization and Dark mode came to mind. I've added Both English and Swedish locales for examples and created a theme to control the colors of the pages.
-
Initially I started the project based on Vue 3 and Nuxt 3, but since there was a conflict between the new patches of Nuxt and @nuxtjs/i18n, I decided to use Vue 3, Vite, and Vue-i18n and a few other packages that Nuxt also uses.
-
I used tailwindcss, for CSS, Theme Configurations and Dark mode.
-
HeadlessUI was used alongside tailwindcss for some of the components used in the project.
-
The Website is coded to be Responsive and I tried to test out all the bugs I could find, hopefully it's alright.
-
Code Specific explanations are provided in comments in their respective lines.
-
The entire project was done in a span of roughly 30 hours.