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.
Before you begin, ensure you have the following installed:
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.
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
/
), users land on a visually appealing homepage with a sunset background and nature-themed design.Home
, Campgrounds
, Sign In
, Register
, or Sign Out
(if authenticated)./campgrounds
)/campgrounds/:id
)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
This project is open source and available under the MIT License.