YelpCamp

Geeky Nov 18, 2022

Yelpcamp is a camping reservation system utilizing Bootstrap, HTML, CSS, Javascript for frontend, NodeJs, ExpressJs, MongoDB for Backend, MongooseJs, Flash, Helmet, and Passport for middleware, and RestAPI for interaction of restful web services. Implemented Cloudinary and Mutter to store and manipulate image files on the cloud.

I started this project in 06/2022 and finished the codebase in 10/2022

I will give you a demo of the app on here. I have been trying to deploy it on Vercel through Github repos. However, it keeps failing to deploy and more on that later.

Here is the home page of the web

As I click "View Campgrounds" or "Campgrounds"

This is the main part of the web where you can see available campgrounds.

The map I implemented Mapbox for geocoding locations of different camps.

When I click into the camp title, it leads me to the camp information. I can see the location, the price, the description, and the author who created it. Also, I can leave review on the camp. Creating camps and leave reviews are only available when you log in.

Since node_modules is quite heavy so I add it to .gitignore

git rm -r --cached node_modules

Here is the issue of deployement, I put in environment variables required for the database and the cloud of the project on Vercel, yet I keep encountering errors. Before this deployment, Vercel only shows the warning of old lockfile and build time exceeding 45 minutes. However, this time, it shows a warning of mutter version being incompatible with Node.js. Those are just warnings and should not be interfering with the deployment process.

After following instructions on how to deploy Express app on Vercel, I finally did it. I changed the folder "routes" to "api" and added vercel.json, essentially directing vercel to the correct index file and api destination.

Here is the link to the website

YelpCamp