we went

we went is a social media like platform where users can come to discover a variety of experiences and adventures within Ireland. These adventures could be anything from, picturesque walks to thrilling adventures. A user can sign up to share their own recent activities and adventures. They also have the ability to interact on other user's posts by liking and commenting. The design of the site is inspired by Instagram and Facebook, to provide a social media experience.

User Experience

Project Goals:

Many people scroll social media platforms wanting the life others have. The goal of this project is to create a positive environment that inspires others to appreciate and discover what Ireland has to offer. Since the pandemic people have changed their way of living and have become more adventurous which has led to the discovery of hidden gems throughout the country. This site allows user to share and seek these amazing experiences. While also promoting and profiting, small and family owned businesses in the hopes they thrive. The target audience are people who relate and are interested in this content. People who would like to get involved by sharing and unfolding new experiences.

Target Audience Goals:

• A site that is easy to navigate on mobile, tablet and desktop.
• A site that is appealing, intriguing and unique.
• A site that clearly displays it's purpose and objective.
• A site that provides users with adventures and activities.
• A site that provides a variety of adventures and activities, not specific to one category.
• A site that allows you to sign up/login to gain more interactivity.
• A site that allows a signed up user to add, edit and delete their post.
• A site that allows you to like and unlike other posts.
• A site that allows you to submit, edit and delete a comment.
• A site that allows you to see your posts.
• A site that allows you to see your liked posts.

Site Owner Goals:

• A site that is user friendly and easy to navigate.
• A site that easily provides a user with our purpose and objective.
• A site that encourages users to sign up and create an account.
• A site that increases user interactivity.
• A site that users can post, like and comment.
• A site that users can refer back to their posts and their like posts.
• A site the creates a positive environment for uses to share their activities and adventures.
• A site that creates frequent and loyal users.
• A site that encourages users to try new and exciting activities to enhance their free time.

User Stories

EPIC|Navigation

• As a Site User:

  • I can view the landing page so that I can understand the sites purpose to determine if it suits my needs.
  • I can use the nav and footer elements so that I can navigate to different areas of the website and external links.
  • I can view the posts page so that I can see users posts and likes.
  • I can click into the post to read about it more in detail and view the post comments.
  • I can search posts so that I can view the post I am looking for and similar posts.

• As a Site Owner:

  • I want the user to view the landing page so they can immediately understand the sites use and purpose.
  • I want to provide easy navigation to different areas of the site to enhance the user experience.
  • I want to provide the user with a posts page so the user can view all user post and likes.
  • I want to offer users the option to click into each individual post so they have more information and can view the comments.
  • I want to provide a search bar so that the user can search a post or similar post by keywords.

EPIC|Sign Up

• As a Site User:

  • I can register for an account so that I can interact further with the site an users.
  • I can login and logout of my account so that I can post, comment and like other posts.
  • I can see my login status so that I know if I need to log in to interact further.

• As a Site Owner:

  • I want the user to have an option to create an account if they would like to interact with the site and users further.
  • I want the user to be able to login and logout, to give them access to post, comment and like other posts.
  • I want the users login status to be visible so they are aware if they need to log in or not.

EPIC|User Social

• As a Site User:

  • I can log in so that I have access to add a post, like and comment.
  • I can view my own post's so that I can see what I have previously posted, the comments and the likes.
  • I can add a post so that I can interact with other users.
  • I can edit my posts so that I can make any desired changes.
  • I can delete my posts so that I can remove posts I no longer want to be displayed.
  • I can view the posts I have liked so that I can return to these posts easily.
  • I can like and unlike posts so that I can share my appreciation.
  • I can comment on posts so that I can show my thoughts of the post and interact with the post owner and other users.

• As a Site Owner:

  • I want the user to have the option to login so that they can add a post, comment and like.
  • I want the user to be able to view their own posts so they can see what they have already posted, the comments and the likes.
  • I want a user to have the ability to add a post so that they can interact and share their activities.
  • I want a user to have access to edit their post so that they can update it and make changes.
  • I want a user to have the ability to delete their post so they can remove posts they no longer want displayed.
  • I want a user to have access to the posts they have liked so they can easily return to their favourite posts.
  • I want a user to be able to like and unlike a post so that they can share their appreciation.
  • I want the user to be able to leave a comment so that they can interact with the post owner and user users and also leave their thoughts.

EPIC|Admin

• As an Admin:
  • I can create, read, update and delete posts so that I can manage the content.
  • I can remove posts so that I can filter out any inappropriate posts.
  • I can remove comments so that I can filter out any inappropriate comments.

Design Choices:

The design of the site needs to draw the user in to ensure they stay and view what what the site offers. The colours need to be appealing and compliment the the content and the images as well as the users content and images. The site will have a minimalistic theme to prevent the user from being distracted by the colours. The design will ensure the site is easily navigated which will result in users returning and signing up.

