Damsel in dior is a blog dedicated to all things fashion! It gives users a chance to keep up to date with the latest syle gossip and get outfit inspiration from the lookbook. Users can interact with the post and each other by giving an opinion in the comments section.

1. As a site user i can look at a paginate list of blog posts / images so that i can choose which one i want to look at.
2. As a site user i can see the date that a blog post was made so that i can keep up to date on current trends and read the most up to date blog posts.
3. As a site user i can click on a selected post so that i can read the blog post.
4. As a site user i can comment on a post so that i can be involved in the conversation and offer my opinion.
5. As a site user i can view comments on posts so that i can see other peoples opinions.
6. As a site user i can see what items are trending so that i can keep up with the latest trends
7. As a site user i can register for an account so that i can leave comments on posts
8. As a site user i can sign in to an excisting account so that i can comment on posts
9. As a site user i can sign out of my account.

1. As a admin i can approve comments so i can make the blog a safe place for all users
2. As a admin i can draft blog posts so that i can draft a post before i want to post it
3. As a admin i can edit, view and delete post so that i can change anything that maybe needed or delete the post.

In order to help me achieve my goal of creating a working blog that was easy to read and use, i spent time researching other fashion blogs. This was really helped me on deciding what feautures i wanted to impliment and gave me an idea of what i did not want from a blog. I have credited the blogd that gave me inspiration in the credits section.

My main aim was to create an easy to use blog where like minded individuals can share and find fashion related news, tips, advice etc. Finding your own style is difficult, this blog will help someone who is looking for a new style to explore not only what is trending but other people style. There is nothing worse than when you see someone on instagram in something you love but can not find it online. This is where the idea for the lookbook came from.

• Roles

  • Admin
  • User

• Demographic

  • Fashion lovers
  • People who are looking to expand their style
  • People who are wanting inspiration

• The website needs to let users be able to:

  • Create and set up an account
  • Comment on a post

• The website needs to let admins be able to:

  • Approve comments
  • Draft and Publish posts

• I went for a minimalistic design as i personally find that blogs can be very overwhelming if there is too much resent expecially on the home page. Due to this i decided to keep it very basic as to not overload that page. I choose to only have 4 blog posts presents on the home screen to ensure that users can find the most up to date post as soon as they load up the blog.

• I stuck to a very basic colour pallet to keep the blog clean. I went for black and white as these are contrasting colours and used #ccd5ae as a accent colour. I used the accent colour for the header and footer so that they stand out from the rest of the blog. I also used this colour for thing that are underlined to give it a contrast from the text colour.

• I went for a very clean cut font to go with the minimalistic design. I went with Open Sans for the body text as this is a very clear font that sint too thick that it gets mixed up with a header. For the headers i went with Oswald this was due to it beign a thicker clean cut font. It is easy to read and contrasts with the body font.

• For my home page imagery i choose to go for a mix of product images and runway images. I then added a distored background in order to make the main image stand out and to add some more colour and interest to the homepage. By distorting the image and using it as the background the colours match the images perfectly i then added a noise filter on top of it so that the main image stands out.
• The images for the whats hot section i decided to keep very basic as to not distract from the product.
• Lookbook images are all my own images, i choose these as you could see the outfit fully which is the goal of the page.

The navigation bar is there to help users get around the site easily. This is always at the top so that views can always use it. The navigation bar is fully responsive and when it shriks it goes into a collapsable nav bar. This is great for moblie users. The menu also changed depending on if the user is logged in. If the user is not logged in the nav bar will show 'register' 'login'. Once the user is logged in the nav bar will change to 'logout'.

The footer is showed through out the entire sit, it has links to social media sites so users can keep up with whats going on on various different platform linked to the blog.

Before users see the post they will see a home page header, this hows this site name with some images that help show a variety of different items giving the user an idea on what the site is about.

Blog post cards are shown on the home page, this is due to it beign the main focus of the blog. The 4 most recent posts will show if there are over 4 post the page will paginate and add a next / previous button. The user then has the option to select what post they want to view. Each post has an image on the front that is a reference to what the post is about. I chose a colourful background to add something more to the page, this will also help catching the attention of the user making them want to intereact with the post. I also added a title that on hover/ click has a line animation underline the text, this lets the user knwo where on the page they are looking at and helps highlight the post more.

All blog posts follow the same layout in order to keep the site uniformed and make it easier for the user to navigate. The title, date and creater are at the top of the page, this shows the user when and who it was posted by before they continue reading.

