Hobby Share

Hobby Share is a community where people are able and willing to share their hobbies with others. Likewise it creates a streamline of information for the users to see what categories there are, thus encouraged to feel willing to create, and interact with various of posts from other hobby enthusiasts. Where all the uploaded and inspiring messages are their for peoples disposal. It's a representation of who you are and what interests you represents.

Live link to the webpage:

This project is dedicated to all ages who are keen to see what kind of hobbies there are out there, the reason behind this is due to overwhelming information regular internet users are interact with on daily basis. That leds to an overload and people becomes quite depressed and having difficulties to process information out there on the internet spectrum. What Hobby Share is a platform for one category that is the share of your interests or hobbies. It's great for both young and old groups to see what kind of interests there - perhaps they all be interesting to create a sense of community on a digital platform. E.g., as it was during the launch of Facebook or Instagram, there no advertisment and other information that especially children or younger people feeling stressed about. On Hobby Share you don't need to feel stressed at all and the only thing Hobby Share want you do know is to inspire other with our own curosity.

Table of Contents

• Disclaimer, there were a lack of time to make a Table of Content. That will be fixed for later, pardon for that inconvience.

User stories:

Evidence that User stories has been applied into the project (old):

Database Schema

• Database diagram was made from the interactive site Creately

Design Plan:

The design of the Hobby Share changed along the the way but importantly is the outcome and the functions behind the webpage.

*Disclaimer my knowledge of Balsamiq was limited for this project when it comes to the true present webpage's design. Many Apologies for that.... Both in the plan and final result of the design.

Homepage:

The homepage was designed like this because I wanted to create a perfect introdution for the user to feel a sense of welcome once they are visiting the page:

Updated & final design:

About page:

In the about page of my design plan I wanted to create a word art where peoples posts coherent with their categories where uploaded here. But some changes where made and I redirected my fokus on wanted to create a regular about page. It became a very one and it could have become better - but it's a representation of what Hobby Share want to signaling with its target audience:

Updated & final design:

Login Page:

The log-in page hasn't been updated nor changed when it comes to its design.

BlogPost:

Updated & final design:

Color Scheme:

Typography:

All fonts were obtained from the Google font & Bootstrap. I chose the following fonts for the page:

Bootstrap & 'Times New Roman', Times, serif:

• heading/logo, Blog & print titles
• navigation & site buttons w3schools

Imagery:

All photography for the fictional "posts" from the users, were imported from Tomi Tokko with freecodecamp free course on youtube.

Likewise from Pexels.

Media

• Pexels
• Main Photo
• Blog1 Post
• Blog2 Post

Features

Existing Features:

Homepage|Uploaded Posts page:

Paignation function:

Navigation Bar:

Desktop:

*Disclaimer, navbar for the mobile phone was unfortunately failed cause the uploaded posts fall off, and that will be changed for later.

About page:

About page with closed-Accordion:

About page with open-Accordion:

CRUD

Create:

Only signuped users are able to create posts and profiles at Hobby Share:

Create Post:

• It's important to click on status button to make published:

Once you are logged into the page you can only edit & delete your own posts, there are unfortunately no warnings once you decide to remove them. Yet you can create or edit you own posts as much as you want:

EDIT/Update

Once you click on the edit button you come to this page:

Once you want to delete a post, you will redirected to the home page or uploaded posts:

Before you have pressed delete button:

After you have pressed delete button:

Contact|Support Page:

Profile Page:

Logout Page:

Register Page:

Bugs Report

1.

In the file: create_post.html

Error

form class="create-post" id="create_post_form" method="post" action="{% url 'create_post' %}"

The data wasn't registrated from the form and the images wasn't uploaded to the home page. However, in the database demonstrated from tableplus it was registrated there and as well as in the django administration page.

Fixed Error

form class="create-post" id="create_post_form" method="post" enctype="multipart/form-data" action="{% url 'create_post' %}"

The issue was resolved by adding the enctype attribute and everything was finally added into the data, which the user was now able to post images related to their blogpost. It was required to have this feature cause without it would create a bad user experience and the purpose of the website wouldn't meet up to its expectations.

2

views.py

Errors

CRUD:

class CreatePost(View):

def get(self, request, *args, **kwargs):
    return render(
        request,
        "create_post.html", 
        {
            "form": PostForm()
        },
    )
    

def post(self, request, *args, **kwargs):

    post_form = PostForm(request.POST)

Related to the issue above in terms of uploading and creating posts, it was unable to pin a image into the your own blog. Thanks to no request.FILES where added in the function. That generated the problems to store data for user's benefit and see were it went.

Fixed Error

class CreatePost(View):

def get(self, request, *args, **kwargs):
    return render(
        request,
        "create_post.html", 
        {
            "form": PostForm()
        },
    )
    

def post(self, request, *args, **kwargs):

    post_form = PostForm(request.POST, request.FILES)

By added request.FILES in the post form it was finally resolved by adding this missing feature. Once something is missing it creates error and thanks to the documentation from the terminal it gave the path of a good result to determine where the bug was.

3

In the register page of the Hobby Share, it created an error due some issues regards to the settings.py file and that led to some errors along the way of project's process:

• The a new potential user is trying to set up a new account:

• Error message:

settings.py

First Issue:

ACCOUNT_EMAIL_VERIFICATION = False

First change & failed:

ACCOUNT_EMAIL_VERIFICATION = True

Result:

Final and solution:

ACCOUNT_EMAIL_VERIFICATION = 'none'

Another error of the CRUD

While working with CRUD function it was some issues to add the delete one, since I was doing the same changes and added the same functions with different attributes, names etc it gave me an error. It send the information on my website: http 405 which meant that no right method has been used and the website crashed. It also was a late night and it led on layers of more issues and a sense of feeling that you were stuck in a loop of bad repetion.

Error:

class PostDelete(View):

def get(self, request, id, *args, **kwargs):
    post = get_object_or_404(post.id)
    post.delete()

    return HttpResponseRedirect(reverse('home'))

Fixed Error

class PostDelete(View):

    def get(self, request, id, *args, **kwargs):
        post = get_object_or_404(Post, id=id)
        post.delete()

        return HttpResponseRedirect(reverse('home'))

Validator Test

• Pep8online is unfortunately unaccessible at this time, the only source of test I was able to make for this project was look through my terminal or the installed pep8 compliant. (Directed from the Tut support)

• but it won't affect the workspace nor the function of the code. Because the characters of the text is too long but it the final result is acting as expected, therefore reach up to its goal of this project.

All html files were passed by W3C Validator

• Errors that were discovered were the {%%} & {{}} tags. Those are required to make the webpage work. As well as other errors that won't hurt the projects main objective, e.g. "Non-space characters found without seeing a doctype first. Expected". These can be changed but the outcome to make the page work with all its functions is the main goal here.

• CSS file didn't detect any errors either in Jigsaw validator, since I am Swedish and Jigsaw seems to only show messages on my language at this time - (don't know how to change it) - I swear it says that no error are shown in the css file:

• Hobby Share was demonstraded and portrayed these stats in Lighthouse:

Features Left to Implement

Able to see what a specfic user have uploaded: their previous posts You are able to follow other users: Chat with others. Password reset Register page: select more categories:

• Nationality
• Gender
• Signup page goes align with creating a profile page.

Credits

• I think and therefore I blog - Walkthrough Project & Website:
• Django Blog Application - Full Tutorial 2022
• Django For Everybody - Full Python University Course
• Build a Social Media App with Django – Python Web Framework Tutorial
• Codemy.com -Create A Simple Django Blog

Acknowledgements:

• Many thanks to my mentor Martina Terlevic who guided me along with this project.