chaudharys1/take-my-recipe

Take My Recipe is an web application built entirely from JavaScript which has a couple of cool features. It's main purpose is to allow users to add recipe for others users to see and try it out.

Take My Recipe

Take My Recipe

A platform to collect and share everyone’s best recipes!
Explore the docs »

View Demo · Report Bug · Request Feature

Table of Contents

1. About The Project
   • Built With
2. Getting Started
   • Installation
3. Usage
4. Contributing
5. Contact
6. Acknowledgements

About The Project

Take My Recipe is an web application built entirely from JavaScript which has a couple of cool features. It's main purpose is to allow users to add recipe for others users to see and try it out. User have the ability to add their own recipe or... try someone elses. User will also have the ability to comment on the recipes of their choosing.

Built With

• Node.js and Express.js
• Handlebars.js
• MySQL
• Sequelize ORM
• HTML
• CSS
• uiKit
• JavaScript

Requirements

• Use Node.js and Express.js to create a RESTful API.
• Use Handlebars.js as the templating engine.
• Use MySQL and the Sequelize ORM for the database.
• Have both GET and POST routes for retrieving and adding new data.
• Have a polished UI.
• Be responsive.
• Interactive (i.e., accept and respond to user input).
• Have a folder structure that meets the MVC paradigm.
• Include authentication (express-session and cookies).
• Potect API keys and sensitive information with environment variables.

Getting Started

To get a local copy up and running follow these simple steps.

Installation

1. Clone the repo

   git clone https://github.com/schaudhary1/take-my-recipe.git

2. Install NPM packages

   npm install

3. Start your Server

   npm run nodemon 

4. Go your browser and type in the URL the following:

   http://localhost:#ADD PORT NUMBER HERE

Usage

Use this space to show useful examples of how a project can be used. Additional screenshots, code examples and demos work well in this space. You may also link to more resources.

1. Login or Signup

2. Add your recipe

3. Checkout your created recipe

Contributing

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

1. Fork the Project
2. Create your Feature Branch (git checkout -b feature/AmazingFeature)
3. Commit your Changes (git commit -m 'Add some AmazingFeature')
4. Push to the Branch (git push origin feature/AmazingFeature)
5. Open a Pull Request

Contact

Shital Chaudhary [email protected]

Project Link: https://github.com/schaudhary1/take-my-recipe

Acknowledgements

• Jaya Gudipalli
• Conner Werth
• Shital Chaudhary

take-my-recipe's Issues

Get/recipes implementation

fetch recipes from the database

Create signup/login frontend

use html, css and uiKit to create signup and login page/

Background implementation

Take the current background and fill the entire screen, w/ navigation on top.

Create Real Default Data

Generate real recipe data to be used for main production.

Create Get/recipes

Create a User dashboard

Is your feature request related to a problem? Please describe.
A clear and concise description of what the problem is. Ex. I'm always frustrated when [...]

Describe the solution you'd like
A clear and concise description of what you want to happen.

Describe alternatives you've considered
A clear and concise description of any alternative solutions or features you've considered.

Additional context
Add any other context or screenshots about the feature request here.

Ability to see/unsee password

AS a user
I would LIKE the option to toggle view password
SO that I can make sure I type it correctly.

Responsiveness checkup

Check all components scale in mobile version

Image Link

Is your feature request related to a problem? Please describe.
I'm always frustrated when I want to add a picture of the recipe but the URL box is small and there are no online sources where we can grab pictures from.

Describe the solution you'd like
I would like the URL image box to be bigger in size and match styling to the rest of the form fields. I would also like if there were websites that are listed where we can get free images to upload.

Describe alternatives you've considered
Having users upload their own pictures.

Additional context

Create login/singup

Design login and sign up component layout

User Dashboard - Edit & Delete Icons Positions

Is your feature request related to a problem? Please describe.
A clear and concise description of what the problem is. Ex. I'm always frustrated when [...]
Edit and delete icons are placed below the recipe.

