DEV Community

Warun C. ⚡
Warun C. ⚡

Posted on

2

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

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)
Image description

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
Enter fullscreen mode Exit fullscreen mode

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 
Enter fullscreen mode Exit fullscreen mode

Image description

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
Enter fullscreen mode Exit fullscreen mode

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>
    </>
  );

}
Enter fullscreen mode Exit fullscreen mode

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.

Postmark Image

Speedy emails, satisfied customers

Are delayed transactional emails costing you user satisfaction? Postmark delivers your emails almost instantly, keeping your customers happy and connected.

Sign up

Top comments (1)

Collapse
 
farmer_sneed_b58f87019ef1 profile image
Farmer Sneed

Cool product and idea

Sentry image

See why 4M developers consider Sentry, “not bad.”

Fixing code doesn’t have to be the worst part of your day. Learn how Sentry can help.

Learn more