YelpCamp

A full-stack web application developed using Express JS, MongoDB, and EJS and Bootstrap 5. Completely resposnive with added security and PassportJS authentiacation.

Demo-Preview

https://yelpcamp-itkhan-2021.herokuapp.com/

Table of contents

• Project Title
• Demo-Preview
• Table of contents
• Installation
• Usage
• Technology Stack
• Diagrams
• Development
• Contribute
  • Contributuions
  • Credits
• License

Installation

(Back to top)

1. Setup the development environment
   • VS Code editor.
   • Git Bash
   • NodeJS
   • MongoDB
     • Download the Community server and select the Insall Mongod as server.
     • Start Windows Powershell (press the Windows Start button and type ‘powershell’ to find the shortcut) and type the following command: New-Item -ItemType directory -Path C:\data\db
     • Add the mongodb installation C:\MongoDB\bin location to the path variable in System variables.
     • run mongod command in terminal to start mongo server.
     • run mongo command in seprate terminal to open mongodb shell.
2. Install the depndencies
   • git clone the project repository
   • npm install will install the project's dependencies
3. External APIs
   • Cloudinary Registration for Image Storage
     • Sign up for free account --> does not require credit card to start
     • Embed the Account API Key and API Secret directly into .env
   • MapBox for interactive clustered Map
     • sign up and have access to a default public token --> can make new tokens if you want
     • include token in .env --> MAPBOX_TOKEN=asdfasdfasdfasdf

Technology Stack

(Back to top)

Languages and Tools:

Usage

(Back to top)

• YelpCamp app is an online platform for users to create and share the campgrounds. The campgrounds can be edited and deleted afterwards by the authorized user only.
• Users can also view and comment on the campgrounds created by other users.
• Users need to be logged-in in order to create and review campgrounds.
• Index page displays list of all the campgrounds with interactive clustered map that can be used to get an overview of the campground locations.
• Expanding the clusters will result eventuallly in single campgrounds that can be clicked to redirect to the campground details.

Diagrams

(Back to top)

ER Diagram for YelpCamp database

Development

(Back to top)

• Async errors as well as mongoose erros and form validations have been implemented to avoid the server failure.
• Users get notified for errors and success via flash messages.
• Passport JS authentication is used to store the encrypted password with hash and salt in database.
• A bunch of security features have been added as well to prevent XSS attacks, Mongo Injection, HTML sanitizing and content security policy.
• Cookies and Session storage is being used to keep the users logged-in and retrieve the campgrounds.

Contribute

(Back to top)

Contributions

Contributions of any kind are welcome!

• When contributing to this repository, please discuss the change you wish to make via issues

• Note that we have a code of conduct, please follow it in all your interactions with the project.

• All code changes take place through pull requests. Check GitHub Flow.

• We use GitHub issues to track public bugs. Report a bug by opening a new issue.

• Try to stick to the issue template and pull request template.

Contributors ✨

Thanks goes to these wonderful people (emoji key):

This project follows the all-contributors specification. Contributions of any kind welcome!

Credits:

Colt Steele 💻 🎨 🤔

Ian Schoonover 💻 📹 🤔 🐛

Zarko Maslaric 💻 🖋 🐛 🤔

RACHEL M MURRAY 📖

(Back to top)

License

(Back to top)