SCENTRIC

Scentric is an imaginary perfume blog-like site, where users can find out about new, interesting perfumes or share their favourite perfumes with others. Place for those gentlemen who want to smell nice.

SCENTRIC live project here.

Table of Content

• Development process
  • Development Preparation
  • Agile Development
  • Git
• Features
  • Navigation Bar
  • Search
  • The Newest Perfumes
  • Perfumes List
  • Detailed Perfume View
  • Add Perfume
  • Registration
  • Validation
  • Login
  • Logout
  • Footer
  • 403 and 404 Page
  • Future Features
• Used Technologies and Tools
  • Django Apps
• Testing
  • Validation Results
  • Lighthouse Reports
  • Accessibility
  • Manual Testing
  • Fixed Bugs
  • Known Bugs
• Deployment
  • Deployment Preparation
  • Setup
• Credits
  • Content and Media

Development process

While planning the project I tried to follow an agile development approach as much as I could.

Development Preparation

When I set my mind to make blog-like site about perfumes:

• At first, I created wireframes for my site so that I can have visual idea of how I want my site to looke like.

  Home Page Not Logged In

  
  Home Page Logged In

  
  Perfumes Page

  
  Add Perfume Page

  
  Perfume Detail Page

  
  Registration Form Page

  
  Login Page

  

• Then I created ERD for my Perfume model, where FK represents ForeignKey from the build-in model:

  ERD for Perfume Model

  

• After that I've created the most of my User stories with appropriate labels, which can be found here: Scentric Project

• In terms of design, I went with pretty minimalistic look where whole site is in shades of black, white and grey. This contributes that radiant images of perfumes stand out even more.

Agile Development

• While developing, I chose one issue to work on from the "Todo" column of the MVP board and moved it into the "In Progress" column.
• After I was done with the issue by fulfilling all the acceptance criteria, I moved the issue into the "Done" Column.

Git

• I started the project by using the gitpod python template provided by the Code Insitute.
• Then I regularly staged my changes using the command git add . and then committed the staged changes to my local repository using git commit -m 'commit message text'.
• Finally, I pushed the commits to the GitHub repository using the command git push.

Features

Navigation Bar

• The navigation bar as well as footer are present on all of the pages.
• The Navbar contains Scentric Logo which is clickable and functions as a home page button. In the middle of the navbar we have Home Page, Perfumes Page, Register and Login page for the non authenticated users.
• At the right side of the navbar is search-box, used to find desired perfume revive.

• After user logs in, Add Perfume Page and Logout Page are being presented, as well as message giving feedback to the user about successfull authentication.

Search

• As mentioned search bar is present within the navbar and can be used to find specific perfume.
• It functions so that it will go through the Perfume Brands, Names, Top Notes, Middle Notes, Base Notes or Perfume Group and search for the given word.
• User will be taken to the Perfumes Page and if found perfume/s will be presented on the page.

The Newest Perfumes

• This feature is present at the home page, it presents three last perfumes being added to the site.
• Each one is presented with the image and name of the perfume.
• Perfume Images/Names are clickable and they are redirecting user to the detailed view of the given perfume.

Perfumes List

• Perfumes page is sort of a list of perfumes, present at the moment, with the last added perfume being at the top of the list.
• Each perfume on the list, is presented as a card containing:image, perfume brand, perfume name and beginning of the perfume description just to attract user to enter and find out more about the specific perfume.

Detailed Perfume View

• This feature is kind of enriched version of the previous one.
• Detailed Perfume View consist of: image, perfume brand, perfume name, concentracion,perfume group, top notes, middle notes, base notes and description.
• The look of the description depends on the user's imagination.

• In case that your are the creator of the perfume review(post), you will be able to see 2 additional buttons Edit and Delete. Thanks to them you will be able to update or delete your own posts.
• Edit button will take you to form to edit your post which is identical as the one to add perfume(post) to the site.

• Delete button will take user to the delete confirmation page. After pressing confirm, the perfume review will be deleted.

Add Perfume

• This page is presented to the authenticated users and it is a form for adding the perfume to the site.

• The form contains next fields:

  • Perfume Brand
  • Concentracion
  • Perfume Name
  • Perfume Group
  • Top Notes
  • Middle Notes
  • Base Notes
  • Perfume Image
  • Image Description
  • Description

