Garden Gnome is a blog site designed for adults and teenagers with an interest in horticulture, the purpose is to allow users from anywhere in the world to communicate about this shared passion. Whether it is so they can present flowers to a loved one, they've just planted their first terrarium or have just started growing vegetables in the back garden, users are able to share their pictures, stories and interact with other users posts via comments and likes.
With horticulture being enjoyed by any age group the site should be focused on clear structure, navigation, simplicity of use and accessibility..
Responsive Design:
The Site on multiple screen sizes. Responds by limiting the amount of posts that are shown horizontally. The navigation bar also becomes a drop down menu.
Home Page:
The home page shows posts by all users in order of newest at the top. Includes a sticky navigation bar to follow the user as they scroll. Users are able to open posts from this page even if they are not registered.
Sign up Page: Users are able to sign up to an account with just a username, email and password. Navigates back to the home page on completion.
Sign in Page: Users are able to sign into their account. There is also a link if users have forgotten their password.
Sign out Page: Enables users to sign out, the button is a bright orange to give a visual warning users they are about to sign out.
Create Post Page: If users are signed in they will be able to create a new post, this will require some fields to be filled out such as a title (the post address is automatically generated from this). A placeholder image is provided if users don't want have an image they want to use.
Comments and likes:
Users that are signed in are able to either like the post or leave a comment. Upon liking a post the page is refreshed, users are not able to like a post more than once. Once a comment is left the user is provided a message advising it is waiting for approval by an admin. Comments show the user, their message and how long ago it was posted, newest comments will show at the top of the comments section. If users are not signed in a message will promt them to with links for both signup and registration.
Profile Page: Users are able to see all the posts they have created, they are also able to go to the email and password pages from here.
Update Email Page: Users are able to add multiple email address or remove old ones.
Update Password Page: Members can reset their password or use the forgot password feature.
Delete Post Page: Users can delete their own posts, users are brought to this page to confirm that they want to delete a post so they cannot just accidentally remove one. Only a user or admin has the option to edit or delete their own posts.
Sigup, login / logout messages: Users are either redirected to the home page currently or the page they are using refreshes without a success message. I would be a better user experience for the user to get feedback about the action they just completed.
View liked posts / save posts in profile page: Adding the functionality to either view posts a user has liked or to save posts with a separate function would be great for user experience so they can revisit posts they have liked easily.
Interact with other users: This would take some time to implement, but i it would be great for users to be able to visit another user's profile without having the ability to change their settings. Users would be able to keep up to date with someone else's posts, a follow button to make this easier also.
Keeping the site simple and easy to use is key. As the demographic is a very wide age group it is likely some users will not be very familiar with using complex sites it, requiring only the most essential information from the user is crucial with forms, navigation should be easy to see and understand. There is plenty of space so posts and information doesn't overlap and become confusing.
Amatic SC - used solely for the logo to stand out from the rest of the site Cormorant Garamond - the main text, easy to read with some style. This font style works well with a wide variety of other fonts. Smooch Sans - used for the navigation text to differentiate it from the main text and give some variation throughout the site.
The colour usage is very simple, this is deliberate as the posts should be the most appealing part of the site and must accommodate for a wide variety of colours and styles. The colour mostly comes from the choice of banner pictures, naturally this includes a lot of greens, these pictures change from the home page, add post page and the login - log out pages to give the user a visual cue.
The large white space is given some definition by the navigation bar as it is coloured in a light grey, bootstrap also provides button colours such as success (green), warning (yellow) and danger (red). The green fits the theme of the site much better than the standard primary button color, the warning yellow is not too bright and gives the user an indication they are doing something they may not mean with the more vibrant red.
Create base index HTML and CSS page
- The Site User and Site Admin are able to view the main page which will allow them to see the contents of the site.
Connect Project to Heroku and Django
- Before the Site User or Site Admin is able to access the site it will need to be linked with Django so other elements can be implemented and Heroku so we know the site can be deployed without issue.
View Posts
- The Site user and Site Admin are able to view a list of created posts] which will allow them to open the post to view the contents.
View Post Content
- The Site User and Site Admin are able to open a post from the Home page and view the content which will allow them to read the post in its entirety.
Create Add Post page
- The Site User and Site Admin are able to view the add post page which will allow them to create a post from the site once functionality is added. This will be designed with a mobile first approach
Allow Admin to approve / reject posts
- The Site Admin is able to approve or reject posts which will allow them to remove inappropriate content.
Implement Database Model
- Build database model and implement into models.py file
User / Admin can edit or delete post
- The Site user / Site Admin are able to edit or delete any post they have created which will allow them to edit any errors / update content or remove posts they no longer want to share.
Allow Users to Comment on posts
- The Site User is able to leave a comment on a post which will allow them to engage with the post and other users.
Allow Admin to Approve / Disapprove Comments
- The Site Admin is able to approve or disapprove comments which will allow them to filter out inappropriate comments.
View Post Comments
- The Site user is able to view approved comments on a post which will allow them to read other user opinions on the topic.
Allow Users to Create Account
- The Site User is able to create an account which will allow them to like and comment on posts.
Allow Users to like posts
- The Site user is able to like a post which will allow them to show their interest in a post.
View Post Likes
- The Site User and Site Admin are able to view how many likes a post has which will allow them to quickly see the popularity of a post.
View Post Likes
- The Site User and Site Admin are able to view how many likes a post has which will allow them to quickly see the popularity of a post.
Upscale Pages to Desktop
- The Site User and Site Admin is able to view the desktop layout for each page which will provide them with a better desktop experience.
Create profile Page
- The Site User and Site Admin is able to view the profile page which will allow them to view their created and liked posts once functionality is added. This will be designed with a mobile first approach.
Started with basic models for the user which will be handled by Djangos all auth, the post and comments models. The basic needs of the site user will be to register, login, logout, create posts, like and comment on others and have a profile page to store their information. Most of this can be done with only a few models.
User Test Model
Post Test Model
Comment Test Model
Final Database Model
The final model was created on dbdiagram.com
Testing section is located here
-
Create git repository from Code institute template
-
Install required modules:
- pip3 install Django==3.2 gunicorn
- pip3 install dj_database_url psycopg2
- pip install cloudinary (this is to store images for Heroku)
- pip install dj3-cloudinary-storage
- pip3 install django-allauth
- pip3 install Django-crispy-forms
- cp -r ../.pip-modules/lib/python3.8/site-packages/allauth/templates/* ./templates
-
add to requirements.txt using (pip3 freeze —local > requirements.txt)
-
create project using Django (this will be called gardengnome) with command django-admin startproject gardengnome .
-
create app (this will be called blog) using command python3 manage.py startapp blog
-
add blog to installed apps in settings.py
-
migrate changes using python3 manage.py migrate (you should be able to view the django installed app succes page when runng the server using python3 manage.py runserver)
-
Go to Heroku.com
- Open account and create new app by clicking 'new'
- In Deploy tab click connect to Github, search for correct repo
- Enable automatic deploys (this is optional)
- In Resouces tab search for Heroku Postgres and add, this will give you your DATABASE_URL which can be found in the settings section under Config Vars
-
Back in git create create an env.py file, import os and add the postgres DATABASE_URL key
-
add a SECRET_KEY variable to env.py with a random key, back in Heroku add this to config vars - you will need to put SECRET_KEY in the key section and the random key in the value section, then press add
-
We need to reference the env.py file in the settings.py file, in settings.py import os and import dj_database_url, then reference the env.py with an if statement
-
update SECRET_KEY in settings.py or add it if not already present
-
Go to DATABASES section in setting.py and set default to BATABASE_URL - the database will now be connected correctly with Heroku (this will be adjusted later but for now this will be fine)
-
Migrate with python3 manage.py migrate
-
Open Cloudinary account if you do not already have one, on the Dashboard there will be a API Environment Variable, click the copy to clipboard icon in the bottom right hand corner
-
Paste into the env.py file, following the format for the other keys seperate CLOUDINARY_URL as the key nmae, remove the '=' and use the ramaining part as the key value
-
Copy the Cloudinary url key name and value into config vars on Heroku as with the SECRET_KEY
-
Add DISABLE_COLLECTSTATIC to Heroku with the value set as 1 - this is required as there are no static files at present and will be removed later in the project
-
In Settings.py connect Cloudinary database
- Add cloudinary_storage to INSTALLED_APPS above django.contrib.staticfiles
- Add cloudinary to INSTALLED_APPS underneith
- under STATIC_URL add these lines
- STATICFILES_STORAGE = 'cloudinary_storage.storage.StaticHashedCloudinaryStorage'
- STATICFILES_DIRS = [os.path.join(BASE_DIR, 'static')]
- STATIC_ROOT = os.path.join(BASE_DIR, 'staticfiles')
- DEFAULT_FILE_STORAGE = 'cloudinary_storage.storage.MediaCloudinaryStorage'
- under Build paths section add TEMPLATES_DIR = os.path.join(BASE_DIR, 'templates')
- in TEMPLATES section add TEMPLATES_DIR as the value to the key 'DIRS':
- in ALLOWED_HOSTS section add the Herolu app name and .herokuapp.com to the key value and localhost - this app's key will be ['garden-gnome-blog.herokuapp.com', 'localhost'] as an example
-
Cretae Media, static and templates folders in the top level of our project on git
-
Create a Procfile (must use a capital P) for Heroku to read
- add web: gunicorn gardengnome.wsgi to Procfile
-
Recently Heroku had suspended automatic deployment so users will need to push directly from git using git push heroku main. You may have to reconnect the repo to Heroku in which case go to Deploy, at the bottom will be the Deploy a GitHub branch section, input Main and press Deploy Branch.
Useful websites and tutorials:
- https://djangocentral.com/building-a-blog-application-with-django/
- https://www.youtube.com/watch?v=B40bteAMM_M&list=PLCC34OHNcOtr025c1kHSPrnP18YPB-NFi&ab_channel=Codemy.com
- https://www.samuelliedtke.com/blog/implement-comment-system-blog-application-django/#views
- https://vegibit.com/slug-based-routing-in-django/
Bootstrap:
- https://www.youtube.com/watch?v=qNifU_aQRio&ab_channel=AdrianTwarog
- https://getbootstrap.com/docs/5.0/examples/pricing/
- https://getbootstrap.com/
Django All Auth:
HTML CSS Python Javascript
Django Bootstrap
Heroku Cloudinary
asgiref==3.5.0 cloudinary==1.29.0 dj-database-url==0.5.0 dj3-cloudinary-storage==0.0.6 Django==3.2 django-allauth==0.49.0 django-autoslug==1.9.8 django-crispy-forms==1.14.0 django-summernote==0.8.20.0 gunicorn==20.1.0 oauthlib==3.2.0 psycopg2==2.9.3 PyJWT==2.3.0 python3-openid==3.2.0 pytz==2021.3 requests-oauthlib==1.3.1 sqlparse==0.4.2 whitenoise==6.0.0
pexels.com googlefonts.com fontawesome.com dbdiagram.io
All pictures were taken from the open source site Pexels https://www.pexels.com/