Travlr Getaways Full Stack Web Application Architecture

In this full stack project, I worked with two distinct types of frontend development: a server-rendered Express application using HTML and Handlebars templates, and a client-side Angular single-page application (SPA). The Express customer-facing site followed a traditional MVC pattern where routes, controllers, models, and views worked together to render complete HTML pages on the server. Each navigation event triggered a full page reload. In contrast, the Angular admin interface was built as a SPA using components, services, models, and client-side routing. Instead of rendering full pages on the server, Angular dynamically updated portions of the interface in the browser. This created a smoother, more responsive experience for administrative tasks such as adding and editing trips.

The backend used a NoSQL MongoDB database because the application manages structured but flexible travel data. MongoDB stores information in JSON-like documents, which aligns naturally with JavaScript-based technologies like Node.js and Angular. Using Mongoose schemas provided structure while still allowing flexibility in document design. This was particularly useful for handling trip information that could vary in fields such as pricing, dates, and descriptions. MongoDB’s document model integrates seamlessly with REST APIs and supports scalable web applications.

Functionality

JSON differs from JavaScript in that JSON (JavaScript Object Notation) is a lightweight data-interchange format, whereas JavaScript is a full programming language. JSON is used to transfer structured data between the frontend and backend. In this project, the Express API returned trip data as JSON, Angular consumed that JSON through HttpClient, and MongoDB stored data in BSON (a binary JSON format). JSON served as the bridge connecting the frontend interface, backend logic, and database storage into one cohesive system.

Throughout the full stack process, I refactored code multiple times to improve structure and efficiency. For example, I transitioned from static HTML to Handlebars templates to dynamically render trip data. I later separated Angular logic into reusable components such as Trip Listing, Add Trip, and Edit Trip. I also implemented a Trip Data Service to centralize API communication rather than placing HTTP calls directly inside components. The benefits of reusable UI components include improved maintainability, cleaner separation of concerns, easier debugging, and scalability. If new features were added in the future, the modular structure would make updates more efficient.

Testing

Testing a full stack application requires validating HTTP methods (GET, POST, PUT, DELETE), API endpoints, and security layers. GET requests were tested to confirm trip data was retrieved correctly from MongoDB and displayed in the Angular interface. PUT requests were tested using the Edit Trip form to verify updates were properly persisted in the database. Testing required ensuring correct endpoint paths, proper request payload structure, and accurate HTTP status responses.

The addition of JWT-based authentication introduced additional complexity. Secure endpoints required valid authorization headers, and unauthorized requests had to return appropriate error responses. This reinforced the importance of understanding how methods (GET, POST, PUT), endpoints (such as /api/trips), and middleware security layers interact within a full stack architecture. Proper CORS configuration and token validation were essential to allow secure communication between the Angular SPA and the Express backend.

Reflection

This course has significantly strengthened my understanding of full stack architecture and modern web development frameworks. I gained hands-on experience building a complete MEAN stack application from initial setup to secure deployment architecture. I developed practical skills in Angular component design, REST API integration, MongoDB schema modeling, authentication using JWT, and full stack debugging.

Beyond technical skills, this course improved my ability to think architecturally about application design. I now better understand how frontend, backend, and database layers interact and how to structure code for scalability and maintainability. Completing this project has made me more confident in discussing full stack development concepts and demonstrating a complete working application in a portfolio setting. The experience gained from building and securing a full stack application has made me a more competitive and marketable candidate in the software development field.