View the live project here.

Ribbit is a discussion website where users can post and discuss about whatever they want. People can find new information, inspiration and people.

• User experience (UX)
• Design
• Wireframes
• Features
• Testing
• Technologies used
• Deployment
• Credits
• Acknowledge

• To make a fully functioning website where users can discuss whatever they like.
• Allow users full control over their discussion, with options to edit and delete.
• Users can up and down vote discussions and create comments.

• I want to be able to read discussion and comments
• I want to be able to filter by a category

• I want to be able to create my own discussions
• I want to be able to comment on other discussions
• I want to be able to up or down vote a discussion
• I want to be able to edit my discussions
• I want to be able to delete my discussions
• I want to be able to edit or delete my comments

• Be able to manage all discussions and comments
• Be able to edit categories
• Be able to add futher categories
• Be able to delete discussions, comments, categories and users

• Images are able to be uploaded by registered users. There is no theme, or stlye however if a user doesn't choose an images
  a basic frog is displayed to fill the space.

• I used a mix of green throughout the page to stick with the theme of a frog(hence the name Ribbit)

• For my body and p elements, I used: Montserrat with a weight of 500. As this is a clean and easie to read font

• For the head elements, I used: Raleway with a weight of 400 as this again was a clean font.

• Home page

  

• Opened discussion

  

• View on phones and tables

  

• Sign in page

  

• How the user can use the site if the are signed it or not

• On the Nav bar you are able to go back to the home page, view by category and if you are signed in you can:
  • Create a new discussion and logout.
• If you aren't signed in you can login or sign up for an account.

• The footer doesn't change based on if you are signed or not, and it contains links to social platforms and copyright.

• The card is general information about the discussion, which contains:
  • featured image
  • title and exsert
  • author and category
  • date of creation and up and down votes
• The aim of the card is to give users an idea about the discussion before they click on it.

• The page paginate a 12 cards to stop user having to scroll for a long time.

• At the top of the page is the title of the discussion
• Following this is is the feature image, if the user doesn't us a picture nothing will be displayed.
• After this is the general information about the post like: author, creation, up and down votes.
• Next is the body/main area for the discussion.
• Last is the comment section, where you can read other peoples comments and comment yourself.

• The category page allows user's to view post by there category.
• This can make it easier for user's to find discussions they are interested about.
• The categories are displayed in the same way as the home page in order to keep a consistant style and make it easy for the user to navigate through.

• Having a separate page for all your discussion makes it easier to find, edit and delete them, this is important because a user doesn't want to have to scroll though other discussion in order to get the theirs.

• Being able to edit or delete a discussion or comment is important as a user may need to update a discussion to contain new/ correct information.

• As a Login user, if want to make a discussion I should have a clean simple way to do so. That's why adding a discussion is right on the nav bar and opens a simple form for users to create their discussion about whatever they want.

• The sign up and and other pages have a simple clean look in order to keep it easy to get logged in or sign up.

• More filters such as:
  • Number of votes
  • Discussions you have liked
• A search box to look for a specific disussion
• User profile page

• When testing in different browers I wanted to make sure all feature and style look and functioned the same. This is important so that the user can have the same experience on any different brower. I tested that the page opens and works in browsers: Chrome, Edge, Firefox,and Bing. To test the different browsers I used my computer to test Chrome, Edge, Firefox, and bing

• I tested that this project is responsive, keeps a consistent style, function as intended and looks good on all screen sizes. To make sure my site worked on different devices I loaded the page on an iphone XR, 13" laptop, 15" laptop and my PC which is displaying to a 24" monitor. To test my site on my screen sizes I didn't have I used dev tools.

• I want to be able to read discussion and comments
  • As a site user I can read discussions and comments
• I want to be able to filter by a catagory
  • As a site user I can filter by a category

• I want to be able to create my own discussions
  • As a registered user I can create my own discussions
• I want to be able to comment on other discussions
  • As a registered user I am able to comment on other discussions and my own
• I want to be able to up or down vote a discussion
  • As a registered user I can up or down vote a discussion
• I want to be able to edit my discussions
  • As a registered user I can edit my discussions
• I want to be able to delete my discussions
  • As a registered user I am able to delete my discussions
• I want to be able to edit or delete my comments
  • As a registered user I can delete and edit my comments

• Be able to manage all discussions and comments
  • As the site admin I am able to manage all discussions and comments in the admin panel
• Be able to edit categories
  • As the site admin I am able to update discussions, comments and categories
• Be able to add futher categories
  • As the site admin I am able to add more categories
• Be able to delete discussions, comments, categories and users
  • As the site admin I am able to delete discussions, comments, categories and users

• HTML

  • No errors were found when passing through the official W3C validator.

• CSS

  • No errors were found when passing through the official (Jigsaw) validator.

• Javascript

  • No errors were found when passing through the JSHint validator.

• Python

  • No errors were found when passing through the PEP8 validator.

• Accessibility

  • I used lighthouse to confirm the site accessibility was as high as possible.

1. The signup form:

   • The user must input a user name
   • The users password must contain at least 8 characters and the password is not too common. This is accomplished using allauth and its built in validation

2. Adding a discussion:

   • The user must be sign in
   • The discussion must have a title that is unique.
   • The discussion must contain Content. The user is checked using djangos built in {% if statements %} This discussion requirements are set in the discussion class in the models.py file

3. Edit and delete a discussion or comment:

   • The discussion or comment must have been created by the user in order for them to be able to edit or delete them. The user is checked using djangos built in {% if statements %}

