Sweet Treats is a website that aims to create an online baking recipe community. This site allows users to share their favourite bakes with others as well as explore the site for new and exciting recipes that they can try at home.
Users can login, post their recipes, comment on posts by other users, edit posts they have previously uploaded, and like posts that have been uploaded by others.
A link to the deployed website can be found here.
- Balsamiq wireframes was used to design the wireframes used in the design phase of this project.
Page | Wireframe |
---|---|
Home Page | |
About Page | |
Sign Up Page | |
Sign In Page | |
Delete Alert | |
Medium Screen View | |
Medium Screen View |
- Lucid Charts was used to design the unique models used in this project.
- Colours were chosen using Color Hex was used to find matching colours to ensure a visually appealing colour scheme.
My personal goals for this project are that:
- The site is easy to navigate and user friendly.
- The purpose of the site is evident and inviting to users.
- That users want to create an account and engage with its content.
As a user I want to:
- Easily understand the main purpose of the site, so that I can easily use the site.
- Easily navigate around the site, so that I can easily find content and clearly see where I am on the site.
- Be provided with a page containing a summary of all available posts so that I can decide what posts I would like to interact with.
- Be able to read posts uploaded by other users in full and see any comments related those posts, so I can decide if I want to interact or try the recipe.
- See the author of posts and comments, so I can interact with them on the site.
- Sign up to the website, so that I can post my recipes, and then have the option to update and delete at a later date.
- Sign into the website, so that I can comment and like posts created by others.
- Easily log in and log out of my account.
- Find links to contact the owner of the site on social media.
- See the date a post or comment was created so that I can see any updates or suggestions to recipes.
- See how many comments are attached to a post before clicking in to view it so that I can decide to if my comment has been made already.
- See how many likes are on a post without having to enter it in detail.
- Be able to like and unlike recipes on the site.
- Post my own recipes to the site so that I can share with others and receive feedback or suggestions on my recipe.
- Update and delete my own posts so that I can keep the information up to date or make any adjustments once I have tried a bake.
- Comment on my own posts so that I can reply and interact with other users.
- Comment on posts uploaded by others so that I can engage with the baking community.
- Access the site on various devices such as desktop, tablet or mobile to that I can use the site on the go.
- Understand that if an error occurs how I can address it.
- Be notified when my interactions with the site have been successful for example when I have logged in/out successfully or when I have posted or commented on the site.
- View a paginated list of posts so I can easily navigate through a list of posts.
As an Admin I want to:
- I can log in to allow management of a supportive and safe baking online community, by approving or removing posts and comments if required.
- I can log in and update or delete objectionable posts and comments if required.
- Create drafts so that I can return and finish writing content at a later date.
- Like and unlike posts so that I can also interact with the site's contents.
- An Agile Approach was used to develop this site. This was achieved by breaking the project down into smaller tasks.
To complete the overall aim of the Sweet Treats website concept, 14 issues were documented as specific tasks called User Stories. These User Stories are small sections of the project designed to accomplish a specific goal. The acceptance criteria I followed when completing this development project was that if when completing and testing each User Story, the task was completed successfully such as liking a post or logging in and out of the site then I deemed the passing conditions met. Once the User Story was working effectively it was moved across the Kanban board.
As mentioned above this project used a Kanban board, which was set up in my GitHub Projects here, to help keep track of the work that was left to do, that was in progress and that was completed.
Examples of how my project progressed through the use of the Kanban board can be seen below.
Week | Board |
---|---|
Week 1 | |
Week 2 | |
Week 3 | |
Week 4 | |
Week 5 | |
Week 6 | |
Week 7 |
The user stories mentioned above were used to ensure a positive UX was achieved.
Given more time to work on this project the overall scope of the website could be expanded.
- User Profiles:
- Allow users to create and edit their own user profiles.
- As part of this they could add profile pictures and a brief biography about themselves.
- The User profile would also contain a list of recipes created by the user like an online recipe book.
- Paginate the comments section of the site to ensure that the page remains user friendly across all device sizes.
- Add option to reply to comments to further enhance interactivity.
- Allow users to view other profiles to connect with other bakers.
- Add a cancel button to the create and update recipe pages to prevent user from having to use home or back button.
- Python: Language chosen to develop the interaction with the server.
- HTML: Markup language used to create the front end web pages.
- CSS: Styling language used to add custom styling to site.
Type | Technology | Function |
---|---|---|
Framework | Django | python framework used to create backend logic |
Framework | Bootstrap5 | CSS Framework for developing mobile-first responsiveness across multiple screen sizes |
Library | Django-allauth | Authentication library used to create the user accounts |
Library | Summernote | |
Application | Crispy Forms | Used to manage Django Forms without having to re-write templates |
Application | Psycopg2 | Database driver used to connect to the database to Python code |
Database | SQLite | used as the database during development |
Database | PostgreSQL | The database used to store all the data on deployment site |
Other Resources | Chrome DevTools | Used to debug and view changes |
Other Resources | Balsamiq Wireframes | Chosen to design wireframes during project planning |
Other Resources | LucidCharts | Used to create models used in the project |
Other Resources | Cloudinary | Image hosting platform used to upload images |
Other Resources | Font Awesome | Used for visual icons on the site to enhance UX |
Other Resources | Color-Hex and Color-Hexa | Used to choose colour scheme and ensure colours were complimentary |
Other Resources | Am I Responsive? | Used to see responsive design throughout the process. |
GitHub | GitHub Projects | Used to visually track the progress of the project |
GitHub | GitHub Issues | Used to create the user stories managed in GitHub Projects |
Host | GitHub | To store the source code and ReadMe for the project |
Host | GitPod | IDE selected to build the project |
Host | Heroku | To Host the deployed website |
Package Manager | Pip3 | Used to install extra software not found in Python Library |
Resource Used | Code Tested | Example | Result |
---|---|---|---|
W3C CSS Validator | style.css | Pass | |
Html Checker | base.html | Pass - Warnings can be ignored as this is the structure of the base.html file. | |
Html Checker | index.html | Pass | |
Html Checker | about.html | Pass | |
Html Checker | posts.html | Pass | |
Html Checker | create_post.html | Pass | |
Html Checker | delete_post.html | Pass | |
Html Checker | update_post.html | Pass | |
Pep8 Validator | sweet_treats/urls.py | Pass | |
Pep8 Validator | urls.py | Pass | |
Pep8 Validator | models.py | Pass | |
Pep8 Validator | urls.py | Pass | |
Pep8 Validator | forms.py | Pass | |
Pep8 Validator | apps.py | Pass |
- The site was also tested for its Lighthouse Performance Score and the results were as follows.
- On a desktop screen the home page and about page scored 92 and 99 respectively, the create page result was significantly lower, however this was attributed to Chrome extensions impacting the load time.
- All three pages scored highly in the accessibility, best practices and SEO sections of the performance analysis.
- When creating a recipe, the user has the option to select the author even though the page states 'posting as X'. I tried removing the select author field however it resulted in an error. This field allows the user to select any name from registered users, but they are then prevented from editing or deleting the post they have created as their name does not match the author name. As a result I have updated the about.html page to instruct users to select their own name from the dropdown menu. Given more time I would investiagte this bug further and adjust the forms and models to remove the requirement for the author field to be present.
Heroku was used to deploy the site and it was achieved by following the steps below:
- Go to the Heroku's website.
- Create an account if required or select log in.
- From the Heroku dashboard, click on the “New” button in top righthand corner then "Create new app".
- Enter a unique "App name" and "Choose a region" before clicking on "Create app".
- Go to "Config Vars" under the "Settings" tab.
- Click on "Reveals Config Vars" and enter the following information:
- CLOUDINARY_URL : add your cloudinary key here.
- DATABASE_URL : add the url from postgres database.
- SECRET_KEY = a secret key for your app.
- PORT : 8000
- DISABLE_COLLECTSTATIC = 1 during development (Remove when deploying production!)
- Go to "Buildpacks" section and click "Add buildpack".
- Select "/herokupython" and click "Save changes"
- Go to "Deployment method", under the "Deploy" tab select "GitHub" and click on "Connect to GitHub".
- Go to "Connect to GitHub" section and "Search" the repository to be deployed.
- Click "Connect" next the repository name.
- Choose "Automatic deploys" or "Manual deploys" to deploy your application.
- Project Version Control – Git was used to control the versions of the project during development. Changes were added, committed, and saved using commands such as ‘git add .’ and ‘git commit’, and ‘git push’. Once changes had been committed, they were pushed and stored on the GitHub repository with the rest of the projects source code.
- Lucid Charts
- Stack Overflow -> Using Slugs in Django
- BBC Goodfood -> was used for recipes and corresponding images
- W3Schools -> Using cards in Bootstrap
- Bootstrap Documentation -> For implementing bootstrap throughout the project
- Django Summernote
- GitHub Source -> Adding Image to nav bar
- Django Messages
- AllAuth Documentation
- NetNinja Django Tutorials
- First, I would like to thank my Partner for his love and support throughout the completion of this project.
- I would also like to thank my mentor Marcel for his advice and support.
- My friends for constantly testing the project.
- Tutor Assistance for their help and support.
- Code Institute and its Slack community for their support and providing me with the necessary knowledge to complete this project.