Wunderlust is a travel blog and community where anyone who loves to travel can view and share their travel stories. The content of the posts are based on places I have been lucky enough to visit and I wanted to include some of my highlights to draw the users in.

View the live project here

• As a Site Admin I can register a superuser account so that I can manage and interact with site content
• As a Site Admin I can create draft posts so that I can finish writing the content later
• As a Site Admin I can create, read, update and delete posts so that I can manage my blog content
• As a Site Admin I can approve or disapprove comments so that I can filter out objectionable comments
• As a Site Admin I can edit posts so that I can make changes to the post
• As a Site Admin I can delete posts so that I can remove them if I want to
• As a Site User / Admin I can view the number of likes on each post so that I can see which is the most popular or viral
• As a Site User / Admin I can view comments on an individual post so that I can read the conversation
• As a Site User I can register an account so that I can comment and interact with posts
• As a Site User I can leave comments on a post so that I can be involved in the conversation
• As a Site User I can click on a post so that I can read the full text
• As a Site User I can view a list of posts so that I can select one to read
• As a Site User I can like or unlike a post so that I can interact with the content
• As a Site User I can view a paginated list of posts so that easily select a post to view
• As a Site User I can update my profile so that other users can view my details
• As a Site User I can create draft posts so that I can finish writing the content later
• As a Site User I can edit posts so that I can make changes to the post
• As a Site User I can delete posts so that I can remove them if I want to
• As a site user I can upload photos so that include these in my post
• As a Site User I can delete my comments on a post so that I can remove these from the site
• As a Site User I can edit comments on a post so that I can make corrections to my comments
• As a Site User I can update my profile so that other users can view my details

I used GitHub Projects to create a Kanban board to manage the planning and implementation of the functionality I wanted to include in this project. Click here to see my project board.

I wanted to create a platform where users can share their travel stories and is aimed at anyone who has a love of travel.

• People who have been travelling
• People looking to go travelling
• Anyone with a love of travel

For the users I wanted to provide them with easy naviagation and a brief introduction to the site and eye catching images for the posts. The site has responsive design so should function correctly across various devices such as, Mobiles, Tablet, Laptop and Desktop.

This site has been designed with simplicity in mind, each page only has key information on it so that the user can find what they want quickly.

The wire frames were created using Balsamiq.

Mobile View

Tablet View

Laptop View

Whitsunday Island image can be found on Pixabay here

White Temple image can be found on Pixabay here

Angkor Wat image can be found on Pixabay here

Hoi An Lanterns image can be found on Pixabay here

Ha Long Bay image can be found on Vecteezy here

This is my own photograph taken whilst travelling.

Default Image

Adobe Color Extract Theme

The colours were chosen by using Adobe Color Extract Theme from an image of Whitsunday Island I found on Pixabay.

Contrast Grid - Eightshapes.com

Once the colours were chosen I used a contrast checker to decide which colour worked best for the Navbar and Footer with white text.

MyColor.Space

I also used colorspace to search for other shades that worked well with the Navbar/Footer colour #07668C and decided to use colour #A2E5FF for the main body background colour.

I decided to use ‘Pacifico’ for the Wunderlust branding and ‘Roboto’ and sans-serif for the remaining text.

1. HTML
2. CSS
3. Javascript
4. Python

• Google Fonts
• Font Awesome
• Balsamiq
• GitHub / GitPod
• Heroku
• Django
• Bootstrap
• Cloudinary
• Summernote

• The homepage shows the Navbar, About Section, Posts and the Footer

• The Navbar on loading shows Home, Register and Login

• The Navbar when the user is logged in shows Home, Logout and New Post

• The about section explains what this site is for

• The homepage shows 6 posts with the option to go to the next page if there are more than 6 posts on the site

• The footer shows the site name/brand and links to social media platforms which all open in a new page

• Shows the post title, author and date created/updated
• Shows the post image

• Shows the post content
• Shows the number of likes for the post
• Shows the number of comments for the post

• If the User is the Author of the Post they have the option to Edit or Delete their post

• When the User clicks on the Edit button they are taken to the form view so they can edit their post

• When the User clicks on the Delete button they are taken to another page to confirm deletion

• Show the Author, Date Created and the Authors Comments

• If the User is logged in they have the option to leave a comment

• When the user submits a comment a message will appear advising them that their comment is awaiting approval

• Takes the user to a form for them to create their post

• When the user submits their post they will get redirected to the homepage and a message will appear

• When the user clicks on Register in the Navbar they are redirected to a sign up page where they can enter their details to create an account

• When the user clicks on Login in the Navbar they are redirected to a sign in page where they can enter their account details
• When the user has signed in they are redirected to the homepage

• When the user clicks on Sign Out in the Navbar they are redirected to a sign out page to confirm if they want to sign out
• When the user confirms the sign out they will be redirected to the homepage

