Yelp Camp

Table of contents

• Introduction
• Features
• Launch
• Technologies
• Documentation
• Certificate

Introduction

This is a repository of my (Jose Nicolas Mora) YelpCamp project for the Udemy course, The Web Developer Bootcamp.

Check out my Github

Check out my LinkedIn

Features

YelpCamp is a yelp style, campground themed website. It allows for users to browse and search campgrounds that the community adds. The campgrounds are rated using a "like" system, and the users are able to talk about the campgrounds through a campground comment system.

Key Features

• RESTful routes
• Campground Search (Fuzzy)/Show/Edit/Delete
• User Show/Edit
• Liking Campgrounds
• Comments on Campgrounds
• Notifications
• Authentication
• Password reset with real emails
• Admin role
• Visible Campground location with Google mini-map and marker
• Image uploading to the cloud

Added Features

• General
  • Object Oriented Javascript Refactor
    • My YelpCamp project is heavily refactored to take advantage of ES6 syntax, including:
      • Classes (to make application more Object-Oriented)
      • Async/Await (to significantly reduce callbacks and ease asynchronous programming)
      • let and const (for increased control of scope)
      • etc
  • Nested comments
  • Pagination
  • Flash messages for showing helpful information to users
  • Meaningful error messages
  • Dynamic price feature
• Back-end
  • Extensive documentation using JSDoc
  • Seperation of routes into controller classes and routes
  • Improved mongoose middleware for models to resolve inter model dependencies
  • API helper classes
  • Custom stack trace extending error classes
• Front-end
  • Mobile responsive front end design
  • Landing page animations
  • Wrapper class for wrapping models used in View files to de-couple Model (database) from View
    • This allows a developer to use the same wrapper class in the views for any model, regardless of complexity
    • This increases encapsulation of models used in views
  • Modals for seeing who likes a Campground
  • Modals for enlarging images
  • Revamped profile page
  • Increased modularity of view layouts and partials, best exemplified by the comments views
  • Even more meaningful dynamic error messages

Launch

Setup

To install, first fork this repository, then in the command line type and enter:

npm install

To run:

node ./lib/app.js

To run and preserve asynchronous stack traces:

node ./lib/app.js --async-stack-trace

Deployment

This application is deployed as a read-only version to the following link: https://yelp-camp-nikelausm.herokuapp.com/

You may use the following account to login:

• username: jackofhearts
• password: PNuYtb!2E!UZG&ryQ8*zse&$76eoFf

(note: it's read only, so you won't be able to edit/delete things)

Deployment Diagram

Technologies

Database

• MongoDB 4.0.18
  • For storing data in a NoSQL database.

Back-end

• Node.js: 14.4.0
  • JavaScript runtime built on Chrome's V8 JavaScript engine.
• npm 6.14.5
  • Node Package Manager (like a Javascript dependency manager).
  • It allows you to easily install 3rd party Javascript Node.js libraries.

NPM packages

• Express ^4.17.1
• Mongoose ^5.9.16
• bcrypt ^4.0.1
  • For password encryption.
• [bcrypt-nodejs 0.0.3]
• body-parser ^1.19.0
  • For parsing request bodies.
• cloudinary ^1.21.0
  • For using the Cloudinary API to store images on the cloud.
  • I created a wrapper class for this module to improve error handling.
• connect-flash ^0.1.1
  • For flash messages.
• dotenv ^8.2.0
  • For environment variables.
• express-session ^1.17.1
  • For storing session data.
• method-override ^3.0.0
  • For overriding HTTP verbs.
• multer ^1.4.2
  • For handling multipart/form-data
• node-geocoder ^3.27.0
  • For using the Google Geocoding API to convert addresses to coordinates.
  • I created a wrapper class for this module to improve error handling.
• nodemailer ^6.4.8
  • For sending emails, such as for resetting a password.
• passport ^0.4.1
  • For authentication.
• passport-local ^1.0.0
  • For local username and password authentication strategy for passport.js.
• passport-local-mongoose ^6.0.1
  • Mongoose plugin for simplifying username/password authentication.
• async ^3.2.0
  • For asynchronous functions before being replaced with async/await.

Front-end

• EJS ^3.1.3
  • Javascript templating engine used for building html pages.
• Bootstrap 4.5.0
  • Open source CSS framework used for creating responsive mobile-first web pages.
• Font Awesome
  • For icons.

Other NPM packages used for Front-end

• uuid ^8.2.0
  • For creating Universally Unique ID's.
• moment ^2.26.0
  • For setting and displaying dates.

Documentation

Check out this project's documentation website.

Certificate