4. Deleting

   • Nothing can be deleted in one click. This is done using a model from bootstrap that is activated when a user tries to delete something

5. Up or down voting a discussion

   • The user must be signed in
   • The user can only up or down vote a discussion This is done with True and Flase statments in the views.py file

• When Adding an email to the sign up form it would cause a 500 error.
  • Fixed by adding: EMAIL_BACKEND = 'django.core.mail.backends.console.EmailBackend' ACCOUNT_EMAIL_VERIFICATION = "none" to settings.py
• Delete modal would cause padding to be added to the right side of the screen.
  • Fixed by adding: padding-right: 0 !important to styles.css

• None

• HTML5
• CSS3
• Javascript
• Python

• Django

• Allauth

• Gunicorn

• Cloudinary

• PostgreSQL

• Summernote

• Heroku

• Gitpod

• Git

• GitHub

• Balsamiq

• Lucidchart

• Google Fonts

• Font Awesome

1. In a new workspace in the terminal type: pip3 install django gunicorn
2. Libaries need for PostgreSQL: pip3 install dj_database_url psycopg2
3. Create requirments.txt: pip3 freeze --local > requirments.txt
4. Create a new django project: django-admin startproject pojectname .
5. Create a new django app: python3 manage.py startapp appname
6. Add your new app the the projects installed apps: projectname > settings.py > scroll to INSTALLED_APPS > add 'appname', to the list
7. save the file
8. Now back to the terminal to migrate the changes: python3 manage.py migrate
9. Run your project: python3 manage.py runsever
10. And you're up and running just like that!

1. Create a new app on heroku
2. Head to the resources tab on your new heroku app
3. In the add-ons box search: Heroku Postgress and add it to your project
4. Now head to your settings tab and click on Reveal Config Vars
5. Copy the DATABASE_URL and head back over to your project
6. In the same level as your project create an env.py file (Remeber to add this to your .gitignore)
7. In env.py import os
8. Then: os.environ["DATABASE_URL"] = "Your copied DATABASE_URL"
9. After that create your secret key: os.environ["SECRET_KEY"] = "Your random secret key"
10. Save the file and then copy the secret key
11. Back at your heroku app Config Vars add the key: SECRET_KEY and the value: Your copied secret key
12. Back in your projects settings.py file under the first import
13. import os, import dj_database_url
14. The add the if statement: if os.path.isfile('env.py'): import env
15. Now just under that replace the insercure key and replace it with = os.environ.get('SECRET_KEY')

1. In setting.py file scroll down to the Database section and comment it out
2. Then type: DATABASES = { 'default': dj_database_url.parse(os.environ.get('DATABASE_URL')) }
3. Now back to the terminal and run the migrate again:(python3 manage.py migrate)

1. Create a Cloudiary account(if you dont have one all ready)
2. Copy your API Environment variable:
3. Now back to your env.py file: os.environ["CLOUDINARY_URL"] = "copied API key"(make sure you remove the CLOUDINARY_URL from that start of the key)
4. Copy the key again and head back over to your heroku app
5. Add a new Config Var: key= CLOUDINARY_URL value=copied api key
6. Add new another Config Var: key=DISABLE_COLLECTSTATIC value=1 (This is to get the project deploying as we dont have any static files yet)
7. Back to the settings.py file, INSTALLED_APPS add: 'cloudinary_storage'(just above 'django.contrib.staticfiles'), 'cloudinary'
8. Now near the bottom of the file under STATIC_URL = '/static/' add: STATICFILES_STORAGE = 'cloudinary_storage.storage.StaticHashedCloudinaryStorage' STATICFILES_DIRS = [os.path.join(BASE_DIR, 'static')] STATIC_ROOT = os.path.join(BASE_DIR, 'staticfiles')

MEDIA_URL = '/media/' DEFAULT_FILE_STORAGE = 'cloudinary_storage.storage.MediaCloudinaryStorage'

1. Back at the top of the settings.py file under BASE_DIR add: TEMPLATES_DIR = os.path.join(BASE_DIR, 'templates')
2. Then in the middle of the file in TEMPLATES change the 'DIRS':[TEMPLATES_DIR],

1. In the settings.py file in ALLOWED_HOSTS and ['your heruko appname.herukoapp.com', 'localhost']
2. Now on the top level of your project create 3 folder: media, static and templates
3. Then create a file named Procfile
4. In the Procfile add the line: web: gunicorn ribbit.wsgi

1. First In your terminal: git add . git commit -m 'Deploy' git push
2. Now back to heroku and click on the deploy tab
3. Deployment method: GitHub (Connect you account id you haven't already)
4. Search for you project repo and connect it
5. Scroll to the bottom of the page and click deploy.
6. Then click on open app and you're Done!

Forking the repository allows us to have a copy of the original repository to view and make changes on our GitHub account with affecting to original work. Forking a repository can be done with the following steps.

1. Log in to GitHub and locate the GitHub Repository
2. At the top right of the repository above settings, find and click the fork button.
3. You will now have a copy in your account.

• Codemy
  • Help with displaying discussion, custom forms and add discussion page.
• CodeInstitue
  • Help from think before I blog walk through: Setting django app up, deploy to heroku, cloudinary, basic stlyes and allauth.
• Stack overflow
  • Help with various bugs
• Pexel
  • source of all stock images.

• My Mentor for feedback throughout the project.
• Friends and family for help with testing and feedback