• Edit comments
• Delete comments
• User profiles

I have manually tested this project by doing the following:

• Run the code through the validators and confirmed there are no problems
• Testing the site from my gitpod workspace and my deployed site through Heroku
• I have also tested this site on my i-Phone, i-Pad and laptop

When the site is loaded the Navbar displays Home, Register and Login. The About Section is displayed with a Welcome to Wunderlust message and the posts are displaying correctly

When the user clicks on Register in the Navbar they are taken to a Sign Up page

After the user has registered they are redirected to the homepage and a message appears to confirm successfully signed in

When the user clicks on Log In in the Navbar they are taken to a Sign In page

After the user has signed in they are redirected to the homepage and a message appears to confirm successfully signed in

When the user clicks on Sign Out they are taken to a page to confirm sign out

After the user has signed out they are redirected to the homepage and a message appears to confirm they have be signed out

When the user clicks on a Post it redirects them to the posts detail page which displays the post content, likes and comments

If the user is signed in they can intereact with the post by pressing the like button or comment on the post

When the user has submitted a comment a message is displayed to say their comment is awaiting approval

If the user is the author of the post they can choose to Edit or Delete the post

When the user clicks on the Edit button they are redirected to the form view so they can edit the post

When the user clicks on the Delete button they are redirected to another page to confirm the deletion

When the post has been deleted they are redirected to the homepage and a message is displayed to confirm deletion

As a Site Admin I can create draft posts so that I can finish writing the content later

As a Site Admin I can approve or disapprove comments so that I can filter out objectionable comments

As a Site Admin I can edit posts so that I can make changes to the post

As a Site Admin I can delete posts so that I can remove them if I want to

• When the user submits a comment and the page reloads you have to scroll down to see the message "Your comment is awaiting approval"

• When the user edits a post the bootstrap class properties appear in the content box, this has also been flagged in the HTML validator testing for the post_detail page

• I was having trouble getting the delete function to return to the homepage, I found the solution on Stackoverflow here

• The delete success message was also not displaying and I found the solution on Stackoverflow here

• When the user created a post the image upload function was not working, after speaking to Code Institute Tutor Support the solution was to include an enctype attribute in my form <form method="POST" enctype="multipart/form-data">

• I was also having problems getting the slug field to pre-populate when the user created a post outside of the admin panel. I decided to remove the slug field from the create/update post view and have it pre-populate in the backend. The soultion was found on Learn Django here

• W3C Markup Validation

I have tested the home, register, login, sign out, new post, edit post and delete post pages with no errors returned.

The post_detail page has an error relating to the bootstrap class card-text, which is also causing a bug in the edit post page

Page Source code

My code

• W3C CSS Validation

• Lighthouse

• PEP8

To deploy this page to Heroku from its GitHub repository, the following steps were taken:

• Create the app in Heroku

• Select "New" and "Create new app".

• Name the new app and click "Create new app".

• In "Settings", click "Reveal Config Vars" and input the folloing.

  • CLOUDINARY_URL
  • DATABASE_URL
  • SECRET_KEY

• Click on "Deploy" and select your deploy method and repository.

• Click "Connect" on selected repository

• Click "Deploy Branch" in the manual deploy section. -Heroku will now deploy the App.

Development Environment

• Create env.py and it needs to contain these variables:

  • os.environ["DATABASE_URL"] = "postgres://....."
  • os.environ["SECRET_KEY"] = "....."
  • os.environ["CLOUDINARY_URL"] = "....."
  • os.environ["DEVELOPMENT"] = "True"
  • os.environ["CLOUDINARY_CLOUD_NAME"] = '.....'
  • os.environ["CLOUDINARY_API_KEY"] = '.....'
  • os.environ["CLOUDINARY_API_SECRET"] = '.....'

• Create requirements.txt
  pip3 freeze --local > requirements.txt

• Create Procfile

By forking the GitHub Repository we make a copy of the original repository on our GitHub account to view and/or make changes without affecting the original repository by using the following steps:

• Log into GitHub or create an account.
• Locate the GitHub Repository.
• At the top of the repository, on the right side of the page, select "Fork"
• You should now have a copy of the original repository in your GitHub account.

How to run this project locally:

• Install the GitPod Browser Extension for Chrome.
• After installation, restart the browser.
• Log into GitHub or create an account.
• Locate the GitHub Repository.
• Click the green "GitPod" button in the top right corner of the repository. This will trigger a new gitPod workspace to be created from the code in github where you can work locally.

• Images were taken from Pixabay and Vecteezy
• Icons were taken from Font Awesome
• Code Institute for the creating the gitpod-full-template and the I Think Therfore I Blog walkthrough project which this was based on
• All content in the pages has been written by me

I would like to thank my course mentor Daisy Mc Girr for her support and guidance throughout the project and Gemma and Scott from the Code Institute tutor support who helped me with my image upload issue.