cse110-fa21-group13 / recipeal

A recipe manager that allows you to store and organize your favorite recipes, and find new ones.

Recipeal

Table of Contents

1. Overview
2. How it's made
3. Demo
4. Challenges
5. Contributing
6. Meet the Team

Overview

Recipeal is a recipe manager that allows you to store and organize your favorite recipes, and find new ones. This project was made for CSE 110: Software Engineering.

Features

• Create and edit your own recipes!

• Find new recipes on the explore page!

• Use Cook Mode to help you focus on cooking!

How it's made

We first performed research to ideate on our project features and problem statement. This involved a competitive analysis for other recipes managers and creating personas for our user base. We used Miro for this process.

Persona 1

Persona 2

Competitive Analysis

We separated our features into 2 groups: core and extra. Core are the features that are essential to a recipe manager, such as recipe creation and organization. Extra are features that would be implemented after the core features are finished completely.

After we solidified the features we wanted, we laid out a roadmap detailing what we would work on in the next couple of weeks.

We were now ready to start working on the project. To start, our designers worked on creating wireframes and prototypes on Figma to give us a feel of how the app would be organized and designed.

Design 1

Design 2

Design 3

After we created a rough layout of the app, the developers were now ready to start implementing features. We used HTML/CSS for the structure and styling, and JavaScript for the functionalities. Following our roadmap, we first worked on implementing the CRUD (Create - Read - Update - Delete) functions. After those have been fully fleshed out, we started working on our extra features like exploring new recipes, cook mode, timer, and text-to-speech. To get new recipes, we used the Spoonacular API. Upon completing our extra features, we polished the styling and made our app responsive to smaller screens. During this whole process, our QA Testers implemented code quality checks and coverage using Codacy, Linter, and Cypress so that everytime we pushed to main, tests would be run to ensure the quality of our code.

For an in-depth overview of the code, please check out our documentation.

Demo

Site
Video

Challenges

Debugging was one of the main challenges. Since everyone was working out of a different branch, when it came time to merge to main, many things would break due to the differences in everyone's code. Resolving these issues involved going through the code line by line to make sure the new code wouldn't interfere with the old ones. Another challenge was the short amount of time we had to work on the project. Given more time, we would've implemented more features, polished the styling, and added more testing coverage.

Contributing

If you would like to contribute to this project:

1. Fork the repository to your GitHub account.
2. Clone the repository to your local environment.
3. To open the development server, you can use Live Server for VSCode.
4. Make the changes you want.
5. After you're finished, create a pull request with a descriptive title and description of what you did.

Meet the Team

Team Page

Acknowledgements

We would like to express our thanks to Ashritha and Professor Powell for providing guidance and support throughout the project.