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