Blog posts can be edited by the user who posted them, this gived them the ability to change or delete the post from the front end of the blog

![Delete Post]("Delete Post") ![Edit Post]("Edit Post")

This is an image slider that showcases products that are currently on trend / popular that users may be intrested in. If a user likes an item it will taken them to a website that sells the product. I decided to impliment this feature as there is nothing worse than loving a product on a blog and not being able to find where it is from! The swiper also adds an interactive feature to the page.

The lookbook showcases a variety of different images of outfits, this way the user can just browse though for inspiration with out having to click anything. If the user would liek to know more they can click the image and it will take them to a blog post that has all the outfit details. Giving them the option to find where any items are from.

These are present for users who would like to know the outfit details for anything posted via lookbook. It follows the same structure as the blog post so that it is easy for users to navigate.

Both the blog post and lookbook post have a comments section at the bottom that those who are register can use to leave comments. This feature makes it so that other users have a way to communicate. This also opens up a disscusssion about the post and can help offer stylign tips/ hacks. The comments need to be aproved by an admin, i have done this so any comments that are no appropraite can be declined. This will help keep users on the site safe.

This feature allows new user to register for an account so that they can leave comments on posts.

This allows users to log into their accoutn so that they can comment on posts

This allows users to sign out of their account, it asks for conformation incase they ahve accidentslly clicked the signout button

Going forward i would like to add in a feature so that users can upload images to the lookbook page, that way the lookbook page become a community page where people can upload images and give others feedback on an outfit that has been posted. This will be the equivilent of sending outfit pictures to your friends! This would be a great way for users to interact with each other and gain style tips and inspiration.I would then tie this into a profile page so that users can manage what images / comments they have posted and edit any information such as an email or password. This would give users the option to add and remove any images they no longer want avaliable with in the lookbook.

• HTML
• CSS
• Javascript
• Python
• Django
• Cloudinary
• Font Awesome

All parts of the nav bar work as expected and is responsive on all screen sizes. The Hover effect change to on click events on mobile devices. On smaller devices the nav bar collapses to the right hand side, once clicked it drops down to show all items on the menu. ALl links and animations work as expected on all devices.

The footer works as required all links are take you to a new page when clicked as expected. The icons stay centeral on all size devices.

I have tested the home page while working on the project. All animations and tranformation work as expected to the time frame expected. All the home page links take you to the expected place and do not bring up any errors. The blog posts are responsive as expected they shink down to an appropriate size depending on the device you are on.

I found no issue when testing the slider, it works as needed with out any flaws. The images slide at the correct timing and both the next and previous button work with out any issues. the slider can also be dragged if you are wanting to go through a few images at once. All of the image link as required and open up on a new tab so that the user dosent have to leave the blog site.This all works as needed.

To test this i added test post to ensure that that buttons showed where i needed them and worked efficiently. This worked as ecpected and it push the older post to the next page and add the new post at the front. I decided to add this feature so that if the blog was to progress and more posts were to be added they are accomodated for.

I tested the lookbook through out the project to ensure that any issues could be sorted as i was creating the page. All links, animations and transformations work as expected. The page is responsive and shrinks down to the correct size depending on the device.

The login function all works expected. I performed the follwoing tests:

• Logged in with an incorrect username

• Tried to log in with a incorrect password

• Tried to log in with a username and password that has not been registered These all returned by not letting the user sumbit the form.

• Checked the remember me button and then logged out and went back to the sign in page

I performed mutiple different actions to ensure that the register function performed as expected. This included:

• Using an invalid email address that does not contain and '@' sign
• Using a username that has already been signed up
• Using a password that is too weak
• Trying to sumbit with missing information
• Trying to use a password that is too short
• Trying to use a password that dosent match These all return what was expected which was not letting the form be completed.

Everything on the sign out page function as expected and is responsive.

As expected the user can not submit a comment with out signing in first. The user will see a message that asks them to sign in or register to leave a comment i have tested all these links and they lead to the relevant pages.

Logged in I tested the comment section when users are logged in. This shows a form box. i tested the following:

• Clicking sumbit with an empty text field
• Leaving the page with out submitting the comment

Once comments are approved by the admin they can be seen on the post. i tested to make sure that admins had this abilty to both approve and decline comments.

I tested that this worked by creating mutiple test post under different logins to see if i could delete a post that was not created by that user. Once i was sure you could not delete anothers post i created a test post and signed in as the user to delete this. Everything worked as expected and it took the user back to the homepage.

I tested this by creating a test post and going inot it as the user who created it to edit it. I made changed to the title, contect and excert and saved it.Everything worked as expected it took the user back to the blog post with the updated change

