Yelp-Camp | Campsite Review Web App

This project is a web application that allows campsite owners to list their camp sites with images, descriptions, locations, pricing, and other details. Visitors can review and rate the campsites. The application is built using the model-view-controller (MVC) software architecture pattern.

🍿 Demo

Note

.gif file may take a few seconds to load ⏳...

💻 Technologies Used

• Frontend Languages:

  • HTML
  • CSS
  • JavaScript
  • EJS

• Backend Languages:

  • Node.js
  • Express
  • EJS

• Database:

  • MongoDB

• Database ORM:

  • Mongoose.js

• Data Validation:

  • Joi API

• Security:

  • Helmet.js (Securing Express apps by setting HTTP response headers)

📱 Features

• Campsite owners can:

  • Add new campsite listings.
  • Edit existing campsite information.
  • Delete campsite listings.

• Visitors can:

  • Search for campsites with sorting options.
  • View campsite listings with details and images.
  • Review and rate campsites.

• User Authentication and Authorization:

  • Users must sign up and log in to the web application.
  • Authentication and authorization are enforced for actions such as adding, editing, and deleting campsites.

🚀 Setting Up the Project Locally

1. Clone the Repository:

   git clone <repository_url>
   cd campsite-review-webapp

2. Install Dependencies:

   npm install

3. Configure the Database:

   • Install MongoDB and set up a database.
   • Update the database configuration in config.js.

4. Seed the Database (Optional):

   • Before running the application, you may run seeds.js (found in the seeds folder) which populates the database with 'fake' listings of camp sites. The seeds.js file uses mongoose to connect to your local database at the default server (127.0.0.1:27017) and yelp-camp as the database. This is not a required step.

5. Mapbox GL JS Access Token

   • You will need an Access Token to configure Mapbox GL JS API correctly.
   • Once you have your Access Token available, you should update the following code files with your Access Token: mapbox-map.js, mapbox-cluster-map.js at the top of both files.

6. Run the Application:

   npm start

7. Access the Application:

   • Open a web browser and go to http://localhost:4001.

8. Register and Log In:

   • Users can sign up and log in to perform actions such as adding/editing/deleting campsites and providing reviews.

9. Explore and Enjoy:

   • Explore the web app, add campsites, provide reviews, and enjoy the functionality!

✨ How can this project be improved?

These improvements aim to enhance user experience, introduce new features, and streamline existing functionalities:

GET /account/:userid

• Implement a dedicated account management page accessible through /account/:userid

GET /login and GET /register

• Add assword visibilty toggle on the login and signup pages.
• Integrate social media login and sign-up options (e.g., Google, Facebook).
• Review and improve error messages to ensure accurate and user-friendly feedback. Address JOI validation errors by providing custom error messages.

GET /campgrounds

• Calculate and display the average star rating for each campground listing
• Introduce a Bookmarks/Favorites feature for logged-in users.

POST /campgrounds

• Consider using Bootstrap for file uploads, simplifying the process for users by allowing image file uploads instead of just URLs.
• Explore creating or utilizing an existing API (e.g., Cloudinary) to handle image storage separately from the database. Currently, image URLs are directly uploaded to the database.

DELETE /campgrounds/:campid

• Implement a user confirmation prompt before deleting a campground.

DELETE /campgrounds/:campid/reviews/:reviewid

• Implement a user confirmation prompt before deleting a campground review.

✏️ Notes

• This project is a personal endeavor aimed at honing programming skills and gaining practical experience with the mentioned technologies.
• This web app idea is not my own - in 2021, I completed a course on Udemy, The Web Developer Bootcamp, by Colt Steele - this web app was the Capstone project in this course. I recently revised and made major improvements to the ui design and responsiveness, and added features not present in the original.

📸 Screenshots

👏🏻 Show Your Support

Give a ⭐ if this project helped you!

---

Made with 💙 by Melissa Vera Herbst