About the YelpCamp Project
Welcome! This is a completed YelpCamp project following the Web Development Bootcamp course by Colt Steele on Udemy. YelpCamp is a basic "Yelp clone" project where users can create campground pages, browse campgrounds, and review them. This is a full-stack web application project which teaches you how to create RESTful routes, implement CRUD resources, how to leverage third-party libraries, and how to implement good security practices.
I took a detour at the end of the course to add my own features to improve my web development chops. The features that I added by myself include: authentication via Google OAuth, a password reset system, an account email verification system, asynchronous pagination of the campground index page, asynchronous pagination of campground review comments, a campground search feature, and basic SEO improvements. These were no small feats to implement on my own and all these features took a good amount of research! You can read more about the challenges of implementing these features at the end of the page.
Core Features
- Secure Authentication (Local + Google OAuth)
- Email Verification System
- Password Recovery System
- Async Pagination for Campgrounds & Reviews
- Image and File Management via Cloudinary
- Responsive and Mobile-First UI
- Interactive MapBox Geomapping
- Configurable Server Settings File
- Basic SEO implementations
Technical Stack & Integrations
Backend & Logic
Node.js & Express: Handles the RESTful API and
server-side routing.
Passport.js: Manages secure sessions and Google OAuth2
integration.
Data & Storage
MongoDB & Mongoose: Provides flexible, schema-based data
modeling.
Cloudinary: Handles the image hosting and management as well as
dynamic image
transformations.
Security & Validation
Joi: Enforces server-side data validation.
Helmet: Secures HTTP response headers to protect against common
web
vulnerabilities.
Geospatial & Communication
MapBox: Enables interactive geocoding and map rendering.
Resend: Powers email deliveries for password resets and account
email verifications.
Client-Side Frontend
EJS: Server-side view engine which creates and delivers dynamic
page templates to the client.
Bootstrap: Used to design responsive and mobile-first web
pages.
Challenges & Solutions
After completing the course, I couldn't move on from this project until I felt like some minimal production features were implemented: Google OAuth, a password reset system, an email verification system, a campground search system, and asynchronous pagination loading for large sets of data (for campgrounds and campground reviews).
Secure Account Management
Implementing a password reset and email verification system was the biggest challenge in this project. User data and account security is something I take very seriously so I felt compelled to do a lot of research before jumping into making these features. The process in this project goes like this: I generate raw token IDs for each request, store its SHA256 hash in a database, and set expiration timestamps for the tokens. Each type of request has rate-limits implemented as well to mitigate suspicious activity. The raw token links are then emailed to the user, which we circle back to the server and hash again to find the matching token. An issue I ran into was actually emailing these URLs to the users.
At first, I tried to send the email directly from the server but during testing I found that all these emails were being flagged as spam by most of email service providers. After a lot of trial and error I ended up resorting to using a transactional email service provider called Resend to send genuine emails that pass spam filters.
Fuzzy Search Implementation
I didn't want to end the project without adding a search feature to the campground index page. I wasn't sure how to implement a "fuzzy" search query into a database. The user might not always spell terms correctly or even know the perfect keywords to use for their search. Luckily after doing some research, I found that MongoDB has native text indexing features to do a "fuzzy search." I leveraged this to query fuzzy searches for a nice search UX.
My Dev Journey
I've been a professional software engineer for the last 11 years: seven years in videogame industry and four years in desktop application development before that. Software engineering has always been a big passion of mine and I've been solving very difficult problems from solving software issues running on proprietary console hardware with little to no documentation, figuring out ways to run libraries externally that would otherwise slowdown an application internally, dynamically optimizing ThreeJS scenes to reuse shared assets, and solving difficult or quirky physics and networking issues in videogames. Now I feel like it's time to grow my technical skills and move into enterprise fullstack engineering.
Fullstack software engineering seems like a natural next step for me to move into because it's a space that I'm very curious about and I'm always happy to grow and apply my technical skills.