Web app / 2023
Loc8r
A map-first location guide with an illustrated neighborhood, place details and native motion.
The project
Loc8r is a location-directory learning project with sample listings, detail pages, and a sample review form.
This is a learning implementation of the Loc8r example from Getting MEAN, which is credited in the application’s footer. The current listings use sample content.
The implementation
The original Express application renders Pug templates. Because its current pages use fixed sample content, the deployment now renders those templates during the build and serves static HTML. The redesigned presentation uses native CSS, SVG and JavaScript. A compact place index and illustrated map replace the old repeated listings. An animated route and radar marker add movement, with a pause control and reduced-motion support.
Working with AI
I worked with AI to turn the original sample directory into a cartographic field guide, refine its mobile layout and check the generated routes. The redesign keeps the original learning-project attribution and clearly distinguishes fictional content from a live location service.
Scope
The repository demonstrates page routing and template-based views. Reviews are fixed examples; the review form is clearly labeled and does not submit or save information. The location page links to OpenStreetMap without an API key.
Deployment
GitHub Actions builds and publishes the four sample pages to GitHub Pages when main changes. The deployed site needs no running Node.js server, database, or Azure subscription.
FROM THE LIVE DEMO
A closer look.
Open a screenshot to see it at full size.
