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.
- Fill your belly, feed your soul
- Create new categories.
- Create a profile page.
- Save favourite recipes in user's profile.
- List of created recipes in user's profile.
- 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.
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 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.
The colour scheme for the design of the website is based in the banner image.
The flow chart above, created with the website Lucidchart, provides a simplified overview of what I was trying to accomplish.
The website was constantly tested during development.
-
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.
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 | ✓ |
After sending a comment, if a user wants to send another comment it shows an error.
- 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.
To create a new repository, I took the following steps:
- Logged into GitHub.
- Click the ‘repositories’ section.
- Click the green ‘new’ button to create new repository.
- Choose ‘repository template’ Used the code institute template as recommended from the dropdown menu.
- Add repository name then clicked the green ‘create repository button’ at the bottom of the page.
- Open the new repository and clicked the green ‘Gitpod’ button to create a workspace in Gitpod for editing.
To get the Django framework installed and set up I followed the Code institute I Think Therefore I Blog cheatsheet.
DEBUG = False
X_FRAME_OPTIONS = 'SAMEORIGIN'
In Heroku go to Reveal Congfig Vars
Remove Disbable_Collectstatic
Go to Deploy Tab & Deploy Branch
- On GitHub, go to CarmenCantudo/recipes.
- In the top right, click "Fork".
- Go to the main page of the repository.
- Above the file list, click "Code".
- Select HTTPS, SSH, or GitHub CLI and then click copy to clone it.
- Open Git Bash.
- Change the location of your cloned repository.
- Type
git clone
and then paste the URL you copied. - Press “Enter” to create your clone.
- Locate the Repository.
- Click "Code".
- Click Clone or Download.
- Copy the Git URL from the dialogue box.
- Open a terminal window in your choosen directory using your preferred development editor.
- Change the location to where you want the cloned directory to be.
- Type
git clone
, and then paste the URL you copied. - Press Enter, and your local clone will be created.
Resources used in the process of the "Fill your belly, feed your soul" website design and build:
- Create A Simple Django Blog | Codemy.com
- StackOverFlow: Help with general questions.
- I think therefore I blog Code Institute project.
- Images and icon.