This is a platform where everyone can share, post, comment and like restaurants, cafes and bars in Lund/Sweden. Its purpose is to help users share their experiences, discuss their ideas, and choose a venue if they wish based on the comments they see.
The Live Site can be found here.
I designed this platform with desgin thinking approach. With only the necessary content/information. User can surf the site easily and get the information they are looking for. Please find all my defined user stories here
As the site admin I can see the all comments from all users and if it is need I can delete it.
Color Schema The following colors were used for the color scheme. In general, simple and eye-friendly colors were preferred, so that the user could focus more on the content and posts.
Coolorscolor palette.
Google Fonts These three fonts, Bitter, Lato and Roboto, were used on the site. Since the site is generally aimed to be simple, legible and simple font families were chosen.
Navigation
The navigation bar is very clean and clear. Different menus appear for the site user depending on whether you are logged in or not.
Logout Menu Small Size
Login Menu Small Size
Login Menu Big Size
Home Page
When the visitor clicks on any category selected, it goes to the relevant category.
Anyone who visits the page, whether they are a user or not, can go directly to the category if they click on the "Read More" button on the category posts on the main page.
In such cases, the user is also informed with alert messages.The user sees these warning messages for 5 seconds and then the messages disappear or the user can close them earlier by pressing the x sign.
Categories
Restaurant/Cafe/Bar Page
Post Detail Page
Login Page
Register Page
My Page
Publish a Post
Creating and adding a post by a registered user is possible.
The user can publish a post after signing in and from their profile page.
The user must enter a title, catogory, content and image.
Manage My Posts Page
Edit Page
Delete a Post
Like and Comment on a Post
All the site visiters can view the comments and the number of likes.
The unregistered site visiters cannot view the comment box to write a comment. Once they register, then it is visible for them and they can post a comment on any post they want.
Users can comment to all posts.
Logout
The user can logout from Menu and from their accounts page.
When the user wants to logout a pop-up modal is triggered for confirmation.
The logout modal asks the user if they confirm to logout.
When users loggout they will see a message logout is successful like other message login create post, create comment, edit post, edit comment, delete post, delete comment and register.
Footer
Footer section was designed very simply and understandably. He was directed with icons to follow blog-related pages on social media.
Each pages wireframes includes mobile(small screen), tablet(medium screen), desktop(large screens).
Home Page:
Login Page:
Register Page:
Category Page:
Post Page:
My Page:
Publish Post Page:
My Publish Page:
The idea behind the structure of Best Places Of Lund was to simply guide users visiting the site in a clear and understandable way. Color confusion and unnecessary information were avoided.
The Best Places of Lund site is divided into two parts: When the user is logged in and When the user is logged in. Depending on the login status, the user is presented with different pages. When the user logs out, user can access the home page, all posts, categories, the detail page where user can read the post details, and the login/register pages. When the user logs in, the home page, all posts, categories, my page, and logout options can be accessed.
Read more about the different choices in the Features section.
pgadmin4- I created database schema with pgadmin4.
Post model handles posts details: title, content, date created/updated, featured image and likes. This post model handles the base for confirming user/author authentication to manage their own posts.
Comment model handles the content of the comment, the username of the person commenting, date/time of commenting.
Status | Main Website - User Logged Out |
---|---|
✓ | Typing in a incorrect URL on the page loads the 404 error page |
✓ | Pasting page that needs authentication loads a forbidden page |
✓ | Clicking the nav logo loads the home page |
✓ | Click the Home button and all categories are listed home page |
✓ | Click on the category you want to see and list the posts |
✓ | Click one post and read more detail about this post |
✓ | See likes and comments on the post detail page |
✓ | If you want to comment, click the join discussion button. |
✓ | Clicking the other categories and list their posts |
✓ | Clicking the nav bar all posts and lists all posts |
✓ | Clicking the login section on nav bar and login page |
✓ | Clicking the register section on nav bar create an account |
✓ | Clicking the youtube icon on footer and visit youtube |
✓ | Clicking the facebook icon on footer and visit facebook |
✓ | Clicking the instagram icon on footer and visit instagram |
Status | Main Website - User Logged In |
---|---|
✓ | Typing in a incorrect URL on the page loads the 404 error page |
✓ | Pasting page that needs authentication loads a forbidden page |
✓ | Clicking the nav logo loads the home page |
✓ | Click the Home button and all categories are listed home page |
✓ | Click on the category you want to see and list the posts |
✓ | Click one post and read more detail about this post |
✓ | See likes and comments on the post detail page |
✓ | Clicking the like icon and like post |
✓ | Write one comment on comment section and save your own comment |
✓ | Clicking comment edit icon and edit or delete your comment |
✓ | Clicking the other categories and list their posts |
✓ | Clicking the nav bar all posts and lists all posts |
✓ | Clicking the my page on navbar and go your page see two option |
✓ | Click the publish post button and see create post page |
✓ | Click the manage my post button and list your posts |
✓ | Click the edit button on post edit your own post |
✓ | Click the delete button and delete your own post |
✓ | Click the publish post button and see create post page |
✓ | Clicking the youtube icon on footer and visit youtube |
✓ | Clicking the facebook icon on footer and visit facebook |
✓ | Clicking the instagram icon on footer and visit instagram |
✓ | Click the logout on navbar and see logout confirmation message |
✓ | Click the logout button and see logout successful message |
Status | Main Website - Admin Logged In |
---|---|
✓ | Clicking the login section on navbar and login as admin |
✓ | Clicking the nav logo loads the home page |
✓ | Click the Home button and all categories are listed home page |
✓ | Click on the category you want to see and list the posts |
✓ | Click one post and read more detail about this post |
✓ | See likes and comments on the post detail page |
✓ | Clicking the like icon and like post |
✓ | Write one comment on comment section and save your own comment |
✓ | Clicking comment edit icon and edit or delete your comment |
✓ | Clicking the other categories and list their posts |
✓ | Clicking the nav bar all posts and lists all posts |
✓ | Clicking the my page on navbar and go your page see two option |
✓ | Click the publish post button and see create post page |
✓ | Click the manage my post button and list your posts |
✓ | Click the edit button on post edit your own post |
✓ | Click the delete button and delete your own post |
✓ | Click the publish post button and see create post page |
✓ | Clicking the youtube icon on footer and visit youtube |
✓ | Clicking the facebook icon on footer and visit facebook |
✓ | Clicking the instagram icon on footer and visit instagram |
✓ | Click the logout on navbar and see logout confirmation message |
✓ | Click the logout button and see logout successful message |
✓ | Add the end of the url "/admin" and see django admin panel |
✓ | Clicking the categories and delete one category /add category |
✓ | Clicking the comments and delete or add comments |
✓ | Click the posts on admin panel and create new posts or delete |
✓ | Click the posts on admin panel and approve posts, delete, edit |
✓ | Click the users on admin panel and create new users |
✓ | Click the users on admin panel and change their features |
✓ | Clicking the categories and delete one category /add category |
Status | Create a Post - User Logged In |
---|---|
✓ | Title field is required |
✓ | Title field does not accept empty field |
✓ | Title field does not accept just spaces |
✓ | Content field is required |
✓ | Content field does not accept empty field |
✓ | Content field does not accept just spaces |
✓ | Category field is required |
✓ | Category field does not accept empty field |
✓ | Images field is required |
✓ | Clicking the create post button |
✓ | Sending to admin appove |
✓ | Clicking the my manage post on my page checking approval posts |
Status | Create a New User - User Logged Out |
---|---|
✓ | Username field is required |
✓ | Username field does not accept empty field |
✓ | Email field does not accept just spaces |
✓ | Email field is request |
✓ | Password field does not accept empty field |
✓ | Success flash message is displayed when the user submits the create a new user form |
Status | Create a Profile Page - User Logged In |
---|---|
✓ | Username field is required |
✓ | Username field does not accept empty field |
✓ | Email field does not accept just spaces |
✓ | Email field is request |
✓ | Password field does not accept empty field |
✓ | Success flash message is displayed when the user submits the create a register form |
I have used django TestCase for automated testing views, forms and models files.
Testing Index/Home page view:
Category Model Test:
Post Model Test:
Comment Model Test:
PostList View Test:
User Page View Test:
Result:
Home Page:
index.html:
pages/account/index.html:
pages/actions/post-create.html:
pages/actions/post-edit.html:
pages/actions/posts.html:
pages/categories/bar/index.html:
pages/categories/cafe/index.html:
pages/categories/restaurant/index.html:
The CSS validation results for the files used in the project are as follows:
No errors or warnings found.
models.py:
admin.py:
posts urls.py:
views.py:
forms.py:
home_tests.py:
model-tests.py:
pages.py-test:
apps.py:
asgi.py:
project-urls.py:
I encountered a few errors on restaurant /cafe/bar html files during HTML validator testing and they were resolved.
Admin
As the site admin, I can access the Django-admin panel and log in as admin by adding "/admin" to the end of the url link and pressing the enter button again.
As a Site Admin I can approve or disapprove posts so that I can filter out objectionable posts.
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 aproove Posts before it is published so that the site content will be consistent.
Member User
As a Member User I can login my account so that I can manage my posts, comment and like.
As a Member User I can post/add/edit/delete posts so that I can share and manage my posts.
As a Member User I can like or unlike a post so that I can interact with the content.
As a Member User I can leave comments on a post so that I can be involved in the conversation.
As a Member User I can edit my comment or delete.
As a Member User I can view my posts status of approval so that I can manage my posts.
General User
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 click on a post so that I can read the full text.
As a Site User / Admin user I can view comments on an individual post so that I can read the conversation.
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 I can register an account and login if I want to share post or comment.
Browser Compatability
Checked and verified that the site works on different browsers.
Safari:
Chrome:
Responsiveness Testing
This project was deployed to Heroku. "Heroku is a cloud platform that lets companies build, deliver, monitor and scale apps."here
I have followed Code Institute's Django Blog Cheat Sheet steps to follow, create and deploy the project on Herokuapps.
Step 1: Installing Django and supporting libraries
Create new Heroku App
Copy DATABASE_URL - Located in the Settings Tab, in Config Vars, Copy Text
Import os library : import os
Set environment variables: os.environ["DATABASE_URL"] = "Paste in Heroku DATABASE_URL Link"
Add in secret key: os.environ["SECRET_KEY"] = "Make up a randomSecretKey"
In Heroku.com
Add Secret Key to Config Vars: SECRET_KEY, “randomSecretKey”
Before the final Deployement: Remove the "DISABLE_COLLECTSTATIC" from Heroku Config vars, and Change Debug to "False" in settings.py
It is possible to do a independent copy of a GitHub Repository by forking the GitHub account. The copy can then be viewed and it is also possible to do changes in the copy without affecting the original repository. To fork the repository, take these steps:
After logging in to GitHub, locate the repository. On the top right side of the page there is a 'Fork' button. Click on the button to create a copy of the original repository.
To clone and set up this project you need to follow the steps below.
Github Create Local Clone
To be able to get the project to work you need to install the requirements. This can be done by using the command below:
pip3 install -r requirements.txt - This command downloads and install all required dependencies that is stated in the requirements file.
The next step is to set up the environment file so that the project knows what variables that needs to be used for it to work. Environment variables are usually hidden due to sensitive information. It's very important that you don't push the env.py file to Github (this can be secured by adding env.py to the .gitignore-file). The variables that are declared in the env.py file needs to be added to the Heroku config vars. Don't forget to do necessary migrations before trying to run the server.
python3 manage.py migrate - This will do the necessary migrations.
python3 manage.py runserver - If everything i setup correctly the project is now live locally.
Setup env.py
The contents in the posts were taken from the relevant websites.
These site links are attached to the post detail page.
Some content was written only by me.
Photos used were taken from www.pexels.com
and some photos were taken from websites, they are free
Coolors color palette.
Amazon web service I used AWS and I followed this page to implement it. How to implementAWS to project
The links I added below belong to their own websites related to the posts shared on the blog page. The content and free photographs from these pages were used.
Template for read.me provided by Code Institute (with some additional changes that my mentor Precious Ijege) suggested.
This project was created for Portfolio Project #4 (Full-Stack Tolkit) - Diploma in Full Stack Software Development Diploma at the Code Institute. I would like to thank my mentor Precious Ijege for relevant feedback during the project.
Merve COSKUN, 2024