Fonts:

• Signika

I chose this font family for the website as it compliments the colour scheme, theme and the content well. It is easily readable and adds to the clean and elegant style.

Icons:

I have used multiple icons from font-awsome. They offer a wide range of icons and will help the user to identify the buttons use. For example, icons were used for edit and deleting comments.

Colours:

I chose the colours below because they suit the theme of the site, adventure and activity. They provides a earthy feel to the site while keeping the it minimalistic. They compliment themselves, the content and the images well. They will help to compliment the users posts also. The content is clearly readable and the site navigates well due to the colours. It increases the appeal of the website and UX. The colours used across the site are listed below.

• Primary Colour - #E6E5DE - This is an off white colour with a grey undertone. This colour was used for the nav bar, footer, home background, and actiivty background.
• Secondary Colour - #041F1E - This is an emerald green colour. This was used for most of the text, icons, logo, edit/add comment background image and the profile background colour.
• Tertiary Colour - C57B57 - This is a pale orange colour. Which was used for the like button, edit and delete post icons, on hover icons, some of the home page text and multiple buttons.
• Quaternary - #FEFBF1 - This is another off white colour. This was used for the post container on the activity page and post detail page. It was also used for the profile nav and text.

Images

The images I used on the home page compliment the content and the colour. The images were in contrast with the theme of adventures and activities. They help the user to understand the goal and use of the site. The images were sourced from Unsplash and Pexels, which are high quality and completely free stock photos.

Wireframes:

The wireframes were created in balsamiq. This helped me to plan the visual look of the website. I created wireframes for mobile, tablet and desktop.

The wireframes for the project can be found here.

Database Design:

• In the production version of we went the database is utilizing PostgreSQL and is hosted and provided by Heroku.

The Activity App:

Post Model

Comment Model

UserProfile Model

Features:

Featured that have been developed:

• Signup, a user can login and access their user profile.

• A user that has signed up can like other users posts.

• A user that has signed up can comment on other users posts as well as their own. They can also edit and delete these comments.

• A user that has signed up can add their own post. They also have the option to edit and delete their posts.

• All users can interact with the search bar to find post by keywords.

Featured that have been developed:

• A filter by system, on the activity page. This will provide users with a more tailored experience, e.g. star rating, activity type, hashtags and Sunday activities ect.

• Profile interaction, a user can follow other users and view their posts.

Technologies Used:

Languages:

• HTML
• CSS
• JavaScript
• JSON
• Python

Tools & Libraries:

• Django
• PIP
• jQuery
• Git
• Bootstrap
• Font-Awesome

Databases:

• PostgreSQL - Production
• SQlite3 - Development

Planning and Testing:

Planning:

Creating the wireframes really helped the planning of this project. It layed out what I wanted to achieve and you could visually see what was possible and what was not. This was beneficial as I was using new technologies and it helped me determine my skill strengths.

I took an aglie styled approach. I took time creating my user stories to keep within my time-frame and focus on the most important features and functionalities. If a user story began it was taken from the to do column and moved to in progress. Once each user story was completed it was then moved to the done box. I focused on not spending too much time on a particular ticket I was having issues with. I would move this back to to-do and try to complete the other tickets within the in progrss column. Using this method was brilliant for time-management. I was using my time well and at each point in the progress I had a clear understanding of the next steps and the overall goal.

A part of my planning was using coolors to chose the correct colour palette.

Validations

CSS Validator Lighthouse Validator

Feature Testing:

User Testing

Testing was completed throughout the development process using chrom dev toos and user testing myself.

Authentication/Defense

• Expectation A user should not be able to access specific areas of the site

• Implementation Django template variables were used, to prevent a users attempting redirects via the address bar, to pages they should not have access to. Using this redirected the user to the login page and didn't allow the user access.

• Test

  • While not logged in: Type /profile/ into the address bar after the URL and select enter.
  • While not logged in: Type /editcomment/25 into the address bar after the URL and select enter.
  • While not logged in: Type /editpost/16 into the address bar after the URL and select enter.

• Result Users that had not yet logged in or shouldn't have access were not permitted access to the URL. If this was attempted the redirected.

• Verdict This test has passed.

User Profile

• Expectation: Users can register, login and have a personal profile that contains posts they have liked and the posts they have added.

• Implementation: Django-Allauth was used to handle the registration of users. User profile model has custom fields when registering. Account dashboard that has the features, My Posts and My Likes. The user dashboard also has a logout section if the user decides to logout.

• Test

  • While not logged into session: Navigate to the sign up page

  • While not logged into session: Create an account and fill out all the required fields

  • While not logged into session: Navigate to sign in page and fill out all the required field

  • While logged into session: Navigate to profile page and attempt to interact with the user dashboard.

