This is a proverbs website created in Django as a 4th portfolio project for the Full stack Software Develompent course from Code Institute

A proverb is a simple and insightful, traditional saying that expresses a perceived truth based on common sense or experience.

Whitehair website is designed to be the place where anyone can join to share and enjoy proverbs from all over the world

1. UX
   • User Stories
   • Wireframes
   • Database schema
   • Style and colours
2. Features
   • Existing Features
     • Proverb
     • List of all proverbs
     • Add proverbs
     • Manage own proverbs
     • Navigation
     • The footer
     • 404 and 500 error pages
     • Site admin
   • Future Features
     • Favorite proverbs
     • Other future features
3. Technologies Used
4. Testing
5. Deployment
6. Credits

Whitehair website was created using a Design Thinking and Agile approach.

For the Agile methodology GitHub Projects was used as a kanban board. The user stories were added as issues, prioritised and automated to move to "To Do" column in Whitehair project. The issues are assign to the contributors (or contributor) and can be commented on.

In "To Do" column individual task cards with subtasks checkboxes were also added to better keep track of the project's workflow

From "To Do" column the cards were moved to the "In progress" column based on current tasks

From "In progress" column, the cards were moved to "Done" column when the tasks were finished and tested

At the end of the project the issues can be closed. The remaining issues, if there are any, can be reassesed and relabeld (as future feature for example). In this project, the issues were not closed to be able to be used as proof of work.

The user stories below were used as a guide to complete this project. Other user stories labeled "Should Have" were created but they were not implemented at the time of submission.

As a new user:

• I can view a proverb so that I can read it and enjoy it
• I can click on a proverb so that I can see the meaning
• I can view a list of proverbs so that I can choose one to read
• I can register an account so that I can interact better with the website

As a registered user:

• I can create, read, update and delete proverbs so that I can contribute to the website content

As site admin:

• I can log in with all permissions so that I can manage both users and proverbs

Back to top

The wireframes were created in Balsamiq. They were used to set an impression of how the website should look. Only 3 basic wireframes were made for home page, login and proverbs because other use simple forms or they have a simple style.

Back to top

A PostgreSQL database was used with one custom table "Proverb" and Django's "User" table.

Content field is for the proverb's content and has a max 200 characters to accomodate longer proverbs. They are usually short but the longest found was around 150 characters. This field is Unique

Upon Django doc research a custom id was not created, instead the autogenerated one was used.

The author field id Foreign Key and is Django's User's username. After some bugs the field was set as not editable. Logic set its value in app.

Back to top

Whitehair website uses minimum styling and colours and it had no images at the time of submission.

Materialize classes and features were used to generate the look and the colours of website.

Back to top

• Proverb

Whitehair's homepage contains a randomly generated proverb in a Materialize collapsible accorion popout. On hover the cursor changes to indicate an action. On click Collapsible's body appears to show the meaning of the proverb.

Back to top

• List of all proverbs

This feature display for user a list of all proverbs in a Materialize collapsible accorion popout. If the user is logged the list adds buttons for CRUD operations.

Back to top

• Add proverbs

If the user is logged a new menu item "Add proverbs" apperears. That leads to add proverbs page. Here a user can add his own proverbs in a ModelForm rendered as a Materialize form. The author field is missing here, but logic was implemented so that the curent user is added as author. User friendly lables were used in this form.

Back to top

• Manage own proverbs

If the user is logged the list of proverbs adds buttons with font awsome icons for CRUD operations. Here the user can edit or delete his own proverbs.

The pencil button leads to a prepopulated edit form.

The bin button deletes the proverb and leads the user to the main page.

On deletion there is no feedback or warning. A modal was considered to remind the user that this is a permanent delete from the database, but at the time of submission this functionality was not added yet.

Back to top

• Navigation

A Materialize mobile collapsible navbar was used with limited options for an unregistered user.

When the user is logged in extra options apper in the menu.

On small screens the navbar changes into a sidebar menu with a burger icon.

Back to top

• The footer

Whitehair website has a simple sticky footer with a disclaimer. More content (like social media icons, misc info or forms) can be added to the footer, but it wasn't used in this proverb as it's behind the scope of this project.

Back to top

• 404 and 500 error pages

404 and 500 pages were added to the project to guide the user in case of problems. The design of this pages is very simple as it wasn't considered important for this project. More important is The method to implement this pages in Django.

404 page

500 page

Back to top

• Site admin

Django admin was used in this website with no customisations.

• Favorite proverbs

This was initialy priritised as must have, however at the day of submission it was not implemented, so it was reprioritised as should have.

The heart icon was left intentionally. A link to comming soon page can be implemented.

Back to top

• Other future features

  • categories (coding, animals, love, military, family, wise and many more)
  • languages
  • share button
  • admin approved proverbs

Back to top

• Django framework used to build the project
• Python used to write all the code
• javascript used to initiate materialize components
• CSS used for custom styling
• HTML used for creating templates
• Materialize used to style the project
• Font Awesome used for icons
• Chrome Dev Tools used for manual testing and responsiveness
• GitHub used to host repo
• Git used for version control
• Gitpod used as IDE
• Heroku used for deployment
• Draw.io used to create ERD
• Cloudinary used to store static files
• Icon8 used for favicon
• AmIResponsive used for responsive image mockup
• PostgreSQL as database

Back to top

Testing was done manually. Chrome Dev Tools was used extensively first to see how everything looks (positioning and styling) and for responsivness.

Whenever there were errors in code I would Chrome Dev Tools was used for debugging.

• A 500 error

On the home page a random id was used to generate a random proverb on each refresh. The initial logic used random method on an integer set from 1 to max number of records. This worked up until proverbs were modified or deleted.

The logic was changed by generating a list of real ids and randomize that

• Static files not loading in local workspace

This was fixed with the help of Tutor Assistance. Thanks Ger and Sean

• Materialize forms

There was an issue with Materialize forms not loading properly. Upon Google research Django-materializecss-form was installed and used to fix this problem.

• ModelForm Issue

There was an issue with rendering the ModelForm in a sense that the primary key author could not be removed from the model form. This allowed the user to select a different user as author. Upon Django doc research the author field was set as uneditable and the author was set from logic as the current user

• Other issues

Django fought back every step of the way so extensive Django doc and Google research was necessary. This delayed the project unexpectedly.

Back to top

The project's repo was hosted on GitHub and it was deployed on Heroku, because GitHub Pages can only handle front-end files.

• Create a Heroku app
• Attach the PostgreSQL database
• Prepare environment and settings.py
• Set up Cloudinary for static files
• Connect Heroku To GitHub
• Set up automatic deployment

Back to top

Code Institute's Gitpod full template was used to to create this project.

Code Institute's walkthrough projects "Hello Django", I "Think therefore I blog" and the Flask walkthrough app.

Thanks to my mentor for help, suggetions and time

Thanks to Ger and Sean from CI Tutor assistance for help with static files not loading

Thanks to my family, friends and peers for suggestions, reviews and feedback.

Back to top

Disclaimer: This project is for learning purposes only