YelpCamp Project Walkthrough

March - June 2020

Source Code

About

First full-stack web application. Fundamentally, it's review website for campsites. The main features are login, sign-up, Admin role, Google Maps API, and Create, Edit, Update, Delete (CRUD) for campgrounds, comments, and reviews. Create routes have authentication. Edit, Update, and Delete routes have authentication and authorization. The basic foundation was built in the capstone project from the Udemy course The Web Developer Bootcamp. The core of the application was built from March - June 2020, with sporadic updates up until April 2022.

Product Features and Specifications

Technologies

Front-End

  • HTML5
  • CSS3
  • Boostrap
  • Javascript ES6+

Back-End

  • Node.js w/ Express.js and EJS

Testing

  • Jest
  • Google Lighthouse

Database

  • MongoDB

Development

  • Git
  • GitHub
  • Codacy
  • CodeClimate

Production

  • Heroku
  • Cloudflare
  • MongoDB Atlas
  • Sentry
  • CircleCI
  • Google Domains
  • Google Analytics
  • Google Ads

UX/UI Mocks and Graphic Design

Create and Update forms have both client-side and server-side validation for a better user experience

Leveraged the Boostrap Design System

Used Inkscape to create SVG illustrations from scratch to gain a deeper understanding of SVG. I don't plan on creating SVG graphics from scratch often, but now that I know how to do it, I can easily edit existing SVGs. If I'm unable to find an open-source SVG, now I can always create one exactly as needed. When I was younger, I used to draw all the time, so creating my own SVGs in Inkscape was actually pretty fun to explore. I had some formal training in both private institutions and in public education, specifically in high school, and it was fun to see how the same principles applied to a medium I never tried before: graphic design.

Design and Architecture

Code Architecture

Used a Model-View-Controller (MVC) Monolithic Architecture since it's the most simple architecture to gain an introduction to full-stack web development. Building a MVC Monolith allows one to gain a perspective on the range of achitectures, particularly the lower-end of the range. The Monolith Architecture falls short in scalability and separation of front-end and back-end. The MVC Architecture falls short when the application begins to grow in complexity with the addition of services that could stand on thier own. The MVC Architecture is perhaps best used for simple proof-of-concept projects, like this one. However, for any projects that serve real business needs, I would opt to use an event-driven serverless architecture.

YelpCamp Code Architecture Diagram

Model: NoSQL database for the flexibility compared to a SQL database, MongoDB in particular because of its prevalence in the industry.

View: Chose Embedded Javascript Templates (EJS) as the front-end templating language for more DRY code compared to plain HTML and for dynamic user-experiences. This is a simple templating language, similar to Jinja for Python. Both however fall short on front-end scalability, modularity, and performance compared to a framework like React. Working with simple templating languges helps to remind me the benefits of working with a framework like React.Chose Bootstrap 5 as the CSS framework to keep the UI simple and quick to build. Since the website takes a performance hit for loading Bootstrap, took full advantage of advanced Bootstrap features such as custom validation for all forms and animated form input for the login and register pages.

Controller: Chose Node.js as the backend programming language for its rich ecosystem and community support. For example,leveraged PassportJs for the authentication and authorization since it's a common out-of-the-box solution. Create routes have authentication. Update, and Delete routes have authentication and authorization. Chose Express.js as the Node.js application framework since it's a lightweight framework, which is ideal for gaining an understanding of how to build the backend from scratch. Compared to a framework like Nest.js or even Django, Express.js doesn't have many features out of the box.

Database Schema

YelpCamp Database Schema

Tests

The integration tests using Jest. The test suite checks for the creation of data, the functionality of the schema, and the functionality of the validation. The tests are iterated over each of the models: campgrounds, comments, reviews, users. Integration-tests achieved 94% test coverage. Refactored code using automated code review tools such as Code Climate and Codacy to increase code quality grade from a ‘D’ to a ‘B’. Optimized performance, security, and accessibility using Google Lighthouse to increase score from 80 to 100

Production System Architecture

Heroku as the cloud hosting provider to gain experience with PaaS. In November 2022, Heroku ended support of the free tier. When I was using the free tier, it caused the application to sleep after 30 minutes of inactivity, and I kept the application awake from 6:00 a.m. to 11:59 p.m. PST with Kaffeine. Cloudflare as the Content Delivery Network to serve users outside of the U.S. with faster load times and for the free SSL certificate, which is needed for domain forwarding to https://www.yelpcamp.app. Cloudflare also offers improved security and performance over the defaults in Google Domains. Used CircleCI for Continuous Delivery and Deploymemnt and reduced the runtime by 50% through caching optimzations

YelpCamp Production System Architecture Diagram

Production Scalability and Load limitations

The production server is hosted on Heroku Basic Dyno Tier, which has a limit of 512MB of RAM, no horizontal scaling, no autoscaling, and the server is not dedicated. If I needed to scale up due to an overloaded server, I would have to upgrade a Standard 1x Dyno for horizontal scaling. However, the web traffic has yet to reach a sustained usage of 50% server capacity. The production database is hosted on MongoDB Atlas Shared Plan M0 Cluster Tier, which has a limit of 512MB of storage. Considering that the current usage as of February 2023 is only 400KB, the website could expand up to 1280 times its current size. Given that the site went live in June of 2020, the current rate of data storage is 12.5KB/month. The database is the least likely bottleneck in this production system.

Production System Cost

Production Metrics

Lessons Learned