kristianweb/recipe-manager

A web application which helps you find the best meals you need

Hi there 👋

recipe-manager's Issues

CustomRecipeModal: StoragePage

We have to make the CustomRecipeModal on the StoragePage responsive on all screen resolutions.

You can work on this feature by creating and using a branch called feature/modal-storage

How to test Laravel's authentication using Laravel Dusk?

Trying to implement e2e tests whose job is to test Laravel's built-in Authentication but no success about it. More information regarding this topic

App layout: Responsiveness #1 HomePage ( RecipeCard )

For now the app is not mobile-friendly and we have to fix that for the HomePage first.

For the cards you should use the following CSS features:

• Use responsive measurements ( %, rem, flexbox, css grid etc. )
• The app should be responsive at 380px width ( iPhone X )

You can work on this feature by creating and using a branch called feature/cards

#1 Implement Vue JWT Authentication ( Register )

We need to implement register functionality in our app using a JWT token and storing it in localStorage.

You should work on this issue once you've completed the Vuex store JWT frontend implementation first!

Helpers
Make a test homepage that will shown after the user logs in.

You can work on this feature by creating and using a branch called feature/auth-register

ESLint & Prettier setup

Storage: Creating a custom recipe

We need to implement the creating recipe functionality located on the storage page that is going to be used for creating custom recipes.

You can work on this feature by creating and using a branch called feature/create-recipe

Implement a register page

Using this design implemented in figma:

You are going to code it using Vue, tailwindcss in an isolated environment called storybook. You will create all the states of the components and after that you will wire them with the backend.

You can work on this feature by creating and using a branch called feature/register-form

Configure CI/CD ( Github Actions ), Netlify for our Storybook setup and ChromaticQA

Fetching savedRecipes Request: Move into Vuex

We have an axios AJAX request to the server everytime we add a new recipe, delete a new one ( crud operations that are connected to the data that we are getting from the request ). The current workflow of the createCustomRecipe mechanism is:

1. Create a custom recipe
2. Send a request to the server
3. Emit a Vue event with the new recipe in the RecipeList
4. Emit again
5. Emit again

The problem here is that Im passing props back and forth to the parent ( in this case grandparent ) which is not a good idea simply because we can just have a global axios Vuex action that calls the endpoint an simply updates it.

• Move the api/recipes into vuex store
• Call it whenever you add a custom recipe
• Call it whenevery you unsave a recipe from the StoragePage

You can work on this feature by using the feature/like-display branch

Implement storybook

We need to implement storybook for our Vue frontend so we can code all the states of the component in an isolated environment and after that just connect them with the backend without having to code everything on the go and then go back and do the same process again and again. We are also going to implement unit testing and visual testing.

You can work on this feature by creating and using a branch called feature/integrate-storybook

HomePage: Caching

When we open the HomePage, we make an API call and we have limited calls each minute.

• When you fetch the recipes, cache them so if you open the StoragePage and return back you won't make another useless request.

You can work on this feature by creating and using a branch called feature/caching

Sticky Navbar & FilterForm

#1 Fix Vue Recipe card component

Is your feature request related to a problem? Please describe.

The Vue Recipe card component is not mobile-friendly. Utilize tailwind to fix responsive issues so the cards can scale on any resolution.

We need to make ingredient lists shorter so the Recipe Vue components can be at the same width without wasting too much occupation. If the list which contains all the ingredients is really long replace some of them with a placeholder [...].

You can work on this feature using a branch called feature/fix-recipe-card.

How to test asynchronous Vue components using Mocha?

Being trying for a while to test my vue components and no success about it. More information about this problem

Drop Storybook and unused dependencies

I decided to drop Storybook from this project simply because I'm losing too much time for trying to use it properly alone + there are still bugs that aren't solved yet and I'm not going to waste any more time on this.

You can work on this update by creating and using a branch called feature/drop-storybook

Code the filterForm design

Code the filterForm design after you implement #55

You can work on this feature by creating and using a branch called feature/filterForm-mobile

Refactor Icons