All links work as expected across all the pages with out any issues. Those that are required to bring up pages in a new tab perform as needed. the link hover/ on click effects all work as needed.

All code was passed through w3c CSS validator testing with no errors. There was warning however these were from third party installments.

All code was passed thought a HTML check validator testing, it returned no errors

Bug - One issue i had was that when i was deploying it to heroku the CSS was not loading in.

• The solution - I changed Debug from True to False

Bug- Lookpook page not connecting after creation

• The solution - I had to add a url pattern in the urls.py file

Issues - I had an issue with my images being too large that it was slwoign the speed of the website down

• The Solution - To resolve this issue i put the image through tiny.png

I took the following steps to deploy my project to heroku, i also referenced the Django Blog Cheatsheet Before you begin ensure you have any libaries you may need installed

1. Login to Heroku and Create a new App

2. Name the app and selec the region closest to you - Note the app name has to be unique

3. Then press Create App

4. Go to the Resources tab (This can be found in your heroku tabs next to overview)

5. Once you are on the page search for Heroku Postgres in the search tab - This is your database

6. Go to the settings tab

• Important - If these steps are not followed your project may not deploy correctly.

7. Scroll down the page to config vars and the click on Reveal config vars.

• This is where you database url is stored, this is the connection to your database. This must be stored with in your env.py file. Your env.py file is added to your git ignore file due to it contiaining secret environment variables.

8. You will then need to create a secret key in the env.py folder.

9. Once you ahve done this you will need to add the secret key to your config vars on heroku.

10. When you have completed these steps go to your setting.py file and import the below:

• os
• dj_database_url
• if os.path.isfile('env.py):
  • import env

11. After this you will need to replace the secret key you have (Due to it being insecure) with os.environ.get('SECRET_KEY)that we set in the env.py file

12. When you have completed that go down to DATABASES. YOu will need to comment out the current code as this is not needed. Add the below code:

• DATABASES = {'default': dj_database_url.parse(os.environ.get('DATABASE_URL'))}

13. The next step is to connect to Cloudinary. This is where all the images will be stored.

14. Go to coloudinary and sign in, Once you have done this you will need to copy your API Environment Variable.

15. Add a new config var called CLOUDINARY_URL and paste in your API Environmant Variable

16. You will also need to add one more config var which is DISABLE_COLLECTSTATIC with the value as 1

17. Once you have added the config vars you will need to add the below to your settings.py file

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

  STATIC_URL = '/static/' STATICFILES_STORAGE ='cloudinary_storage.storage.StaticHashedCloudinaryStorage' STATICFILES_DIRS = [os.path.join(BASE_DIR, 'static'), ] STATIC_ROOT = os.path.join(BASE_DIR, 'staticfiles')

18. After this you will need to tell Django where the templates will be stored. You will then need to change the template directory variable to 'DIRS':

19. Then you will need to add in the allowed hosts into the settings.py file

• ALLOWED_HOSTS = ['YOUR-APP-NAME', 'localhost']

20. You will then need to creat a Procfile. This is so that heroku knows to run the project you will need to add the below:

• web: gunicorn app-name.wsgi

21. Once you have completed the above step you need to go to the deploy tab in heroku. From here scroll down to Deployment method section. Follow the instruction to deploy your project with Heroku

• Usually you can deploy your project by connecting it to github hwoever due to a breach they have suspended this.

22. When your project has deployed click the link in the terminal. This will bring you to your live deployed page.

23. Before you deploy for the final time you must ensure the below:

• Remove DISABLE_COLLECTSTATIC = 1 from the config vars
• Set debug to false

• I Used Atlantic Pacific and Hello fashion as inspitation for the style / layout of my blog
• I used code insitutes walk through for insallign all auth
• I used Django central for help when it came to setting up views
• I used bootstrap documentation to help me understand bootstrap 5
• I Used Legion Script to help me set up the edit and delete functionality

• I created all the home page images myself using custome backgrounds and images i got from the below places
  • The spring must have image is from The Face
  • The what im loving now image is from Celine the blazer image in the article is from Flannels
  • The designer gifts under £100 is from Burberry the images in the article are from Dior, Flannels, Vivienne Westwood
• All images on the lookbook page are my own images
• Images for the whats hot slider are from Flannels

• A big thanks to the front end team that i work with they have help inspired me and given me some great ideas on what features to impliment!
• Thanks a bunch to Daisy my mentor for keeping my calm during my panics and always believing in me!!!