GithubHelp home page GithubHelp logo

recipes's Introduction

Fill your belly, feed your soul

Responsive web image

The Live Website can be accessed HERE!

This is a recipe website that is open to everyone who loves cooking and wants to explore new recipes. The site’s main purpose is to allow users to browse and view recipes whether they are registered or not. Registered users can also add, update and delete their own recipes on the app, like or dislike recipes, and leave comments that can be updated or deleted by the user.

Table of Contents

Features

Existing Features

Home Page

Home page

Recipes Page

Recipe page

Add Recipes Page

Add Recipe

Recipe Details Page

Recipe Detail

Edit Recipe Page

Edit Recipe

Delete Recipe Page

Delete Recipe

Comments section

Comments section

Comment section

  • Leave a comment

Leave a comment

  • Comment Approval

Comment approval

  • Edit Comment Page

Edit Comment

  • Delete Comment Page

Delete Comment

User Account Pages

User Account Pages
  • Register page

Register page

  • Login page

Login page

  • Logout page

Logout page

Admin Control

Admin Control page

Back to top

Future Features

  • Create new categories.
  • Create a profile page.
  • Save favourite recipes in user's profile.
  • List of created recipes in user's profile.

Back to top

UX

Site Purpose

  • To make the app user-friendly and aesthetically pleasing while still meeting the needs of the user.
  • The app is designed for anyone who enjoys cooking and wants to find recipes and cooking tips.
  • To have a website where you can view recipes and choose one to cook.
  • To make sure that everyone who visits our website finds recipes they'll love, so we've put together a list of great food-related ideas.
  • This app allows you to create, update, and delete your recipes.
  • To allow users to approve, update and delete their recipes.
  • To give the admin user the power to approve, update, and delete recipes.
  • To respond to user inputs and actions in a clear and accurate way.

Agile Methodology

The Agile Methodology was used to plan and manage this project. Issues were created on Github so that tasks could be assigned and prioritised usign the Project Board. A User Story was created for each task, with specific requirements and deadlines.

User Stories

  • USER STORY: View recipe list

    As a Site User I can view a list of recipes so that I can select one to read.

  • USER STORY: Manage recipes

    As a Site User / Admin I can create, read, update and delete recipes so that I can manage recipes.

  • USER STORY: Likes

    As a Site User / Admin I can like / unlike recipes so that anybody can see which is the most popular.

  • USER STORY: Update / Delete Comments

    As a Site User I can update and delete comments on a recipe so that I can edit or remove any comments I've posted

  • USER STORY: View / Leave Comments

    As a Site User I can view and leave comments on a recipe so that I can learn more about the recipe and participate in the conversation.

  • USER STORY: Account Registration / Login

    As a Site User I can register and log into an account so that I can add recipes, comment on them and like them.

  • USER STORY: Create drafts

    As a Site User I can create draft recipes so that I can finish writing the content later.

  • USER STORY: Open a recipe

    As a Site User I can open a recipe so that I can read the recipe's steps, ingredients and comments.

  • USER STORY: Search recipes

    As a Site User I can search for recipes so that I can select one to read.

  • USER STORY: Site pagination

    As a Site User I can view a paginated list of recipes so that I can easily select a recipe to view.

Back to top

Design

The colour scheme for the design of the website is based in the banner image.

Image Colours

Flow Diagram

Flow diagram

The flow chart above, created with the website Lucidchart, provides a simplified overview of what I was trying to accomplish.

Testing

The website was constantly tested during development.

User Testing

  • User Testing:

    • Expectations:

    The user expects the app to provide an appropriate landing page that welcomes them, engages them with relevant information, and provides clear navigation to help them make choices (read, add, edit, delete recipes and comments). They also expect easy-to-follow navigation that is clear and concise, so they can easily find the information they are looking for. If there is a problem, the user expects to be notified and given instructions on how to fix it.

    • Result:

    The app's landing page was appropriate and welcoming, and the home page let me know what the app was about and what its features were. The navigation was easy to follow and I could understand everything on each page. The information was clear and I could make choices about what I wanted to do (read, add, edit, delete recipes and comments). When I made a mistake, I was told what I needed to do and given directions on how to fix the problem.

Manual Testing

