Full-Stack Web App

Built with: Angular, Node.js, MongoDB

View Code

Overview

This project was built to practice creating a complete web application, moving from a static site to a full-stack app with a database and API. I started with a provided travel site template and then expanded it by connecting the pages to a database and adding an API layer.

The site showcases trip packages that were hypothetical—created only for this project—but they served as a practical way to work with listings, details, and updates while learning how to manage data across the full stack.

Development Journey

The project started with a few static pages. From there, I added features one at a time until it worked like a real app:

Static beginnings: Simple pages and styles.
Server pages: Switched to Express routes and Handlebars templates to reuse layouts.
Database: Moved trip data into MongoDB so content wasn't hard-coded.
API layer: Built REST endpoints to list, get, create, update, and delete trips.
Admin dashboard: Added a small Angular app that talks to the API for easy CRUD from the browser.

Building in stages kept things clear and made testing easier at each step.

Architecture


[ Browser ]
   ├─ Public site (Express + Handlebars)
   └─ Admin (Angular SPA) ──────► [ REST API (Express) ] ──────► [ MongoDB ]

Clear separation: the public site renders pages, the admin uses Angular, the API serves both, and MongoDB stores the trip data.

Folders at a glance


travlr/
├─ app_server/   # Views/controllers (public site)
├─ app_api/      # API routes + models (trips)
├─ views/        # Handlebars templates
├─ public/       # Images, CSS
└─ app.js        # App entry point

API Summary

Method	Path	Purpose
GET	`/api/trips`	List all trips
GET	`/api/trips/:id`	Get one trip
POST	`/api/trips`	Create a trip
PUT	`/api/trips/:id`	Update a trip
DELETE	`/api/trips/:id`	Delete a trip

Tested in the browser and with Postman during development.

Screenshots

🌐 Public site showing trips (Express + Handlebars)
🗄️ Trips collection in MongoDB Compass
🔗 API response from /api/trips
📋 Angular admin dashboard — list of trips
✏️ Editing a trip in the admin panel
➕ Adding a new trip in the admin panel