Right now some icons of the app are not SVG ( they are loaded on tags and also have hard coded fills ). We have to refactor them using svg-inline ( a loader ) that transforms tags into under the hood.

• Put svg-inline attribute on all icons ( remove fills, widths, heights from the icons themselves and put them into the <img> tag )
• Move the icons into /public folder ( make a new folder /svg and store all icons there)

You can work on this feature by creating and using a branch called feature/refactor-icons

Implement an account page

Is your feature request related to a problem? Please describe.

1. User should be able to find his account when he hits the /account route. Make sure you set that up in the web/routes file using Laravel. Put a placeholder text just for testing to see if it works.

2. We need an account page where the user can actually see their profile ( name, avatar, change password, change email). All the user functionalities are provided by Laravel, you just have to glue them together.

3. We need a link which would prompt the user to the storage page where his recipes are currently saved.

You can work on this feature using a branch called feature/account-view.

#4 HomePage: Connect the front-end with Edamam's API

We need to connect the front-end to edamam's API so we can provide data for our Recipe components.

For that you will have to create a component RecipeList Vue component that is going to be providing the data and looping over it & displaying it.

After that you should have the whole HomePage finished.

You can work on this feature by creating and using a branch called feature/api-frontend.

Upload to the cloud ( Hosting )

Upload the applicaiton to the cloud

You can work on this feature by creating and using a branch called feature/hosting

#3 HomePage: Code the FilterForm UI Component

We need to implement the HomePage which is going to be shown after the user logs in.

#3 We are continuing the development with the FilterForm UI component:

You are going to code it using Vue, tailwindcss in an isolated environment called storybook. You will create all the states of the components and after that you will wire them with the backend.

You can work on this feature by creating and using a branch called feature/filter-form.

#2 Implement Vue JWT Authentication ( Login )

We need to implement login functionality in our app using a JWT token and storing it in localStorage.

You should work on this issue once you've completed the Vuex store JWT frontend implementation first!

Helpers
Make a test homepage that will shown after the user logs in.

You can work on this feature by creating and using a branch called feature/auth-login

#1 HomePage: Code the NavBar UI Component

We need to implement the HomePage which is going to be shown after the user logs in.

#1 We are starting off with implementing the NavBar UI component which is going to be used on all pages

You are going to code it using Vue, tailwindcss in an isolated environment called storybook. You will create all the states of the components and after that you will wire them with the backend.

You can work on this feature by creating and using a branch called feature/navbar.

Implement Vue SPA JWT authentication ( Front-End )

We need to display the current state of the user in our frontend ( if he is logged in ) also store the user's data into a Vuex store in which we will then fetch and use for our app.

Helpers
Make a test homepage that will shown after the user logs in.

You can work on this feature by creating and using a branch called feature/jwt-auth

Saving a RecipeCard: UI Display

We have a liking functionality but we don't display the active state of the saving button.
We need to show the user some kind of indication that a particular recipe is saved.

• When you click on the Save ( heart icon on RecipeCard ) it should turn red
• Store a "isSaved" DB column so you know which Recipe is saved or not
• On the storage page all recipes should have red buttons and if you click them they should unsave a recipe.
• Unsaved recipe should be immediately removed from the list

You can work on this feature by creating and using a branch called feature/like-display

#2 Fix Login/Register Forms

Is your feature request related to a problem? Please describe.

1. Style the Login and the Register Form so they have a normal look.

2. The Login and Register form Vue components are not mobile-friendly. Utilize tailwind to fix responsive issues so the forms can scale on any resolution.

3. The user needs a feedback from the app when logging in successfully. After the ajax request is resolved, put a success message below the form.

4. When we click on Login Form ( clicking any link that requires authentication ) and then click on register, and then if we want to come back there is a login link on the register form but it shows below the register form. Refactor the code so the login form shows again on top of the register form.

You can work on this feature using a branch called feature/fix-login-register-forms.

Display User's Recipes on Storage page

Doing a TDD approach you will implement the following features:

Currently when an authenticated user clicks on the Save button of a recipe, the recipe is saved into a database for future references. We need to display the user's saved recipes on the Storage page.
The recipes must be the same Vue components which are used in the recipe page.

You can work on this feature using a branch called feature/storage.

Documentation: Readme & Figma

Update the README.md file and share the figma file for the design screens.

CustomRecipe: sourceUrl

When we create a custom recipe on the storage page it shows a READ MORE link which points to nowhere simply because there is no link at all. You can solve this problem in 2 ways:

• Check if the recipe contains sourceUrl link and if not simply dont display the button
• save isCustom property in DB when creating a custom recipe which you use to display the button after.

You can work on this feature by creating and using a branch called feature/source-url

Design the whole app and implement a Design system

Is your feature request related to a problem? Please describe.

1. We need to design the app including all pages ( recipes, storage, account, home ) with an order from left to right.

2. We need to implement a design system which would keep the app's design consistent so UX will be taken into account too.

You can work on this feature using a branch called feature/app-design.

Recipe functionality: saving a Recipe

We need to implement the saving functionality which is going to be used for saving our users' recipes and show them on the storage page.

You can work on this feature by creating and using a branch called feature/save-recipe.

#2 HomePage: Code the RecipeCard UI Component

We need to implement the HomePage which is going to be shown after the user logs in.

#2 We are continuing the development with the RecipeCard UI component.

You are going to code it using Vue, tailwindcss in an isolated environment called storybook. You will create all the states of the components and after that you will wire them with the backend.

You can work on this feature by creating and using a branch called feature/recipe-card.

Design a filterForm modal with action Button ( Mobile )

Design a filterForm modal for mobile with an action button similar to how we create a custom recipe ( modal + action btn )

Convert the app to full SPA

Describe the bug
We had so many problems with passing the data back and forth from the backend to the frontend when using Laravel and not AJAX ( This was used when the user hits a new route so we don't actually do 2 requests for the route and then ajax request for the information ) so we decided to convert the app to a full SPA and not deal with weird PHP and JavaScript JSON transforming and just depend on AJAX requests between the client and the server.

Describe the feature

• Convert the multi-page application to complete SPA.

Additional Notes
Use a branch called feature/vue-spa to work on this issue.

StoragePage: Glue the StoragePage

We need to implement the StoragePage that is going to be used for our users' saved recipes and custom ones.

You can work on this feature by creating and using a branch called feature/storage-page

Implement a login page

Using this design implemented in figma:

You are going to code it using Vue, tailwindcss in an isolated environment called storybook. You will create all the states of the components and after that you will wire them with the backend.

You can work on this feature by creating and using a branch called feature/login-form

Home: Detailed Searching

We need to implement the detailed searching functionality located on the Home page.

You can work on this feature by creating and using a branch called feature/detailed-searching.

Design a custom recipe modal

Design a custom recipe modal using Figma

Display user state in the NavBar UI Component

We need to display the user in our NavBar, also show the active route in the NavBar.

You can work on this feature by creating and using a branch called feature/display-user.

Implement Laravel JWT Authentication ( Back-End )

We need to re-learn how laravel works with jwt-auth for our authentication part.

Helpers
Use this tutorial to configure our authentication layer in our app.

Test the endpoints with Postman to make sure everything is working fine.

You can work on this feature by creating and using a branch called feature/jwt-auth-backend

Wrong way of storing the ingredients in the DB

Describe the bug
When the ingredients are saved into the database they are saved as strings and then when we pull it from there it's really hard to establish the separate parts of the ingredients string. I tried transforming the string into an array by .split(',') but no success because some of the ingredients include , just to clarify something and that completely breaks up the ingredient list.

The Card's ingredients list is sliced to 4 ingredient elements.

First API Call Card's ingredients list ( located in GET route /recipes without saving to DB ).

(Saved to DB, retrieved and formatted to Array) Card's ingredients list:

Possible Solution
The Recipe Search API Provides another response filled with Array which contains objects filled with the ingredients data.

Save and Render that to the Vue components instead of saving Array as strings.

Additional Notes
Use a branch called bug/fix-ingredients to work on this issue.