Navigation Bar Status
Click on navbar logo loads home page
Click on the Home tab loads the home page
Click on the Recipes tab loads the recipe page
Click on Login loads the login page
Click on Signup loads the signup page
Click on Logout loads the logout page
Click on Add Recipe loads the add recipe page
Navigation Footer Status
Click on Facebook Icon opens external Tab
Click on Twitter opens external Tab
Click on Instagram opens external Tab
Click on Youtube opens external Tab
Home Page Status
Sign up and Login visible when logged out
Logout and Add recipes visible when logged in
Username visible when logged in
The latest 8 recipes added are shown
Recipes Page Status
All the recipes are visible
When a category is clicked it shows the recipes in it
Categories Navigation Status
It shows all the categories added
When a category is clicked it shows the recipes in it
Recipe details Page Status
All the recipe details are visible
Click on edit recipe loads the edit recipe page
Click on delete recipe loads the delete recipe page
The comments are visible
The leave a comment section is visible
Click on submit comment sends the comment for review
Click on edit comment loads the edit comment page
Click on delete comment loads the delete comment page
Click on more recipes redirects to the recipe page
Add Recipe Page Status
All the fields are visible
Type in fields lets you write
Ingredients and Method fields uses Summernote
Click on Select an Image file button uploads an image
If an Image file is not selected it shows a placeholder image
Click on Submit button sends the form for approval
Click on Cancel button cancels and redirects to the recipe page
Likes and Comments Status
Click on Like/Unlike only works when logged in
Comments can be left only when logged in
The recipes show the number of comments

Bugs to fix

After sending a comment, if a user wants to send another comment it shows an error.

Back to top

Technologies Used

  • HTML: Used to structure all the templates on the site.
  • CSS: To provide extra styling to the site.
  • Python: To provide the functionality to the site. Packages used in the project can be found in requirements.txt.
  • Django: Python framework used in the project.
  • Javascript: Minimum javascript was used to fade out alerts.
  • Bootstrap 4: To create layouts and styles for the website.
  • GitHub: Used to store my repository for submission.
  • Gitpod: Used to develop the application.
  • GitBash: Used to push the repository to Github.
  • Heroku: Used to deploy the website.
  • ElephantSQL: Used for the database during development and deployment.
  • Cloudinary: To host Static files for the site.
  • Lucidchart: Used to make a flow diagram to help with the logic & flow of the code.
  • Balsamiq: To create wireframes for the project.
  • Am I Responsive?: To ensure the project looked good across all devices.
  • Favicon - To create the favicon icon.

Back to top

Deployment

Github

To create a new repository, I took the following steps:

  1. Logged into GitHub.
  2. Click the ‘repositories’ section.
  3. Click the green ‘new’ button to create new repository.
  4. Choose ‘repository template’ Used the code institute template as recommended from the dropdown menu.
  5. Add repository name then clicked the green ‘create repository button’ at the bottom of the page.
  6. Open the new repository and clicked the green ‘Gitpod’ button to create a workspace in Gitpod for editing.

Django and Heroku

To get the Django framework installed and set up I followed the Code institute I Think Therefore I Blog cheatsheet.

Final Deployment

DEBUG = False

X_FRAME_OPTIONS = 'SAMEORIGIN' 

In Heroku go to Reveal Congfig Vars  
Remove Disbable_Collectstatic

Go to Deploy Tab & Deploy Branch

How to Fork it

  1. On GitHub, go to CarmenCantudo/recipes.
  2. In the top right, click "Fork".

How to Clone it

  1. Go to the main page of the repository.
  2. Above the file list, click "Code".
  3. Select HTTPS, SSH, or GitHub CLI and then click copy to clone it.
  4. Open Git Bash.
  5. Change the location of your cloned repository.
  6. Type git clone and then paste the URL you copied.
  7. Press “Enter” to create your clone.

Making a Local Clone

  1. Locate the Repository.
  2. Click "Code".
  3. Click Clone or Download.
  4. Copy the Git URL from the dialogue box.
  5. Open a terminal window in your choosen directory using your preferred development editor.
  6. Change the location to where you want the cloned directory to be.
  7. Type git clone, and then paste the URL you copied.
  8. Press Enter, and your local clone will be created.

Back to top

Credits

Resources used in the process of the "Fill your belly, feed your soul" website design and build:

Back to top

recipes's People

Contributors

carmencantudo avatar

Watchers

 avatar

recipes's Issues

USER STORY: Likes

As a Site User / Admin I can like / unlike recipes so that anybody can see which is the most popular

USER STORY: Open a recipe

As a Site User I can open a recipe so that I can read the recipe's steps, ingredients and comments

USER STORY: View / Leave Comments

As a Site User I can view and leave comments on a recipe so that I can learn more about the recipe and participate in the conversation

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.