The Sweet Vegan is an online recipe book for vegan cakes and desserts. The site allows users to register for a free account and share their own recipes.

The site uses HTML5, CSS3, JavaScript, and Python.

The live site can be viewed here: The Sweet Vegan

As a first time user, I want to...

1. Understand the site's main purpose and find out more about what the site offers.
2. Navigate easily within the site to find relevant content.
3. View recipes without having to create an account.
4. Register for an account easily if I choose to.
5. Find the site's contact details, including social media links, and be able to contact the site easily.

As a returning user, I want to...

1. Login to my account easily.
2. Share my own recipes.
3. Find the recipes I have shared on their profile page.
4. Edit the recipes I have added.
5. Delete the recipes I have added.

How this is achieved

Design

• The site uses a simple and consistent layout and design.

Navigation

• Users can login or register using the buttons in the navbar.

• Quick links appear below the hero image to allow users to quickly navigate to the recipes, about us, or contact pages.

Recipes

• Users can create, read, update and delete (CRUD) their own recipes.

• Users can access recipes without having to register or login.
• Registered users can share their own recipes.
• Registered users can view their own recipes on their profile page.

Register, Login, and Logout

• Users can register for an account easily.

• Users can login to their account easily.

• Users can logout of their account from the navbar.

Defensive programming

• Some actions can only be performed by authorised users, e.g. only an admin can add, edit, or delete categories.

• Users can only edit or delete their own recipes.

• Users will get an alert asking them if they are sure they want to delete their recipe.

Site structure

The site consists of 15 pages:

• about: gives the user information about the site.
• add_category: allows admin to add categories.
• add_recipe: allows users to add recipes.
• categories: allows users to view categories.
• contact: allows users to view contact details and message via a form.
• edit_category: allows admin to edit categories.
• edit_recipe: allows users to edit their recipes.
• full_recipe: allows users to view the full recipe.
• index: the homepage.
• login: allows users to login to their account.
• privacy: contains the site's privacy policy.
• profle: displayed the user's profile information.
• recipes: allows users to view recipes.
• register: allows users to register for an account.
• terms: contains the site's terms and conditions.

Colour scheme

The color scheme is based on shades of red (copper rose) and orange (gamboge) with shades of grey.

Typography

The brand font is Poiret One with a cursive fallback font.

The primary font is Didact Gothic with a sans-serif fallback font.

The signature font is M PLUS 1 Code with a cursive fallback font.

Imagery

The hero image is a vegan cake in keeping with the theme of the site.

The images in the quicklinks section are also vegan cakes.

Interactive links

The site includes internal hyperlinks to the different pages of the site and external hyperlinks to Facebook, Twitter and Instagram, which open in a new browser tab.

The site includes two email address hyperlinks that will automatically open a user's email application and autofill the email address in the "To" field, the subject 'Mail from our site' in the "Subject" field, and the text 'Thank you for contacting us. Please let us know how we can help you...' in the body.

Wireframes

Wireframes for desktop and mobile views were created using Balsamiq.

View the desktop and mobile wireframes here

Wireframes were created for desktop and mobile views only. It was considered that this would be sufficient to inform the layout of the tablet view.

Similarly, wireframes were created for the homepage, recipes page, and full recipe page only. It was considered that this would be sufficient to inform the design of other pages.

Database scheme

PostgreSQL manages the data for the recipe categories and users.

MongoDB manages the data for the recipes.

The site is designed to be responsive on all devices.

Languages used

• HTML5

• CSS3

• JavaScript

• Python

Frameworks, Libraries and Programes Used

• Heroku is where the live site is deployed.

• Bootstrap v5 was used to assist with the responsiveness and styling of the website.

• Cloudinary API was used to enable users to upload images for their recipes whilst keeping the App safe and secure

• Flask was used to handle the templating for the site.

• Postgres was the relational database used to store user registration, login and authentication. Postgres was also used to store the Categories.

• MongoDB was the nonrelational database used to store less structured data such as the recipes. MongoDB is where we host our NoSQL database.

• Flask-PyMongo provides MongoDB support for Flask applications.

• pip is the package installer for Python, allowing us to install the packages we need for this site.

• dnspython is a DNS toolkit for python.

• Werkzeug is a Web Server Gateway Interface web application library.

• Jinja a templating engine for Python, used to write Flask and other templating services.

• Google Fonts was used to import the Bubblegum Sans and Nunito fonts into the style.css file, which are used throughout the website.

• Font Awesome was used to add icons for aesthetic and UX purposes throughout the website.

• Hover.css was used on the links in the navbar to add the underline-from-center transition on hover.

• jQuery is included in Boostrap to make the navbar responsive.

• Git was used for version control by using the Gitpod terminal to commit to Git and push to GitHub.

• GitHub was used to store the project code after being pushed from Git.

• Balsamiq was used to create the wireframes during the design process.

W3C markup validator

The W3C Markup Validator was used to to validate the site's HTML. The Validator returned 4 warnings and 1 error.

A copy of the original report can be accessed here.

A copy of the final report can be accessed here.

W3C CSS validator

The W3C CSS Validator was used to validate the site's CSS. The Validator returned no warnings.

A copy of the report can be accessed here.

Lighthouse etsting

The website was tested using Lighthouse on the Chrome and Microsoft Edge browsers to determine the website’s performance, accessibility, best practices, and SEO.

For desktop, all measures scored at least 90%

For mobile, the performance measure scored 83% and 87% on Chrome and Edge respectively. This was considered acceptable at this time; however, the developer may look to improve this in the future.

The reports can be viewed below:

• Chrome Desktop

• Chrome Mobile

• Edge Desktop

• Edge Mobile

a11y color contrast accessibility validator

The ally Color Contrast Accessibility Validator was used to test for color contrast problems. The Validator retuend 1 problems with contrast color-pairs. These problems were resolved by adjusting the contrast of the font color.

A copy of the original report can be accessed here.

A copy of the final report can be accessed here.

Responsiveness testing

The website's responsiveness was tested manually, using the Google Chrome DevTools, and the Responsive Design Cheker website.

The website was responsive on all screen sizes from 320x480px to 1920x1200px.

Known Bugs

No bugs have been identified.

Deployment to Heroku

Heroku was used to deploy this project. The steps used for deployment to Heroku are as follows:

1. Sign up and log into heroku.
2. On the top right hand corner of the heroku website, click new, then create new app.
3. Name the app, select region, and then click the create app button.
4. Install postgres under the resources tab.
5. Insert relevant config vars into heroku, such as IP, PORT SECRET_KEY, DATABAS_URL.
6. You can click connect to github but this project used the CLI method.
7. Log into heroku via CLI.
8. Create a git remote for heroku.
9. Push all changes to the staging area.
10. Push to heroku for your app to run and function.

Code

• Bootstrap v5 was used to assist with the responsiveness and styling of the website.

Information Sources/Resources

The following sources were used to provide additional information relating to HTML and CSS:

• W3C Schools

• Stack Overflow

Content

All content was written or adapted by the developer with the exception of the recipes, which were sources from Tesco Real Food (https://realfood.tesco.com/gallery/10-best-vegan-cakes-and-bakes.html).

Media

All images were used under Creative Commons where available, or under the provisions for research and private study in section 29 of the Copyright, Designs and Patents Act 1988.

All images were converted to .webp using online-convert.

Acknowledgements

Thank you to my mentor, Dario Carrasquel for his helpful feedback, and to tutor support at Code Institute for their support and patience.