This project is a personal map application that showcases significant locations in my life, categorized into different types such as home, work, and travel destinations. It's built with React and Mapbox GL, providing an interactive and visually appealing way to explore these places.

• Interactive Map: Uses Mapbox GL to display a world map.
• Categorized Places: Locations are categorized as:
  • 🏠 Home: Places I've lived.
  • 💼 Work: Places I've worked.
  • 🎉 Travel: Places I've visited for leisure.
  • ⭐ Future: Places I plan to visit.
• Pop-up Information: Clicking on a location marker displays a pop-up with more details about the place.
• Dynamic Sizing: The map automatically adjusts to fit all the markers when the page loads.
• Toggleable Layers: The "Future" locations can be toggled on and off.

• Frontend: React, TypeScript, Vite
• Map: Mapbox GL, react-map-gl
• Backend: Express.js (for serving the static build)
• Deployment: Configured for Heroku

• Node.js (v23.x recommended)
• npm

1. Clone the repository:

   git clone https://github.com/ericbrian/my-places.git
   cd my-places

2. Install dependencies:

   npm install

1. Development Mode: To run the application in development mode with hot-reloading:

   npm run dev

2. Production Mode: To build the application and run the production server:

   # Build the React application
   npm run build
   
   # Start the Express server
   npm start

   The application will be available at http://localhost:3000.

This application is configured for deployment on Heroku. The Procfile specifies the command to start the web server.