• All of the fields are obligatory to be filled in.

Registration

• Registration/Signup page are pretty simple and easy to understand.

Validation

• All fields have to be filled in and in case the username is taken, or password is too common feedback mechanism will inform the user about it.

Login

• As mentioned to be able to post or edit/delete your Perfume review, you need to be logged in.
• Form is simple with a username/email line and password.
• User can choose if he wants to be "remembered".

Logout

• Logout/Sign out page is very simple, user needs to click the "Sign Out" button, after that he will be logged out and sent to the home page.

Footer

• Footer is also pretty minimalistic, having icons, presenting social networks links and name of the site, as well as trademark symbol.
• Links to the Social Networks are opened in the new tab, according to the UI/UX design.

403 and 404 Page

• Custom 403 Page is also there in case someone tries to delete something which does not belong to him.

• Custom 404 Page is also present in case someone tries to open non-existing page.

Future Features

• Adding comments to the site, where authenticated users are able to comment on other persons perfume review/comments.
• Adding rating system, where users would be able to rate other people perfumes.
• Add filters to the searching feature.

Technologies and Tools

• Django - Python framework
• Bootstrap - CSS framework
• Heroku - Deployment
• ElephantSQL - Database Provider
• Cloudinary - Image storage
• Black - Python code formatting

Django Apps

• django-crispy-forms was used to style the login and registration form
• cloudinary_storage and cloudinary was used as the image storage
• djrichtextfield for extra text-edditing options within forms

Testing

The W3C Markup Validator and W3C CSS Validator Services were used to validate the project to ensure there were no syntax errors in the project. CI Python Linter was used to validate all of python code.

• W3C Markup Validator
• W3C CSS Validator
• CI Python Linter

Validation Results

W3C-HTML


W3C-Jigsaw-CSS


CI Python Linter


Lighthouse Reports

Home Page


Accessibility

There were no accessibility errors found.

Wave WebAIM


Manual Testing

The site was regularly tested during development, and here are the cases of manual testing:

• Manual Testing Results

Fixed Bugs

• Bug 1:

  I had problem with style of the detailed view of the perfume while DEBUG was set to False in settings.py(deployed version too). I am not sure what exactly caused this.

  Bug 1 Image

  

• Fix 1:

  This was sorted with: setting DEBUG = True, runnig python3 manage.py collectstatic, resetting DEBUG = False. In the end I've pushed code to GitHub and redeployed again at Heroku.

  Fix 1 Image

  

Known Bugs

• At the moment there are no known bugs.

Deployment

The site was deployed to Heroku platoform.

Deployment Preparation

Before the deployment, the following steps were taken to prepare the application for the deployment on Heroku:

• The setting DEBUG in the settings.py was set to FALSE.
• All the dependencies were stored in the requirements.txt file with the command pip3 freeze --local > requirements.txt.
• The start command for the application web: gunicorn scentric.wsgi was stored in a Procfile.

Setup

The steps to deploy an app to Heroku are as follows:

• Create a new App from the Heroku dashboard.
• Enter a name for the app and select a region, then click on "Create App".
• On the page of the app that opens, go to the "Settings" tab.
• In Settings add the necessary config vars, for this project I added my cloudinary URL, database URL, and Django Secret Key.
• Next, add the buildpack "Heroku/Python".
• Afterwards, go to the "Deploy" tab on the app page.
• In the "Deployment method" section, select "GitHub" and follow the steps to connect Heroku with GitHub.
• Then, in the "Connect to GitHub" section, search for the repository that is supposed to be deployed and click on "Connect".
• The last step is to either:
  • enable automatic deployment by clicking on the button "Enable Automatic Deploys" in the "Automatic Deploys" Section.
  • deploy a branch manually by selecting the branch and clicking the button "Deploy Branch" in the "Manual deploys" section.

Credits

• I want to say to my wife:"Thank you for all your love and support. <3"

• I want to thank to my mentor Mitko Bachvarov for tips and suggestions.

Content and Media

• Django Recipe Sharing Tutorial was used alot as a guide and inspiration for this project.
• Fantastic News was used as a inspiration for the README file.
• Intro paragraph about the Scentric site is written by: ChatGPT.
• Most of the images and descriptions were "borrowed" from: Notino.co.uk.
• Icons used on the website are from: UXWING.