studio-drishti/recipe-lab

Play with your food 🥗

Recipe Lab

Play with your food. A recipe collaboration web application.

Docker workflow adapted from @microsoct/vscode-dev-containers.

1. Install Docker, VS Code, Remote Dev plugin [guide]
2. Start the dev container.
3. run yarn then yarn bootstrap
4. Celebrate 🎉

recipe-lab's Issues

Refactor pages to be functional

Refactor login page to be a functional component which implements the Apollo hooks API.

Display follower count

• If user has less than 10 followers, show the count as "< 10"

On sign in, redirect to conflict resolution page if changes in localstorage would conflict with the DB

• conflict resolution page is shown only when localstorage conflicts with the DB
• when selection is made and processed, redirect user to the page they were on when they signed in.
• if localstorage changes exist when visiting a recipe AND logged in, just delete the local storage stuff

Save to localstorage when user is not signed in

AC

• modifications are saved to local storage when user is not signed in
• displays a warning that changes are only saved to user's computer
• warning prompts user to sign in or sign up for account to save permanently.

Profile page account tab

• bio is editable
• name is editable
• photo can be uploaded
• photo can be deleted
• changes are saved to database
• validate email & password

Placeholder for recipe items

When recipe has no items:

• Hand drawn sketch of recipe item w/ steps
• actual add item button
• hand drawn prompt to click add item button
• on click, remove placeholder graphic and replace with item editor

When "upload photo" is clicked, trigger file browser.

We may need to introduce a new recipe context / reducer to make this work.

Validate title / description fields

On new recipe creation:

• Title, description, skill, and servings must be provided before saving
• Editing cannot be dismissed / canceled
• No photo upload field

On existing recipe edit:

• Blank title, description, skill, or serving highlights field in red and shows popover with reason for error
• Editing can be dismissed
• On dismiss: invalid text is highlighted in red.

Silently create new modifications from localstorage in DB when user creates account or logs in

upon sign in....

• When a change exists in localstorage that does not exist in the DB. Silently create that modification.
• delete mod from localstorage

Display tooltip on input error hover

Placeholder for step ingredients

When the firs step of the first item has no ingredients:

• hand drawn representation of ingredients
• actual add ingredients button
• on click: remove placeholder ingredients

Profile page connections tab

• Add a connections tab to the profile page
• List all user's connections under the connections tab
• display maximum ~25 connections w/ pagination
• connections can be filtered via search input

Add field validation to ingredient inputs

• show field warnings when invalid.
• highlight invalid text when not in edit mode

Profile page header

• If count < 10, show as "<10"
• Display recipes modified count
• Display recipes posted count
• Display user name
• Display photo
• display short bio

Refactor apollo client to use getinitialprops when making initial page query.

Only allow recipe owners and admins change the recipe photo. Allow admins to delete a photo.

SPIKE: Deployment stategy

????

Refactor RecipeStatus as functional component

Refactor RecipeStatus as a functional component that uses react and Apollo hooks APIs.

Programmatic step sorting

As a user, I want to be able to click a button to change the order of the recipe items and steps because dragging and dropping sucks.

Resource: https://github.com/atlassian/react-beautiful-dnd/blob/master/stories/src/programmatic/with-controls.jsx

• Up down buttons for recipe items
• Clicking up moves the item or step up the tree
• clicking down moves the item or step down the tree
• up is disabled when item/step is at the top
• down is disabled when item/step is at the bottom

Add transitions for step ingredients expanding / collapsing.

Start new recipe from scratch

• New recipe button navigates to blank recipe page
• Slug is not sexy (random cuid)
• Title/description area is set to editing mode by default
• On save: recipe is created in the DB
• On save: unique sexy slug is generated
• On save: Browser path updated with sexy slug

Profile Page bookmarks tab

• only show bookmarks tab to profile owner
• display paginated list of bookmarked recipes
• list can be filtered via search input

What are our User Roles?

kitchen porter

• can modify and save recipes privately
• can book mark recipes
• can publish on own path (/chef/username/recipes/recipename)
• can create recipes which are not indexed, have no bio, and do not link to an author's page
• recipe's can be shared via url, but are not searchable on the site or via search engine.
• is presented with incentives to apply for verified chef status (future)

sous chef

• can publish recipes publicly with a bio and link to author page
• recipes are searchable via the site and search engine

commis chef

• can write ponderings

executive chef

• all of the above plus account management powers!

SPIKE: Investigate linting situation

As a sloppy developer with lots to learn, I want lots of awesome linters that catch all of the bugs!

AC:

• Determine which css and js linters we should be using
• install and enable them
• Wait for everyone to complain about the sudden increase in errors present in the pre-commit hook 👿

Consider:

• https://github.com/evcohen/eslint-plugin-jsx-a11y

Merge localstorage changes upon sign in

As a user I want my "offline" changes to be saved "online" when I sign in to my account.
AC:

• If modification does not exist in DB, create it silently.
• If modification does exist in DB, prompt user about overwriting it.
• Options are: Attempt to merge, overwrite with offline changes, discard offline changes
• Attempt to merge: copy over any mods from localstorage, overwriting the fields where there is a conflict.
• Overwrite: replaces DB entry with localstorage data
• Discard: does nothing
• On merge, clear localstorage
• when attempt to merge is selected, warn user of potentially odd results.