• Result: Users can signup and a profile can be creates using signals. The user dashboard is interactive and the correct content is displayed.

• Verdict: This test has passed.

Activity Posts

• Expectation: View a list of posts, displaying the featured image, number of likes and the post title.

• Implementation: An activity posts page was created to display a list of cards providing the featured image, number of likes and the post title

• Test

  • While not logged into session: Navigate to the activity page and ensure the posts are displaying. Check each post displays the relevant information.
  • While logged into session: Navigate to the activity page and ensure the posts are displaying. Check each post displays the relevant information.

• Result: All the posts are displayed correctly. The information is also displayed correctly, the card provides the featured image, the post title and the number of likes.

• Verdict: This test has passed.

Post Like

• Expectation: Only a user that has logged in can interact with the like icon and add or remove a like.

• Implementation: Interaction with the like icon to like/unlike a post without reloading the page. This has been done with ajax.

• Test

  • While not logged into session: I can view the like icon however I can't interact with it.
  • While logged into session: I can interact with the like icon and like/unlike posts.

• Result: A user must be logged in to interact with the like icon, they can like or unlike posts. Users that are not logged in can view the icon however they are unable to like or unlike a post.

• Verdict: This test has passed.

My Posts & My Likes

• Expectation: A user should only have access to the posts they have liked and the posts they have added.

• Implementation: Jinja template was used to iterate over the posts results to check if the user is within the results and then display the results.

• Test

  • While not logged into session: The user doesn't not have access to user dashboard so this content is not displayed.
  • While logged into session: The user has access to the user dashboard and can toggle between the my posts and my likes and the correct content is displayed.

• Result: A user must be logged in to view the dashboard. The dashboard can then be used to view my posts and my likes. The correct posts are displaying based on the user.

• Verdict: This test has passed.

Post Detail Page

• Expectation: A user should be able to click on a post from the activity page and be redirected to the post detail page to display the post in full.

• Implementation: When you click on a post you are then redirected to the appropriate view which displays all the post information through jinja templating.

• Test

  • While not logged into session: The user can click on the post from the activity page and is redirected to the post page and can view the post in full.
  • While logged into session: The user can click on the post from the activity page and is redirected to the post page and can view the post in full.

• Result: A user can be logged in or logged out, and can click on a post from the activity page. The user is then directed to the post detail page. The post is displayed in full

• Verdict: This test has passed.

Edit & Delete

• Expectation: A user should only be able to edit or delete a post or comment they have created.

• Implementation: Jinja template was used to iterate over the posts and comment results to check if the user is within the results and then display the requested results.

• Test

  • While not logged into session: A user can only view their posts and comments from the activity page however they don't have permission to edit or delete them.
  • While logged into session: The user can click the desired icons to edit or delete their posts or comments.

• Result: A user has to be logged in for the edit and delete options to appear on a post or a comment. This option is only given on cmoments or posts that specific user has created.

• Verdict: This test has passed.

Toast Messages

• Expectation: Users are notified of their actions and or errors via a popup message.

• Implementation:

  • Using bootstrap toast system and linking it to django messages module, users are notified of many different actions throughout the application.

• Test

  • Add comment
  • Edit a comment
  • Delete a comment
  • Image file size too big
  • Login as a user
  • Log out as a user
  • Add a post
  • Edit a post
  • Delete a post

• Result: Toast messages are displayed when all the above actions are performed, an error success or info toast is displayed to the user. This informs the user of their actions.

• Verdict: This test has met expectations.

Browser Compatibility

• Expectation: The application displays and functions on widely used browsers.

• Implementation: Use code that is widely supported.

• Test

  • The website was developed using the brave / chrome dev tools so it is fully functional. Testing of IE, Firefox and safari has not been completed. All tests outlined above have been performed on browsers states above.

• Result: The application functions as intended on browsers.

• Verdict: This test has met expectations.

Bugs

Busgs During Development:

Issue with edit comment

Bug

When you attempted to edit a comment it would provide an error.

Fix

The model name and the class name were both "Comment", this was causing a conflict and an overriding issue which resulted in the error 404, Comment object has no attribute model. The class name needed to be updated.

Verdict

This bug was resolved.

Issue with delete comment

Bug

When you attempted to delete a comment it would provide an error when trying to get the object.

Fix

The argument name being was incorrect.

Verdict

This bug was resolved.

Known Bugs

I wanted a user to be provided with a toast message when they like a post. However, this was not possible, because when a post is liked the page does not reload for this to be displayed. This is due to an ajax request hadnling the like functionality. If I had more time I would work on this bug and try to implement the toast message via ajax.

Deployment Steps

Heroku Deployment

