YelpCamp-A-Campground-Application

Introduction

YelpCamp is a more complex application built from scratch using the latest website creating tools. The project aims to create a fully functional website with a UI application using JavaScript. Innovative styling will be done by CSS3 and an easy index HTML code created using HTML5. It focuses on using NodeJS as the backend tool as the website will be heavily integrated with JavaScript and also use Jquery. The authentication part is handled with PassportJs, I also used a non-relational database: MongoDB. Finally, all geolocations and maps come from the Google Map API. The application was hosted using Heroku and GroomIDE was used as the development environment. This entire project is made on cloud infrastructure using MongoDB Atlas.

Modules/Features

• Authentication:
      o User login with username and password
      o Admin sign-up with admin code
• Authorization:
      o One cannot manage posts and view user profile without being authenticated
       o One cannot edit or delete posts and comments created by other users
       o Admin can manage all posts and comments
• Manage campground posts with basic functionalities:
       o Create, edit and delete posts and comments
       o Upload campground photos
       o Display campground location on Google Maps
       o Search existing campgrounds
• Manage account with basic functionalities:
       o Profile page setup with sign-up
• Flash messages responding to users' interaction with the app
• Responsive web design

Proposed System Design

Class Diagram

State Diagram

Steps to Deploy

Step 1

In the Sample.env file: Port=3002 IP=0.0.0.0 Geocoder= (geocoder api)

Step 2

For generating google api You need to set a billing accout and create two API keys(Javascript api).

1. Geocoder api The first api key should be unrestricted and after generating it add it to .env file.
2. Map api This api should be restricted. Go to views > campgrounds > show.ejs At line 269 add your Map api key.

Step 3

Create MongoDB cluster here https://www.mongodb.com/cloud/atlas. After creatring cluster follow path Connect > Connect Your Application > Copy connect link. In app.js replace 'Your mongodb cluster link here' with the generated link. mongoose.Promise = global.Promise; mongoose.connect('Your mongodb cluster link here',{useNewUrlParser: true, useUnifiedTopology: true }).then(() => console.log("Database connected!")) .catch((err) => console.log("Database error: " + err.message)); mongoose.set('useFindAndModify', false); mongoose.set('useCreateIndex', true);

Step 4: Use GoormIDE to run the application(Perferably)

Results

Database Connectivity

Database

Users

Campgrounds

Reviews

Comments

Output