Sweet Tooth

Due to time constraints and unforeseen circumstances, this website is still very basic and full of minor errors. My sincere apologies for the fact that this is incomplete and is still a work in progress but I decided I wanted to submit something rather than nothing at all.

User Experience

Target Audience

• People looking to expand their recipe library
• Baking enthusiasts looking for inspiration and ideas
• People passionate about baking that would like somewhere to share their thoughts and creations

User Requirements

• Links and functions that work as expected
• A simple and efficient navigation system, suitable for any age
• Bright and eye-catching presentation
• Good accessibility
• High quality photos
• A trustworthy source of information

User Stories

First-time User

• I want to register an account and log in or out as I please
• I want to browse and submit recipes
• I want to be able to leave comments on recipes
• I want to use the navigation bar so that I can easily navigate to different pages

Returning User

• I would like to keep track of my favourite recipes
• I would like to see a wider variety of baking recipes
• I would like to be able to interact with the baking community through the website
• I would like to be able to provide feedback about the site and submit any suggestions I might have that I would like to see added to the site

Design

Structure

The site is designed and structured in a way that is user friendly, easy to navigate and eye-catching. Upon clicking into the site, the user is greeted with the home page where all of the recipe posts will be gathered.

Color

For the colour scheme a light pink and lavender colour were chosen because they compliment each other in an attractive way

After deciding on the colour I tested them on WebAIM to make sure the contrast between them was right

Typography

The Dongle font was used for the text throughout this site. The font was found on Googlefonts and it was used because it was easy to read and looks appealing

Wireframes

Homepage

Recipe page

Sign In page

Sign Up page

Features

Navigation Bar

• Featured on all webpages
• Aids visitors in accessing information
• Utilizes hyperlinks to navigate visitors

Home Page

• Displays the main focus of the site which is to showcase recipes and posts from bakers around the community
• Piques the interests of visitors to give them a overall impression of what the site is for

Sign In/Out

• Allows user to sign in our out of their accounts

Register

• Allows people who view the site to create an account which lets them make their own posts and like/comment on others

Footer

• Featured on all pages
• Consists of links to the main social media platforms

Future features to implement

• Plans to create a gallery for users to upload pictures of their own creation
• Plans to create a page where all of the recipes uploaded can be found and categorised
• Plans to include a search bar to find indiviudal recipes

Technologies Used

Languages

• HTML
• CSS
• Javascript
• Python

Frameworks & Tools

• Balsamiq
• Git
• GitHub
• Gitpod
• Google Fonts
• Django
• PostgreSQL
• Bootstrap v5.0
• Favicon.io

Testing

Html

W3C Markup Validation was used to validate the HTML of the website. The validator shows some errors linked to Javascript but when validating just the HTML it passes with no errors.

Css

W3C Jigsaw CSS Validation was used to validate the CSS of the website. The validator shows some errors linked to Bootstrap v5.0 but when validating just my custom CSS it passes with no errors.

JavaScript

JSHint Static Code Analysis Tool for JavaScript was used to validate the Javascript files. No significant issues were found.

Deployment

The website was deployed using Heroku using the following steps:

Use the "pip freeze -> requiremnts.txt" command in the terminal

Create a Heroku account

Click the New button in the upper right corner and select "create new app"

Choose a unique app name, region and click "Create app"

Go to the Settings tab, add the heroku/python buildpack

Go to the "deploy" tab and pick GitHub as a deployment method

Search for a repository to connect to

Go to the manual deploy section and click the "Deploy Branch" button

Wait for the app to build and then click on the "View" link

The live link can be found here - https://sweet-tooth-ci.herokuapp.com/

Credits

Content and Media

https://www.bakingmad.com

https://www.odlums.ie

https://www.bbcgoodfood.com

https://www.bbc.co.uk/food

https://github.com/Code-Institute-Solutions/Django3blog

Acknowledgements

While making this project, I heavily relied on the tutorials provided by Code Institute, specifically the Django Blog tutorial I would like to thank my mentor and tutor for continuous helpful feedback