Table of Contents

• Overview
• How to use
• Project story
• Installation
• Functionality
• Contributing
• Acknowledgements and Resources

Overview

Roots is a site that allows for a user to keep family cookbooks in a digital format, adding recipes to multiple books and being able to view and navigate the books and recipes through a pleasant UI/UX.

The site was created for a school project that had the designers design an MVP with a Backend and Frontend team. They had to manage expectation versus time constraints and communicate the needs between both teams as new frameworks and libraries were used for learning purposes.

How to use

• On load the application will act as a user has already logged in. The project restricted the addition of authentication to focus on the user story and experience. The landing page will have simple navigation showing all of the users owned cookbooks gathered from their data. There is also a location for the user to add new cookbooks to their collection.
• Selecting a cookbook will navigate you to a page where you can view the recipes associated to that cookbook as well as the title and owner. This page will act as navigation to each of the recipes and a page where they can add new recipes. In the future we will add an area for a user to add family members that they want to associate with the book. This could be expanded further after authentication to allow the added family members to have their own accounts and the ability to edit the cookbook.
• Selecting a recipe from the cookbook will take the user to a simple page that displays the information from the recipe including author, description, ingredients and instructions.
• From the cookbook selecting the add recipe will take the user to a page form that allows the user to input a new recipe by filling out fields for the details.

Built With

• React 16
• CSS
• Apollo client
• GraphQl
• Heroku
• Travis CI

Project Story

The full project can be found Here and its combined project board where the status of future and completed features is tracked.
Collaboration with the BE lead us to create a GIST to keep a current vision of the data flow, mutations, and queries. Wire frames and component structure are located here

Wins

The Styling of many of the components evolved as we met and presented with the BE group to become a pleasant UX. Implemented new technologies with Apollo client and GraphQl. Successfully collaborated with a great team of Back-end engineers to build an application from the ground up.

Struggles

Learning GraphQL and Apollo lead us to spend a fair amount of time researching all of its features. The cache proved challenging to understand in its early stages. Getting our queries and mutations to function properly took some effort to accomplish. This was mostly due to the unfamiliar syntax requirements of Apollo and GraphQl as well as learning a new unfamiliar technology. We currently have a bug regarding the addition and display of ingredients when a new recipe is added. Unfortunately, due to time constraints we were unable to address this issue. Additional challenges included asynchronous testing and automated heroku deployment.

Installation

Fork this repository:

https://github.com/roots-capstone/roots-interface/

Clone your forked repository

git clone and the copied URL

Change into the directory and install the project dependencies

cd into directory and run npm install for dependencies

How to see the product

In terminal, go to the project directory and run 'npm start' to open the project in the browser. You can also see the product online here. Deployed

Functionality

Landing Page, Adding a new Book, Navigating to a Book

Recipe Book, Navigating to a Recipe, Navigating to the add form

Single Recipe

Contributing

Contributions are what make the open source community such an amazing place to be learn, inspire, and create. Any contributions you make are greatly appreciated.

See the open issues for a list of proposed features (and known issues).

• Fork the Project

• Create your Feature Branch (git checkout -b feature/AmazingFeature)

• Commit your Changes (git commit -m 'Add some AmazingFeature')

• Push to the Branch (git push origin feature/AmazingFeature)

• Open a Pull Request

Authors

Front End

👤 Tyler Haglund

• Github: relyt4me
• LinkedIn: Tyler He/Him

👤 Horacio Borrego

• Github: H-Bo214
• LinkedIn: Horacio He/Him

Acknowledgements and Resources

Back End Team

👤 Neeru Ram

• Github: neeruram1
• LinkedIn: Neeru She/Her

👤 Ryan Laleh

• Github: RyN21
• LinkedIn: Ryan He/Him

👤 Jessye Ejdelman

• Github: ejdelsztejn
• LinkedIn: Jessye

👤 Michael Alex Lynch

• Github: mlynch5187
• LinkedIn: Michael He/Him

This project was bootstrapped with Create React App.

Original Project Link