👉 Click the image above to watch a short demo of this project on YouTube.
Journey is a personal project designed to help users document and relive their travel experiences in a rich, immersive way. The platform allows travellers to seamlessly store memories of their trips, combining textual narration, geographic information, and multimedia elements such as photos and videos.
With Journey, users can:
- Capture stories of their adventures with detailed narratives.
- Log geotagged locations to visually map their travel routes and destinations.
- Upload and organize images and videos, creating a digital scrapbook of their experiences.
Whether it's a weekend getaway or a year-long adventure, Journey enables users to keep all their cherished travel moments in one organized place, transforming trips into unforgettable stories.
This is an Angular 21 based Geo Spatial Single Page Application (SPA) deployed to GitHub Pages. It communicates exclusively with a separate REST API backend (BFF) — there is no server-side rendering.
Geographical data is processed in GeoJSON format and rendered on an interactive map powered by Leaflet with MapTiler tiles and geocoding.
| Layer | Technology |
|---|---|
| Framework | Angular 21 (standalone components, zoneless, Signals) |
| UI Components | Angular Material (M3 theme) |
| Styling | Tailwind CSS v4 |
| Maps | Leaflet + MapTiler SDK |
| Media | Cloudinary |
| Auth | JWT (Bearer token, stored in localStorage) |
| Testing | Karma / Jasmine |
| Deployment | GitHub Pages via angular-cli-ghpages |
Please find below steps to set up and run application in your workstation.
- Node.js (LTS recommended) and npm
- A running instance of the Journey API (BFF) — see its README for Docker setup
- A Cloudinary account (
cloud name+ upload preset) - A MapTiler API key
- Clone the repository:
git clone https://github.com/nramc/journeys.git cd journeys - Install dependencies:
npm install
- Configure your local environment in
src/environments/environment.development.ts:export const environment = { journeyApi: 'https://localhost:8080/rest', cloudName: '<your-cloudinary-cloud-name>', cloudinaryPreset: '<your-upload-preset>', maptilerKey: '<your-maptiler-key>', // ... };
- Start the dev server (HTTPS, uses
keystore/certs):npm run start
npm run start # Dev server at https://localhost
npm run build # Production build
npm run test # Karma/Jasmine unit tests (interactive)
npm run ci:test1 # Headless tests (ChromeHeadless)
npm run lint # ESLint
npm run ci:deploy # Deploy to GitHub PagesAny contributions you make are greatly appreciated.
If you like the project and have a suggestion that would make this better, please fork the repo and create a pull request. You can also simply open an issue with the tag "enhancement".
- Fork the Project
- Create your Feature Branch (
git checkout -b feature/AmazingFeature) - Commit your Changes using Conventional Commits (
git commit -m 'feat: Add the AmazingFeature') - Push to the Branch (
git push origin feature/AmazingFeature) - Open a Pull Request
Note for AI agents & contributors: See AGENTS.md for architecture details, coding conventions, and patterns specific to this codebase.
- Manually run Release Workflow
- The Workflow flow uses Conventional Changelog Action Plugin, which determines next version based on commit logs
- Based on the determined release type (MAJOR or MINOR or PATCH), bump version in package.json
- The Workflow creates Release as well with release notes and make the release as latest
- As soon as new
Releasecreated, which triggers gh-page deploy workflow - When build successful, Application available on https://nramc.github.io/journeys
Sincere Thanks to following open source community for their wonderful efforts to make our life much easier.
- Open Street Map - Open Source Map Provider
- Leaflet - Map based JavaScript Library
- MapTiler - Map tiles and geocoding
- GitHub Pages - Hosting static resources
- Angular - TypeScript based Single Page Application(SPA) Web Framework
- Angular Material - Open Source UI Component library for Angular
- Angular Gallery - Open Source Media Gallery library for Angular
- Cloudinary - Image and video management
Give a ⭐️ if you like this project!