countries-mapbox

Introduction

I this project, I had the opportunity to work with a variety of technologies, including Vue.js, Mapbox, Tailwind CSS, TypeScript, Pinia, and Vite. While my primary expertise lies in React, this project marked my second venture into the world of Vue.js, and it has been an insightful journey of learning and growth.

What I Learned

• Vue.js: This project allowed me to deepen my knowledge of Vue.js, including both Vue 2 and Vue 3, and how to smoothly migrate between them. I gained a better understanding of the benefits and improvements in Vue 3.

• Mapbox: Working with Mapbox was an impressive experience. I learned how to integrate Mapbox into my Vue application, create interactive maps, and display geographic data in a visually appealing way.

• Tailwind CSS: Tailwind CSS is a powerful utility-first CSS framework, and I used it to style my project. It helped me streamline the styling process and create a clean and responsive user interface.

• TypeScript: Integrating TypeScript into my Vue project enhanced the development process by providing static type checking, improved code readability, and better tooling support.

• Pinia: I also integrated Pinia, a state management library for Vue, which simplified state management in my application and made it more maintainable.

• Vite: Vite is a build tool for web development, and I used it as my project's build system. It offered fast development server and optimized build performance.

Getting Started

To run this project locally, follow these steps:

1. Clone this repository to your local machine.

git clone https://github.com/yourusername/yourrepository.git
cd yourrepository

Install dependencies

npm install

Compile and Hot-Reload for Development

npm run dev

Compile and Minify for Production

npm run build

Lint with ESLint

npm run lint