Travlr Getaways
A SNHU project courtesy of CS 465: Full Stack Development By: Prof. Wesley Dupeire
Project Overview - Client Website (Template)
Travlr Getaways is a sample travel-agency site used in SNHU CS-465. The screen shown is the customer-facing website that came as a prebuilt HTML/CSS template for the project. It's a simple, brochure-style site focused on look-and-feel rather than custom logic.
What this site includes:
- Top navigation: Home, Travel, Rooms, Meals, News, About, Contact
- Hero image and marketing copy to showcase destinations
- Static pages served by Express; no login or database actions here
- Destination cards with images and brief descriptions
- Footer with contact info and social media links
This public site was provided to set the brand and layout. My custom work lives on the admin SPA (Angular + Express + MongoDB) where trips are created/edited, authentication is handled, and data flows through the API.
Below is a link to the Full Stack Guide (SNHU CS-465) I followed to complete this project end-to-end.
And the Wireframe used to design the admin site as well as the Software Design Documentation.
Admin Site - Overview (Angular SPA) (Custom)
This is the staff-only admin application I built to manage Travlr Getaways data. Unlike the public template, this app is a custom Angular single-page application that talks to a Node/Express REST API and MongoDB to create, read, update, and delete (CRUD) travel content.
Purpose
- Maintain the live trip catalog (title, code, price, nights, image, description, etc.).
- Securely gate write access behind authentication.
- Provide fast, form-based workflows so non-technical staff can keep the site current.
Tech Stack
- Frontend: Angular (SPA), Angular Router, Reactive Forms, HTTPClient, Interceptor, Guard.
- Backend: Node.js + Express (REST), JSON Web Tokens (JWT), Mongoose ODM.
- Database: MongoDB / MongoDB Atlas.
- Tooling: Postman (API tests), npm scripts, environment files for dev/prod.
Architecture & Data Flow
- User logs in → server verifies credentials and returns JWT.
- Angular HTTP Interceptor attaches the token to API requests (Authorization: Bearer ...).
- TripData service calls REST endpoints (GET/POST/PUT/DELETE /api/trips).
- Server validates/authorizes, updates MongoDB, returns JSON.
- UI updates state and shows success/error messages.
Security Measures
- JWT auth on write endpoints.
- CORS restricted to allowed origins (portfolio/admin domain).
- Input validation both client- and server-side.
- Password hashing on the server.
- Environment-based secrets (JWT_SECRET, DB URI) kept out of source control.
Core Features
- Authentication: Email/password login; issues a JWT stored client-side for the session.
- Protected routes: Angular Route Guards prevent access without a valid token.
-
Trip management (CRUD):
- List & search trips
- Add new trip
- Edit existing trip (prefilled form)
- Delete trip (confirm prompt)
- Reactive Forms: Field validation (required, min/max, patterns); inline error messages.
- API integration: All data changes persist to MongoDB through the Express API.
- Feedback & errors: Success/failure messages on all actions; graceful API error handling.
- Mobile-friendly UI: Responsive layout and accessible form controls.
Typical Admin Workflows
- Add a Trip: Login → Trips → Add → complete form → Save.
- Edit a Trip: From list → Edit → adjust fields → Save.
- Delete a Trip: From list → Delete → confirm → item removed.
- Preview: Refresh the public site to see updated content.
Key API Endpoints (example)
- POST /api/login - authenticate and receive JWT
- GET /api/trips - list trips
- GET /api/trips/:code - single trip
- POST /api/trips - create (auth required)
- PUT /api/trips/:code - update (auth required)
- DELETE /api/trips/:code - remove (auth required)
Deployment Notes
This admin SPA is the authoring tool for the site: it's where all real work happens-secure login, form validation, and CRUD-while the public template simply displays the content to end users. The admin app is an Angular single-page site hosted as static files. The API runs on a small Node/Express server and the data lives in MongoDB Atlas. The app reads the API's URL from an environment file, and private keys (token secret and database URI) are stored as server settings, not in code. The host sends unknown paths to index.html so refresh and deep links work. Everything uses HTTPS, and the API only accepts calls from my domains.
Images of Admin Site (Clickable)
For more information and details, Please visit the Source page to view the README.md
NOTE:This project was broken down into modules and each module has its own branch, The final project is stored in Module 7. Please feel free to compare the progression i made during the project by viewing ealier branches.