Flavor Forum
Background
I worked with two other software development students to build a recipe management social media app—think Pinterest, but specifically for meal prep and recipe sharing.
Tech stack: Node, Express, Next.js, Tailwind, Firebase, React.
Process
🔎 Gathering Requirements
We wrote user stories and gathered functional and non-functional requirements. We consolidated these in a project report, which we presented to our professor and class.
✍️ Diagramming
We created use case and sequence diagrams for major use cases (like joining a community or creating a recipe).
📐 Prototype
I built a working prototype in a 5-week sprint before pitching to judges in a pitch competition.
💬 Present and Get Feedback
We presented four times to our classmates and professor over the course of the semester. It's hard to overstate the importance of these sessions, as hearing others' thoughts provided us with our most valuable insight into product usability and vision.
🚀 Iterate and Launch
I'm continuing to refine my product strategy and market Tandem Index to an initial group of pilot users.
Gathering Requirements
We identified and wrote stories for four target audience segments: students, cooks, influencers, and people with special dietary needs.
A use-case diagram for signed-in users, guest viewers, and administrators. This shows the main features we wanted to include.
For each use case, we wrote user and system requirements. Below are a few of those from our report. Notice how the technical specification directly supports the user's need.
User Requirement: Users can join sub-communities for specific interest groups.
System Requirements:
User interface to search for, view, join, and leave communities
Database that stores information for each user about communities joined
Database that stores communities and their members
Interface for viewing “all” posts or specific community posts
A list of domain (non-functional) requirements relating to performance, usability, and code reuse.
Diagramming
We drilled down even deeper by creating a class diagram, building out sequence diagrams, and writing detailed documentation of each of our use cases we identified in the requirements gathering phase.
Diagramming became a fluid, Agile process over the three months that we worked on Flavor Forum. As we received feedback and tested our work, requirements changed, and we had to update our diagrams accordingly to make sure we were building under the most current conditions.
The class diagram for our application using standard UML syntax.
We integrated our professor's feedback into this updated version of the class diagram (removed Category, added Board and Post). We also divided the class diagram into subsystems, Recipe Organization and Feed.
The first three steps of a (much longer) use case.
We used draw.io to create sequence diagrams for our use cases (e.g., joining a community). This shows the different entity, boundary, and control objects that are necessary for this feature.
Prototyping
We started by writing design principles, choosing a color scheme, and mocking up a login page within Figma.
Then, we continued to develop and iterate each feature with JavaScript and React.
Later, we added Firebase and Firestore as storage solutions for recipe, community, and user data.
An example of how we stored recipes within Firebase.
Present and Get Feedback
Monthly during the semester, we presented our work via slide decks to track our progress and get feedback from our classmates and professor. We demoed the final prototype at the end of the semester, along with our challenges and goals for the future, to great applause from the class.
An example slide—presenting a browsing feature to the class.
Final Product Screenshots
The main feed view (similar to Reddit).
Creating a recipe. You can also automatically import any recipe from across the web.
Main recipe view.
Commenting on a recipe.
Creating a new board to organize recipes.
The board view.
List of communities.
Create a post within a community.