Placeholder for item steps

When item has no steps:

• hand drawn graphic of recipe steps
• actual add steps button
• on click: remove placeholder steps

Add dynamic route for user profiles

• Add a prisma field for username slug
• Add next.js route for profiles by username slug

Admin User Account Management

As an admin, I want to be able to make changes to an user so that I can correct errors, grant permissions, and delete ghost accounts.

AC:

• Account settings tab is visible to admins on all profile pages.
• Account settings has additional user role field.

Bio placeholder

• if no bio, generate a generic one like "Jay is an executive chef on recipe lab. He has posted x recipes and modified x"
• otherwise display user's bio

Add a "follow me" button

• Display in profile page header
• Display in recipe page bio
• Do not show for logged in user
• If not logged in, clicking follow me will prompt user to sign in or create an account
• If logged in, clicking follow me will save relationship to the DB
• If relationship exists, change "follow me" to "unfollow"
• Clicking "unfollow" deletes the relationship
• follow: creates record in DB
• unfollow: deletes DB record
• display user's follower count in profile header
• if follower count is less than ten, display as "< 10"

Conflict resolution: Discard offline changes.

• delete localstorage changes

Recipe status bar

As a user, I want to see details about the edits I've made to a recipe, so that I know when to publish it.

Emma note - The buttons don't necessarily need to do anything for this story. Just focus on display

• status bar does not show unless modifications exist.
• status bar shows total modifications
• status bar shows "publish" button for recipe owners
• status bar shows "saving" status
• stats bar shows countdown to auto save
• option to forego countdown (save now)
• do not show countdown, do not call save function when user is not logged in
• stats bar shows warning if user is not logged in + login button

Refactor Login component to be functional

Refactor Login component to be a functional component which implements the Apollo hooks api.

Remove carousel and replace with single image upload.

AC

• Recipe only shows one image
• Carousel dependency is removed
• Recipe db is updated to only store one photo
• RecipeCarousel component is renamed and refactored to be functional w/ hooks apis
• Upload logic moved from recipe details into new photo component
• New component uses react and apollo hooks api

Conflict resolution: Overwrite with offline changes.

• overwrite DB entry with localstorage changes
• redirect to former page

Add field validation to item inputs

Conflict resolution: Attempt to merge

• merge localstorage changes, overwriting any fields that conflict with the DB entry.
• if this option is chosen, warn user about odd results.

Style recipe photo

• make the upload dialogue look like it belongs

Profile page dashboard tab v2

• Display 5 most recently bookmarked recipes
• include link to full bookmarks list
• Display ~10 most recent activities

Profile activities include:

• another user bookmarking your recipe
• another user modifying your recipe.
• a recipe that you bookmarked has been updated by the recipe owner
• a chef that you follow has published a new recipe

Add field validation to step inputs

Refactor RecipeDetails as functional component

Refactor RecipeDetails as functional component with react hooks api. The image uploader will be removed from this component (see #38), so implementing apollo hooks api for the uploader is not necessary. Recipe creation, however, will need to implement the apollo hooks api.

AC

• Implements react hooks api
• Implements apollo hooks api (for recipe creation only)

Placeholder for recipe photos

• Provide ~5 sketches of food for placeholders
• Display a random placeholder when recipe has no photos

Profile page dashboard tab

• Display 5 most recently updated / created recipes on profile.
• Include link to full list of original recipes
• Display 5 most recently modified recipes (not owned by user)
• Include link to full list of modified recipes

Deletion countdown

When deleting a modification, show a countdown / warning that it will be permanent. Allow cancelling the deletion before the countdown finishes.
AC

• when not permanently deleting, countdown does not show
• countdown shows when permanently deleting
• user can cancel the delete countdown
• on countdown finish, remove the modificaion

Remove react apollo umbrella package && upgrade dependencies

Publish a recipe

• display publish button when mods are created for a recipe that you own.
• publishing merges all mods with original recipe DB entry
• modification DB entry is deleted.

Placeholder profile images

2-3 watercolor portraits of famous chefs.

Account deletion

As a user, I want to be able to completely delete my account because GDPR.
As an admin, I want to encourage my users to stay so that their content can still be used by the community.

AC:

• account deletion page reachable via link from profile page
• show user's recipe count
• show user's recipe modification count.
• show user's recipe bookmark count
• show recent activity: list of user's who have interacted with your recipes.
• display message: "Your recipes have been modified x times and bookmarked x times. Are you sure you want to delete your account?
• In order to delete, User must select a "yes" checkbox and click submit

User Account Management

As a user, I want to be able to change my personal information to reflect my life changes.

AC:

• Account settings tab on user profile visible to current user
• Fields for changing name, email, and user name.
• If user name is changed, discourage user with a message: "Changing your username will change the URL to all of your recipes, which may make them difficult to find." or something
• link to account deletion

Activity stream

As a user I want to see how my recipe is being used and be updated about recipes and users that I follow.

AC

• query for modifications to the user's recipes
• query for bookmarks of the user's recipes
• query for followers of the user
• query for published updates to a recipe that the user has bookmarked or modified in the past
• query for new recipes from a user that the active user is following