Describe the solution you'd like
I wish the the edit and delete icons were placed somewhere on the top aligned with the left recipe card info. That way it feels more integrated and the layout is simple and easy to use for users.

Screenshots

Wireframe homepage

Wireframe home page to layout components

Create Recipe Form Login and Signup Icons

Describe the bug
A clear and concise description of what the bug is.
The login and signup icon on the top right still shows even though I already logged in.

To Reproduce
Steps to reproduce the behavior:

1. Login
2. Click on 'Add Recipe'
3. See described error on top right off the page

Expected behavior
Login and signup icon should not be on this page when you're already logged in.

Screenshots

Have a polised UI

delete a recipe created by the logged in user

Create 'home page'

use html, css, and uikit to create home page

withAuth Guard

Is your feature request related to a problem? Please describe.
Users get error when they go to a certain route but are not logged in. Instead of 404 error, users should be redirected to the appropriate page.

Describe the solution you'd like
Protect Routes with Middleware so that users who are not logged in are redirected to the appropriate page.

User Dashboard - User Permission

Describe the bug
A clear and concise description of what the bug is.
A logged user has the permission to edit other recipes and delete it.

Expected behavior
Users should only be able to edit and delete the recipes that they created, not somone else's. They should only be able to comment on other recipes.

Screenshots

Fix Connor's name in Readme

edit a recipe created by the logged in user

Login Bug Report

Describe the bug
Users are able to signup with the signup form w/ no issues. Once the signup form is completed, they are automatically redirected to the loggedIn view. Once the users decide to logout and then log back in, they are unable too. The system fails to identify the user even if the credentials are correct.

To Reproduce
Steps to reproduce the behavior:

1. Go to 'Signup'
2. Create a User
3. Logout
4. Try to log back in
5. See error

Expected behavior
Once I create an account, when I logout and log back in, it should work as expected.

Wireframe create a recipe page

Change Alert box to model

When deleting a recipe, user's are prompted with an alert box. This should change into a modal from UIKIT CSS framework.

Create 'add a recipe page'

Use html, css, uikit to create 'add a recipe page'

Wireframe single recipe page

layout components for single recipe page

Create Get/recipes/1 (id)

Add Validation to 'Add A Recipe'

The Add a Recipe form submits the form empty. This form need to have a validation so empty values are not passed.

Comment Component Redesign

Describe the bug
Color contract on the comments components does not match up with the overall background color. Will need to change the background of the comment div and change the initials div to be perfectly centered and contract.

Make all pages responsive

All pages need to be responsive at different view points.

Validation for login/signup/add recipe

AS a USER
I would like to the form to tell me if my email, password is incorrect
SO that I can write the correct one to login.

New Recipe page should not show Login and Sign up buttons

Describe the bug
A clear and concise description of what the bug is.

To Reproduce
Steps to reproduce the behavior:

1. Go to '...'
2. Click on '....'
3. Scroll down to '....'
4. See error

Expected behavior
A clear and concise description of what you expected to happen.

Screenshots
If applicable, add screenshots to help explain your problem.

Desktop (please complete the following information):

• OS: [e.g. iOS]
• Browser [e.g. chrome, safari]
• Version [e.g. 22]

Smartphone (please complete the following information):

• Device: [e.g. iPhone6]
• OS: [e.g. iOS8.1]
• Browser [e.g. stock browser, safari]
• Version [e.g. 22]

Additional context
Add any other context about the problem here.

Ability to edit the current data

Is your feature request related to a problem? Please describe.
I am always frustrated when I go to my dashboard and edit my recipe but when I edit, it gives me a brand new form without any data.

Describe the solution you'd like
I would like it if the data was still their when I edit my own recipe so that I can correct my grammar or make few minor changes.

Screenshot

Create Get/recipes/category (Lunch/Breakfast/Dinner)