Building a Map Marker PWA with Amplify Gen 2 (Auth, Geo and CI/CD)
Tags: devchallenge, awschallenge, amplify, fullstack
Published: 2024-05-27 06:09:46

*This is a submission for the [The AWS Amplify Fullstack TypeScript Challenge ](https://dev.to/challenges/aws)*

## What I Built
I created a Progressive Web App (PWA) called "Map Marker" that allows users to interactively pinpoint and save locations on a map. Users can create accounts to save their markers, add custom descriptions and photos, and search for specific locations. The app is built with a focus on offline accessibility, leveraging PWA features to ensure a seamless experience even without an internet connection.

## Demo
You can experience the live version of Map Marker on Amplify Hosting:
[Map Marker (DEMO)](https://main.d1uv5gxgypvnin.amplifyapp.com)
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/hthj5s8az1y0fm03jylr.png)


## Journey
The development journey was an exhilarating adventure, as I ventured into the world of fullstack TypeScript with Amplify Gen 2. The code-first approach allowed me to define my backend infrastructure using TypeScript, which felt natural as a frontend developer.

```bash
# Create Vite/PWA project from template.
npm create @vite-pwa/pwa@latest  amplify-vite-map-marker \
  --template react-ts
```

The built-in CI/CD pipeline in Amplify Hosting streamlined deployment, automatically rebuilding and publishing my app with each push to my Github repository.

```bash
# Setup Dep. and Installation
npm create amplify@latest
npm install

# Configure AWS for local development
aws sso login

# Run Sandbox
npx ampx sandbox --profile amplify-admin 
```

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/x50ntynoj05dk8i47z3z.png)

Amplify Geo truly stole the show, providing pre-built UI components (MapView, SearchField) and convenient APIs for handling map interactions, geocoding, and place search. It dramatically simplified the integration of map functionality into my PWA.

```bash
npm add aws-amplify @aws-amplify/geo
npm add @aws-amplify/ui-react-geo
```

Additionally, I encountered a conflict with the Marker component from @aws-amplify/ui-react-geo, preventing me from customizing its behavior as needed.

```typescript

import { MapView } from '@aws-amplify/ui-react-geo';
import '@aws-amplify/ui-react-geo/styles.css';

function App() {
  ...

  return (
    <>
      ...

      <MapView 
        initialViewState={{
          latitude: 37.8,
          longitude: -122.4,
          zoom: 14,
        }}>
      </MapView>
    </>
  );

}
```

**Connected Components and/or Feature Full**

- Vite: For a smooth development experience.
- React: For building a dynamic UI.
- TypeScript: For robust code and type safety.
- AWS Amplify Gen2:
   - Auth: For user authentication.
   - Geo: For map display and search.
   - Hosting: For seamless deployment.

## Next Steps

As Amplify Gen 2 continues to mature, I'm eager to revisit this project and fully implement the intended features. I plan to:

- **Enhance DataStore Integration**: Leverage DataStore's full potential for real-time data synchronization and offline support once it's more stable.
- **Customize Markers**: Explore solutions to overcome the UI component conflict and create more interactive and personalized markers.
- **Add More Features**: Implement features like geofencing, enhanced user profiles, and social sharing.

## Conclusion

Even though I faced some roadblocks, building this PWA map marker app with Amplify Gen 2 was a rewarding experience. It's clear that Amplify Gen 2 has immense potential to simplify fullstack development, and I'm excited to continue exploring its capabilities as it evolves.