The present website was done as part of the December Hackathon organised by Code Institute (CI) in 2024.
The initial idea for the group project was to do a site to show recipes to the users and allow them to also input their recipes on the site.
The group Jingle Bites was composed of 6 elements, including current students and alumni from different courses by CI.
- User Experience Design
- Project Brief
- Users
- Project Plan
- User Stories
- Wireframes
- Design
- Website Features
- Responsive Design
- Future Features
- Technologies Used
- Deployment
- Testing
- Credits
A user-centred approach has been taken through the inception, design and development of this site. Checking layouts and colours, and ultimatelly basing the website in an existing website layout, with smooth colours and appealing design. The site was coded, with attention to the responsiveness in different screens.
The project goal is to provide different Christmas recipes to users, allowing them to add their own recipes and as well as to choose their favourite recipes, that they can see/review later.
The site user's goals for the site are to get information about different Christmas recipes, as the ingredients, preparation and time that takes to prepare it. Also being able share their recipes with other users.
In order to fully understand our users needs, we asked Microsoft Co-pilot to draw up some user personas based on our project brief. We refined the prompts and here are the personas we used:
-
Persona 1: "Emily Johnson is a 32-year-old teacher from Leeds"
She loves discovering new Christmas dessert recipes to make for her family and friends during the holiday season.
Emily wants a website where she can easily find and save her favorite recipes to try later. She also enjoys sharing her own baking creations with the community.
However, she often gets frustrated with hard-to-follow recipe instructions and the lack of ratings and reviews to gauge the quality of the recipes.
Emily appreciates detailed recipe instructions, the ability to save favorite recipes, and the option to share recipes on social media.
She values easy-to-use search functionality and high-quality images for each recipe to help her decide what to make. -
Persona 2: "Michael Williams is a 45-year-old software engineer living in Brighton"
Michael follows a vegetarian diet and is always on the lookout for new vegetarian Christmas recipes.
He likes to post and share his main course recipes with the community and enjoys engaging with other users by commenting and rating recipes.
Michael sometimes finds it difficult to find recipes that suit his dietary preferences and wishes there were more interaction opportunities within the community.
His favorite features include the ability to filter recipes by dietary preferences, post and manage his own recipes, and comment and rate other recipes.
Michael also appreciates receiving notifications for recipe interactions and having access to analytics to track the popularity of his recipes. -
Persona 3: "Sarah Smith is a 28-year-old digital marketer from Cardiff"
She often hosts Christmas parties and is always on the hunt for quick and easy appetizer recipes. Sarah wants a website where she can save and organize her favorite recipes in her profile. She also enjoys personalizing her account by adding a profile photo and bio.
Sarah sometimes feels overwhelmed by the sheer number of recipes available without proper organization and wishes there were more ways to filter recipes by cooking time.
Her favorite features include browsing recipes by category, personalizing her user profile with a photo and bio, and saving and organizing favorite recipes.
Additionally, Sarah values the ability to filter recipes by cooking time and having easy-to-read formats for recipe instructions.
Initially the group got together when the team was known after the first webinar. A repository was created and colaborators were adeed to allow different members to create their branches and work locally, as necessary.
After this, a project board was also created on GitHubOn, the draft user stories were done with the help of MS Co-pilot.
Co-pilot provided sufficient and relevant user stories including the acceptance criteria and tasks required for each user story.
Some adjustments had to be made, as the scope of some of the user stories didn't fit into the project timeframe.
Here are all the user stories that have been prioritised for the current implementation of the site:
| User Stories | MoSCoW priority | Status |
|---|---|---|
| Post own recipes | must have | Done |
| Edit and Delete Recipes | should have | Done |
| User Profile with Photo and Bio | could have | Done |
| Browse Recipes by Category | must have | Done |
| Save Favourite Recipes | should have | Done |
| User-Friendly Navigation | must have | Done |
| Appealing and Simple Design | must have | Done |
| Responsive Design | must have | Done |
| Share Recipes on Social Media | could have | Not Done |
| Search Recipes by Ingredient or Keyword | could have | Not Done |
| Filter Recipes by Dietary Preferences | could have | Not Done |
| Rate and Review Recipes | could have | Not Done |
| Admin Moderation and Management | could have | Not Done |
| Print or Save Recipes as PDF | could have | Not Done |
All user stories were logged on the GitHub Project Board on GitHub repo, along with the assessment criteria and expected performance for the Hackatho
There were also prioritised as must-have, should-have and could-have.
As well as using the Project Board to track progress on our project, we also used it during testing to log any significant bugs that need to be fixed before the project deadline.
Initial layout of website in different devices:
-
Mobile view:
-
Tablet view:
-
Desktop/Laptop view:
This site was based on PinchOfFun website by suggestion of a team member and after discussion within the group.
For the body section of the webpage, font-family used was: "Poppins", sans-serif. Example of Poppins font Google Fonts
For the Logo, font-family used was: "Brush Script MT", cursive. Example of "Brush Script MT" font from Microsoft
For the Title, font-family was: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif. Style example of "Segoe UI" from Microsoft
- Nav bar has "Home", "About" and "Recipes" links on the left side that take user to this pages.
- These links are also available on the footer, to give another option for the user to quickly move to a different page of the website.
- On the right side of the Navbar the user can choose to "Register" on the site and create his/her account to post their own recipes and share them with other users.
- The "Login" link allows the user to access the account previously created.
- Access to Social Networks
- In this page the user can choose one of the 4 main categories "Starter, "Main", "Side" or Dessert" to see different recipes according to each category.
- Also has some recomended recipes below the categories which the user can select and will show a description of the selected recipe.
- Information about the website.
- Has a option menu "All Categories" that allows the user to choose from the categories mentioned above on the homepage and search for recipes.
- Different recipes are available, that the user can open by selecting/clicking in the area of the specific recipe, which slightly pops out to provide a visual output to the user that is ready to go to another page.
- Description of the recipe selected: title, brief description, ingredients, how to prepare the recipe and how many users liked the recipe.
- Requests different details to the user to create a personal account.
- Allows the user to access the account created.
- View of the user profile page.
- View of the form to add a new recipe to the website.
Respomsive Desgin of the content was built using components from the Bootstrap Library and CSS Media queries.
- Print or Save Recipes as PDF
- Admin Moderation and Management
- Filter Recipes bu Dietary Preferences
- Search Recipes by Ingredient or Keyword
- Share Recipes on Social Media
Heroku deployment process:
- This project uses Heroku, a platform as a service (PaaS) that enables developers to build, run, and operate applications entirely in the cloud.
Deployment steps are as follows, after account setup:
- Select New in the top-right corner of your Heroku Dashboard, and select Create new app from the dropdown menu.
- Your app name must be unique, and then choose a region closest to you (EU or USA), and finally, select Create App.
- From the new app Settings, click Reveal Config Vars, and set your environment variables.
- | Key | Value |
- | --- | --- |
- |
AWS_ACCESS_KEY_ID| user's own value | - |
AWS_SECRET_ACCESS_KEY| user's own value | - |
DATABASE_URL| user's own value | - |
DISABLE_COLLECTSTATIC| 1 (this is temporary, and can be removed for the final deployment) | - |
EMAIL_HOST_PASS| user's own value | - |
EMAIL_HOST_USER| user's own value | - |
SECRET_KEY| user's own value | - |
STRIPE_PUBLIC_KEY| user's own value | - |
STRIPE_SECRET_KEY| user's own value | - |
STRIPE_WH_SECRET| user's own value | - |
USE_AWS| True |
- Heroku needs three additional files in order to deploy properly.
- requirements.txt
- Procfile
- runtime.txt
- You can install this project's requirements (where applicable) using:
- pip3 install -r requirements.txt
- If you have your own packages that have been installed, then the requirements file needs updated using:
- pip3 freeze --local > requirements.txt
- The Procfile can be created with the following command:
- echo web: gunicorn app_name.wsgi > Procfile
- replace app_name with the name of your primary Django app name; the folder where settings.py is located
- The runtime.txt file needs to know which Python version you're using:
- type: python3 --version in the terminal.
- in the runtime.txt file, add your Python version:
- python-3.9.19
- For Heroku deployment, follow these steps to connect your own GitHub repository to the newly created app:
- Either:
- Select Automatic Deployment from the Heroku app.
- Or:
- In the Terminal/CLI, connect to Heroku using this command: heroku login -i
- Set the remote for Heroku: heroku git:remote -a app_name (replace app_name with your app name)
- After performing the standard Git add, commit, and push to GitHub, you can now type:
- git push heroku main
- The project should now be connected and deployed to Heroku!
Validation of HTML/CSS, Lighthouse Audits.
- Used W3C Markup Validation Service to test the HTML on all webpages and updated as needed. No errors found after fixing.
- Used W3C CSS Validation Service to test CSS style and no errors found on all pages for style.
Used Chrome Dev Tools Lighthouse to audit the site for response time and accessibility.
- Home
- About
- Recipes
- Recipe
- Signup
- Login
- Profile
- New Recipe
- No errors shown while testing and the automatically generated migrations don’t require any changes.
The GitHub Copilot extension was installed in some local versions of Visual Studio Code.
Copilot was used sometimes for debugging code. Either while using VS Code or when using Dev Tools and searching about errors.
The team has communicated very well and different members had regular huddles to check about progress of the project, as well as when needed to check code or to resolve conflicts on the code or trying to merge changes to main repo. Different members were able to work in different parts, but also to help eachother with common tasks as needed/requested. There was a good cooperation in the team to get the site well done, which could be seen from the initial moment.