Building a Map Marker PWA with Amplify Gen 2 (Auth, Geo and CI/CD)

#devchallenge #awschallenge #amplify #fullstack

This is a submission for the The AWS Amplify Fullstack TypeScript Challenge

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)

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.

# 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.

# 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

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.

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.


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.