# CS 465 Full Stack Development - Travlr Getaways

## Architecture

This project used three distinct frontend approaches across its development. The customer-facing site started as static HTML pages, which were then refactored into Handlebars (HBS) templates running on Express. With this server-rendered approach, every page request goes to the server, the controller queries MongoDB through Mongoose, and a complete HTML page is built and sent back to the browser. This works well for public content that benefits from fast initial loads and search engine visibility, but every user interaction that needs fresh data triggers a full page reload.

The admin side was built as an Angular single-page application (SPA). Unlike the Express site, the SPA loads once and then handles all navigation and rendering in the browser. Angular components manage their own state, services handle HTTP calls to the API, and the router swaps views without contacting the server for a new page. The result is a more responsive, app-like experience suited to administrators who perform repeated create, read, update, and delete operations throughout a session. JavaScript ties all of this together since it runs on both the client (Angular) and the server (Node.js/Express), which is the core advantage of the MEAN stack.

The backend uses a NoSQL MongoDB database because the trip data fits naturally into a document model. Each trip is a self-contained JSON-like document with all its fields in one place, which eliminates the joins that a relational database would require. MongoDB also pairs well with Node.js and Mongoose since data flows as JavaScript objects from the database through the API and into the frontend without needing translation between formats.

## Functionality

JSON (JavaScript Object Notation) is a lightweight data format, while JavaScript is a full programming language. JSON uses JavaScript's object syntax (key-value pairs, arrays) but is purely data with no functions, logic, or execution capability. In this project, JSON is the common language that connects every layer: trip data is stored as BSON documents in MongoDB, served as JSON through the Express REST API, and consumed as JSON by both the Handlebars templates and the Angular SPA. This consistency means no format conversion is needed at any tier boundary.

Refactoring was a recurring theme throughout the course. The customer-facing site was refactored from static HTML files into Handlebars templates backed by a controller layer, which separated data from presentation and made the pages dynamic. The trip data was refactored from a local JSON file into a MongoDB collection accessed through Mongoose, centralizing the data so both front ends could share it. On the Angular side, trip-card was built as a reusable UI component: it accepts a trip object as input and renders the same card layout wherever it appears in the listing. This means changes to the card design happen in one place and propagate everywhere the component is used, reducing duplication and the risk of inconsistencies.

## Testing

API testing in a full stack application involves verifying that each HTTP method (GET, POST, PUT, DELETE) behaves correctly at its endpoint. GET requests to /api/trips should return the full collection, while GET to /api/trips/:tripCode should return a single matching document. POST to /api/trips should create a new record, and PUT should update an existing one. Each of these was tested using Postman to confirm the correct status codes and response bodies.

Adding security introduced an additional layer of complexity to testing. The /api/register and /api/login endpoints were tested first to verify that they return valid JWTs. Then the protected endpoints (POST and PUT on /api/trips) were tested both with and without a Bearer token in the Authorization header. Without a token, the server returns a 401 Unauthorized status, confirming that the authenticateJWT middleware blocks unauthenticated access. With a valid token, the request succeeds. This layered approach, testing the authentication endpoints first and then using the returned tokens to test the protected endpoints, ensures that the security chain works end to end.

## Reflection

This course gave me hands-on experience building a complete web application from the ground up, which is directly aligned with my goal of becoming a full stack developer. I gained practical skills with every layer of the MEAN stack: setting up an Express server with MVC routing, designing Mongoose schemas for MongoDB, building a RESTful API with full CRUD operations, creating an Angular SPA with components, services, and reactive state management, and implementing JWT authentication with Passport. Beyond the individual technologies, the most valuable takeaway was understanding how all the pieces connect, seeing how a single API serves multiple frontends, how middleware secures endpoints, and how data flows from the database through the server and into the browser. These are the kinds of integration skills that employers look for in a full stack candidate, and this project gave me a working example I can demonstrate in my portfolio.