* Go to the [Heroku](https://id.heroku.com/login) site
* Log in.
* Click the "New" button and click "Creat new app"
* Provide a name for the app in the "App name" field
* Select your region from the dropdown menu
* Click "Create App"
* Add Database to App Resources, located in the Resources Tab, Add-ons, search and add e.g. ‘Heroku Postgres’
* Copy DATABASE_URL, located in the Settings Tab, in Config Vars, Copy Text

Attach Database

* In gitpod, create new env.py file in top level directory, e.g. env.py
* In env.py, import os library, "import os"
* Set environment variables, os.environ["DATABASE_URL"] = "Paste in Heroku DATABASE_URL Link"
* Add in secrect key, os.environ["SECRET_KEY"] = "Make up a randomSecretKey"
* In heroku, add Secret Key to Config Vars, SECRET_KEY, “randomSecretKey”

Prepare Environment and settings.py

* In settings.py, reference env.py,
from pathlib import Path
import os
import dj_database_url
if os.path.isfile("env.py"):
import env
* Remove the insecure secret key and replace (links to the secret key variable on Heroku), SECRET_KEY = os.environ.get('SECRET_KEY')
* Replace DATABASES Section, comment out the old DataBases Section (links to the DATATBASE_URL variable on Heroku), 
DATABASES = {
'default':
dj_database_url.parse(os.environ.get("DATABASE_
URL"))
* In the terminal, Make Migrations, python3 manage.py migrate

Store static and media files on Cloudinary

* In cloudinary, Copy your CLOUDINARY_URL, e.g. API Environment Variable. From Cloudinary Dashboard
* In env.py, add Cloudinary URL to env.py (be sure to paste in the correct section of the link), os.environ["CLOUDINARY_URL"] ="cloudinary://9444:SUZi@dbhyuj5mc"
* In Heroku, add Cloudinary URL to Heroku Config Vars (be sure to paste in the correct section of the link), Add to Settings tab in Config Vars e.g. COUDINARY_URL, cloudinary://9444:SUZi@dbhyuj5mc
* Add DISABLE_COLLECTSTATIC to Heroku Config Vars (temporary step for the moment, must be removed before deployment), e.g. DISABLE_COLLECTSTATIC, 1
* In settings.py, add Cloudinary Libraries to installed apps, ORDER IS IMPORTANT,
...
'cloudinary_storage',
'django.contrib.staticfiles',
'cloudinary',
...
* Tell Django to use Cloudinaryto store media and static files (place under the Static files Note),
STATIC_URL = '/static/'
STATICFILES_STORAGE =
'cloudinary_storage.storage.StaticHashedCloudinaryS
torage'
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'
* Link file to the templates directory in Heroku (place under the BASE_DIR line),
TEMPLATES_DIR = os.path.join(BASE_DIR,
'templates')
* Change the templates directory to TEMPLATES_DIR (place within the TEMPLATES array),
'DIRS': [TEMPLATES_DIR
* Add Heroku Hostname to ALLOWED_HOSTS, 
ALLOWED_HOSTS =
["PROJ_NAME.herokuapp.com", "localhost"]
* In Gitpod, create 3 new folders on top level directory, media, static, templates
* Create procfile on the top level directory, Procfile
* In Procfile, add code, web: gunicorn PROJ_NAME.wsgi
* In terminal, add, commit and push by entering,
git add .
git commit -m “Deployment Commit”
git push
* In Heroku, deploy content manually through heroku, e.g.  Github as deployment method, on main branch

Forking the Repository

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

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

Creating a Clone

How to run this project locally:

1. Install the GitPod Browser Extension for Chrome.
2. After installation, restart the browser.
3. Log into GitHub or create an account.
4. Locate the GitHub Repository.
5. 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.
6. After cloning the repository, begin by typing python3 manage.py makemigrations --dry -run
7. Then enter, python3 manage.py makemigrations
8. Ather that enter, python3 manage.py migrate
9. Lastly enter, python3 manage.py createsuperuser

How to run this project within a local IDE, such as VSCode:

1. Log into GitHub or create an account.
2. Locate the GitHub Repository.
3. Under the repository name, click "Clone or download".
4. In the Clone with HTTPs section, copy the clone URL for the repository.
5. In your local IDE open the terminal.
6. Change the current working directory to the location where you want the cloned directory to be made.
7. Type 'git clone', and then paste the URL you copied in Step 3.

git clone https://github.com/USERNAME/REPOSITORY

8. Press Enter. Your local clone will be created.

Further reading and troubleshooting on cloning a repository from GitHub here

References

Code Institute - Deployment Steps
[Logo created using](https://www.freelogodesign.org/)
[Multiple questions answered with the help of](https://stackoverflow.com/)

Images

• Images for the website came from Pexels and Unsplash

Acknowledgements

I would to say a big thank you to my mentor Rahul Lakhanpal, for his support and constant feedback throughout developing the website.

This project is for educational purposes only. It was created as a first milestone project for Code Institutes full stack web development course.