👨‍💻 Cafel.ly Developer Journal

📑 About the project

Cafe.ly is a social review site for ☕Coffee! It's a project inspired by popular social and crowdsourced review sites like Yelp, IMDB, Metacritic, or RottenTomatoes. This is our finals project for CIT 214 Software Engineering in the school year 2020-2021 at West Visayas State University - CICT.

🤔 How we came up with it

For our final Software Engineering project, we were instructed to build an app around a simple prompt given to us.

The prompt that we received was a ✨Product Rating Application✨

We started by brainstorming ideas on what kind of app we should build. We finalized and voted between two app ideas:

  1. An eCommerce store with a product rating feature.
  2. A social product rating app.

Since there were already existing prompts for eCommerce stores among our class, it would be unnecessary to make build an app in the same category.

We wanted to build something different which is why we decided to go for A social product rating app.

This is inspired by already existing social product rating/review apps out there like MyAnimeList or MetaCritic. They don't own any of the products but provide a platform for people in the same niche to communicate and share their thoughts about their favorite shows or products. Inspired by the same idea, we also decided to narrow down our niche by only creating a platform for ☕ coffee lovers to do the same thing!

💻 The tech stack

Cafe.ly is a full-stack web-application project deployed on Vercel that makes use of a serverless architecture. It's overkill but the website is constructed with the MERN Stack in mind. As such, the website is built with MongoDB, Express, and ReactJS. However, Express is exported as a serverless function for the backend for its APIs which is located in the /api folder.

⚛ Front-End

  1. React
  2. Tailwind

🗃 Back-End & Database

  1. Express (Exported as a serverless function)
  2. Firebase (Authentication)
  3. MongoDB (Real-time database)
  4. Vercel (Deployment)

😤 Challenges

We have little to no experience in web development so it definitely became a huge challenge to completely learn how everything works from structuring HTML from scratch, version control, to deploying on a cloud service provider. With a time constraint of only a few months, we put in daily effort into incrementally shaping up and polishing this project.

Initially, this project wasn't really supposed to be at this level of polish. At the bare minimum, we just wanted to be able to create a working implementation of a product rating and reviewing feature on a site. But I thought it would be pretty cool to have this on a portfolio so I added as many "wow-factor" features on the site that we're capable of.

In retrospect, it was completely overwhelming to learn all these technologies with no knowledge but building this project, pushing through those challenges, and really grinding hours into solving problems has made me learn so much more about the web than simply passively watching programming tutorials. Diving deep into building projects is definitely the best way to learn web development, and this project in particular sort of served as a stepping-stone for most of us to become future software engineers.

  • ✒ Carlo Taleon | Lead Developer

👩‍💻 Group Members

1. 👧 Caguan, Xyphrus Von
2. 🐵 Carbonilla, Gene Caleb
3. 🤩 Maglalang, Jiezel
4. 🤠 Rubinos, Christopher Joseph
5. 🤡 Remigio, Zhyray
6. 😎 Taleon, Carlo Antonio

🧲 Other Stuff