Planning an outing with a group of friends can be a messy and arduous process - especially when it comes to choosing a place to eat at. Everybody has different tastes, some might have dietary restrictions, and others may have no preference at all! All this planning (or rather, the lack of it) was what inspired us to make In a Pinch, a website service that addresses exactly this issue.

What it does

As a brief overview, In a Pinch aims to take the decision-making process and reduce it to pinch-sized choices. To start, the host can share a website-generated text code with their friends, which will allow them to join the same session. Users can then fill out an interactive questionnaire that informs the website of the experience they're looking for using parameters like cuisine type, price and distance. Furthermore, they can also rank these parameters to guide the search. Using this information, In a Pinch can suggest restaurants that align with everybody's tastes - these are then taken to a voting stage for each user's consideration. At this point, we've taken a decision composed of multiple facets/factors and split it into much more digestible bits. The final response is a simple yes/no answer for each restaurant, which is more straightforward and less overwhelming than picking a restaurant out of a list.

How we built it

Our project was mostly created as high-fidelity designs, with a very early-stage website (using Weebly) as a mockup of what the process would feel like. The code was written using the React library and styled with CSS. Other tools we used for conception and presentation were Figma and Miro.

Challenges we ran into

We initially ran into trouble with the installation of React.js's libraries, as most guides online were obsolete. Thankfully, the Hack the North mentors were able to help guide us successfully through the installation process. The main roadblock, however, was that our team had little to no experience working with any web development languages. Attempting to pick up HTML/CSS/JS within 36 hours was quite the challenge with very limited success, so our hack ended up being closer to a design/proof of concept than a tangible product.

Accomplishments that we're proud of

We were able to form a team and create a detailed and useful concept within the span of a weekend, using a wide range of tools and maximizing the potential of each team member despite our unfamiliarity with frontend tools.

What we learned

Through this project, we were able to learn how to coordinate group projects exclusively through online means, with people we had never met before and within a very limited time frame. To accomplish this, we learned to use many different tools for design and code:

  • Miro, an online whiteboard tool, to help brainstorm, visualize, and consolidate our ideas into low-fidelity designs.
  • Figma, an online vector graphics editor for converting low-fidelity designs into realistic and marketable high-fidelity designs.
  • React.js and Atom. React.js was our Javascript library of choice as it was free and open-source, and Atom was chosen because of its simplicity and decent range of functionalities.
  • Weebly was chosen as a simple and free website creation tool to demonstrate what our concept would look like as a functioning website.

What's next for In a Pinch

There are many ways we can improve on this project if we had more time and experience: the first being to actually convert our design into a real and functioning tool. Other ideas brought up that didn't quite make it into our Figma prototype include:

  • User accounts, to save "loadouts" to streamline the recommendation process.
  • Restaurant profiles, to be accessed by owners for better understanding of what consumers value at their restaurant.
  • A randomize option (within reason), for those that truly have no preference.
  • A tab for the host to toggle between participating in the questionnaire and carrying forward the decision-making process.

Built With

Share this project: