YelpCamp2021

πŸ•οΈ YelpCamp2021

YelpCamp2021 is a full-stack, dynamic web application that allows users to discover and interact with campgrounds across various locations. Built with Node.js, Express.js, MongoDB, and EJS templating, the project implements secure user authentication, interactive mapping, image upload, and complete CRUD (Create, Read, Update, Delete) functionalities. It is inspired by platforms like Yelp, tailored specifically for campground enthusiasts who want to share their experiences and explore new sites.

This project offers an end-to-end experienceβ€”from user registration to posting, viewing, reviewing, and deleting campgroundsβ€”all in a user-friendly and responsive interface. Integrated with Cloudinary for image storage and Mapbox for geographical visualization, it provides both functionality and aesthetics. It’s a solid foundation for learning backend development with Express, RESTful routing, and third-party API integration.

πŸ” Key Highlights


πŸ“Œ Table of Contents


βœ… Features


πŸ“¦ Prerequisites

Before you begin, ensure you have the following installed:


πŸš€ Installation & Setup

Follow the steps below to set up the YelpCamp2021 project on your local system:

# 1. Clone the Repository
# This will download the project files from GitHub.
git clone https://github.com/uditjain100/YelpCamp2021.git
cd YelpCamp2021

# 2. Install Project Dependencies
# Use npm to install all required Node.js packages defined in package.json.
npm install

# 3. Configure Environment Variables
# Create a `.env` file in the root directory and add the following:
CLOUDINARY_NAME=your_cloudinary_name
CLOUDINARY_KEY=your_cloudinary_key
CLOUDINARY_SECRET=your_cloudinary_secret
MAPBOX_TOKEN=your_mapbox_token
MongoDB_URL=your_mongodb_connection_string

# Example for local MongoDB:
# MongoDB_URL=mongodb://localhost:27017/yelp-camp

# 4. Start MongoDB Locally (if not using MongoDB Atlas)
mongod

# 5. Start the Application
# You can run using node or nodemon (nodemon auto-restarts on file changes).
node app.js
# Or
npx nodemon app.js

# 6. Open the Application in Browser
# Navigate to the local development server.
http://localhost:3000

# 7. Seed Dummy Campgrounds (Optional for Testing)
# Before running the seed script, sign up on the app and copy your new user's MongoDB ObjectId.
# Then open `index.js` and replace the value of `author` with your ObjectId:
#     author: "6819d28156b0d5133da1155d"
# Finally, run:
node index.js
# This will populate your database with sample campground entries.

🌍 Environment Variables

Ensure your .env file contains the following:

CLOUDINARY_NAME=your_cloudinary_name
CLOUDINARY_KEY=your_cloudinary_key
CLOUDINARY_SECRET=your_cloudinary_secret
MAPBOX_TOKEN=your_mapbox_token
MongoDB_URL=your_mongodb_connection_string

🌐 Project Walkthrough

1. 🏠 Homepage


2. πŸ•οΈ Campgrounds List Page (/campgrounds)


3. 🧾 Campground Details & Reviews (/campgrounds/:id)


πŸ›  Technologies Used


πŸ“ Project Structure

YelpCamp2021/
β”œβ”€β”€ app.js                        # Main Express app entry point
β”œβ”€β”€ index.js                     # Optional alternate entry or mapbox setup
β”œβ”€β”€ RandomImage.js               # Logic for rotating homepage image (if used)
β”œβ”€β”€ LICENSE                      # License file
β”œβ”€β”€ README.md                    # Project documentation
β”œβ”€β”€ package.json                 # Project dependencies
β”œβ”€β”€ package-lock.json            # Lockfile for consistent dependency versions

β”œβ”€β”€ cloudinary/                  # Cloudinary config for image uploads
β”‚   └── index.js

β”œβ”€β”€ controllers/                 # Route logic for MVC architecture
β”‚   β”œβ”€β”€ campgrounds.js
β”‚   β”œβ”€β”€ reviews.js
β”‚   └── users.js

β”œβ”€β”€ layouts/                     # Layout templates
β”‚   └── boilerplate.ejs

β”œβ”€β”€ middleware.js                # Custom middleware (auth checks, etc.)

β”œβ”€β”€ models/                      # Mongoose schema definitions
β”‚   β”œβ”€β”€ campground.js
β”‚   β”œβ”€β”€ review.js
β”‚   └── user.js

β”œβ”€β”€ partials/                    # Reusable EJS partials
β”‚   β”œβ”€β”€ flashmsg.ejs
β”‚   β”œβ”€β”€ footer.ejs
β”‚   β”œβ”€β”€ nav.ejs
β”‚   └── search.ejs

β”œβ”€β”€ public/                      # Static assets
β”‚   β”œβ”€β”€ javascripts/
β”‚   β”‚   β”œβ”€β”€ mapboxShow.js
β”‚   β”‚   β”œβ”€β”€ mapCluster.js
β”‚   β”‚   └── validate-form.js
β”‚   └── stylesheets/
β”‚       β”œβ”€β”€ home.css
β”‚       β”œβ”€β”€ search.css
β”‚       β”œβ”€β”€ stars.css
β”‚       └── na.jpeg              # Fallback/default image

β”œβ”€β”€ routers/                     # Route definitions
β”‚   β”œβ”€β”€ campgrounds.js
β”‚   β”œβ”€β”€ reviews.js
β”‚   └── users.js

β”œβ”€β”€ seeds/                       # Seed data for DB population
β”‚   β”œβ”€β”€ cities.js
β”‚   └── seedhelpers.js

β”œβ”€β”€ ulits/                       # Utility scripts
β”‚   β”œβ”€β”€ CatchAsyncError.js
β”‚   β”œβ”€β”€ ExpressError.js
β”‚   └── validateSchemas.js

β”œβ”€β”€ views/                       # All rendered EJS views
β”‚   β”œβ”€β”€ auth/
β”‚   β”‚   β”œβ”€β”€ signin.ejs
β”‚   β”‚   └── signup.ejs
β”‚   └── campground/
β”‚       β”œβ”€β”€ campgrounds.ejs
β”‚       β”œβ”€β”€ details.ejs
β”‚       β”œβ”€β”€ error.ejs
β”‚       β”œβ”€β”€ home.ejs
β”‚       β”œβ”€β”€ newCamp.ejs
β”‚       └── update.ejs

β”œβ”€β”€ Home.png                     # Homepage screenshot
β”œβ”€β”€ Camps.png                    # Campgrounds page screenshot
└── Details.png                  # Campground detail page screenshot

πŸ‘€ Author


πŸ“Œ License

This project is open source and available under the MIT License.