Wonderdam City Guide for Amsterdam

You can view the live project here

Wonderdam

Overview

This is the main website for Wonderdam, a local guide for hidden gems, popular restaurants, cafes, terraces, and bars located in Amsterdam. The website aims to target tourists who are looking for suggestions, or locals who are looking for news places to discover in the great city of Amsterdam. The website's main focus is to inform people about what or where to eat, or make suggestions for people who just want hangout with their friends and family and wants to try somewhere new in the city.

The website is fully interactive, built with mobile-first design in mind, and accessible on a wide range of mobile devices, and tablets.

Contents Table

1. UX

   • User Stories
   • Design
   • Wireframes

2. Features

   • Existing Features
   • Features Left to Implement

3. Technologies Used

4. Testing

5. Database

6. Deployment

7. Credits

   • Contents
   • Media
   • Codes
   • Acknowledgements

8. Disclaimer

UX

• The Blog features a modern, interactive, and easy-to-use design for visitors to easily navigate and enjoy their time during their visit.

User stories

First Time Visitor Goals

• I want to understand the main purpose of the website.
• I want to easily navigate through the website.
• I want to find out how I can register to the website, and upload a post.
• I want to find out how I can search for posts.
• I want to be able to find out how I contact the blog owner.

Registered Visitor Goals

• I want to find out how I can login to my profile.
• I want to find out how I can add a new post.
• I want to find out how I can edit my posts.
• I want to find out how I can delete my posts.
• I want to find be able to see all my posts.
• I want to find out how i can search through all the current posts, and categories.
• I want to find out how to delete my blog account.

Admin User Goals

• I want to be able to add new posts.
• I want to be able to edit user posts.
• I want to be able to delete user posts.
• I want to be able to delete unwanted users from the blog.
• I want to be able to manage add/edit/delete categories.
• I want to be able to see real-time information about the blog, such as current number of posts, users, and categories.

Strategy

• The goal of the website is to inform local residents, tourists how are visiting, or looking to visit Amsterdam about all the new local cafes, restaurants and bars. The blog aims to attract more visitors by presenting up to date information about these places, aims create a community around the blog, and to be the go-to place as a local Amsterdam guide.

Design

Color Scheme

• The colors used throughout the website are:

Typography

There are three Adobe fonts used throught the website. P22 Pooper Black is used for logo, Antique Olive Nord used for all titles and post "Read More" links. Paralucent was used on all the texts to give the website a modern and minimalistic feel.

Imagery

• Images on the website were chosen to set the sense of quality, and taste of the blog, and to make sure users have a good experience during their visit.

Wireframes

• Homepage
• Blog Post Page
• Register
• Login
• Contact
• Profile Page for New User
• Profile Page without Posts
• Profile Page with Posts
• Admin Profile Page
• Add Post
• Edit Post
• Add Category
• Edit Category
• Admin Dashboard
• Error 404
• Error 500

Features

Existing Features

• Responsive on all device sizes.
• Navbar and Footer is visible on all pages.

Navbar

• Fixed on top of the page on all device sizes.
• Shown as a collapsible navbar with a hamburger button for triger on Mobile devices and Tables.
• Features a search bar allowing user to make searches throughout the website. Search function allows users to search for Posts by Author and title, and allows user to search posts by category.
• Features 3 different layouts, for guest users Home, Login, Register and Contact links are present.
• For Registered users, Home, Profile, Add Post, Logout and Contact links are Present.
• For Admin user All the links are present along with a link for Admin Dashboard.

Homepage

• Features an interactive, and modern design.
• Using Javascript animations, Post images, and Titles are seamlessly presented to the user in an orderly fashion as user scrolls through the page, providing a unique experience.
• Features Pagination to show only 5 posts per page for a clean UX.
• Each post on homepage displays Author, Post date, and Category information, and each Category color is given a unique color using Jquery.
• For post authors, a Delete and Edit button is displayed on their post for users to easily manage their posts from Homepage.
• For Admin user all the posts feature a Delete and Edit button, allowing Admin user to easily Edit or Delete Unwanted user posts directly from the Homepage.

Register Page

• Features a clean registration form for user to signup for the blog.
• Each section of form input area features a placeholder text.
• Underneath the form inputs, there is a placeholder text explaining the required data for input, helping users to easily match the requested format.
• Password input field features a password match validator and gives feedback to user if their passwords match.

Login Page

• Features a clean login form for users to login to their blog.
• Each section of form input area features a placeholder text.
• Underneath the form inputs, there is a placeholder text explaining the required data for input, helping users to easily match the requested format.
• Upon succcessful submission, user is redirected to their own profile page.

Profile Page

• Features a clean layout.
• Shows a greeting message to the User upon successful login.
• Features a section showing all the posts by the user, allowing them to edit or delete their posts.
• Features a add post button allowing users to easily reach to add post page from their profile.
• If user has no posts, then a message is presented to the user, asking them if they would like to add a new post.
• At the bottom of the page there is a "Delete Account" button featuring a modal for user confirmation.

Add Post Page

• Stricted only for registered users.
• Page features a clean form for users to use, outlining all the required information in the form.
• Form features an image preview section allowing users to see their post images before uploading.
• Using file upload, and Cloudinary service, form allows users to easily upload their image to the cloud, and eliminates the hassle of looking for image urls.
• File upload input allows user to only upload image files such as jpeg, jpg, and png. Any other file extensions are restricted.
• After submission, form checks if the current Post title exits in the database, restricting users from adding duplicate posts.
• Upon successful post, user get redirected to the homepage and greeted with a success message.

Edit Post Page

• Stricted only for post authors.
• Page features the same form and features as the Add Post page.
• Each section of the form is pre-filled with the data they provided when they submited the form, allowing users to easily edit the post information.
• After submission, form checks if the current Post title exits in the database, restricting users from adding duplicate posts.
• Upon successful post, user get redirected to the homepage and greeted with a success message.

Blog Post Page

• Allowed for visitors and registered users to see.
• At the top of the page, post title presented.
• Underneath the title post information such as Author, Post Date, Category, and Address information is presented to the users. For post authors and admin an Edit and Delete button is presented allowing author or Admin user to easily manage the post.
• Underneath the info tags Post image is shown to the user.
• Underneath the post image, post content is presented.
• Underneath the post content, a link for the place's website is present, which opens the website in a new tab for users to get more information about the place.

Contact Page

• Allowed for all visitors and users of the blog.
• Using Flask Mail, users are able to contact the Blog Admin via the form.
• Upon successfull submission users are greeted with a success message, and email is sent for Admin user to see.

Admin Dashboard

• Stricted for Admin use only, and features a variety options for the Admin user to easily manage and be in total control.
• On top of the page, info cards are presented for the admin user. Each card shows a real-time information about total number of users, total number of posts, and total number of categories.
• Underneath the blog info cards, a responsive table of registered user list is presented along with all the information users provided. Next to each user there is a call to action button for user deletion, allowing admin user to delete any unwanted users. Admin user deletion is restricted from the table.
• Underneath the Registered users table, All the categories are listed for Admin user to manage. Along with a Add Category button for Admin user to easily add new categories if needed.
• Underneath the Categories section, Recent posts section is presented to the Admin user showing all the current posts on the page showing their titles and images. Each post card features a Edit and Delete button, allowing Admin user to easily manage current posts on the blog.

Add Category

• Stricted for Admin use only.
• Page features a single line form allowing Admin user to add new categories.
• After submission Add category function checks if Category already exits, if it does, it shows a message to Admin user that category already exits.

Edit Category

• Stricted for Admin use only.
• Page features a single line form allowing Admin user to edit the selected category.
• After submission Edit Category function checks if Category already exits, if it does, it shows a message to Admin user that category already exits.

404 Error Page

• Page features custom error message with a button that takes user back to the homepage

500 Error Page

• Page features custom error message with a button that takes user back to the homepage

Features Left to Implement

• Maps section showing each place on a map.
• Registration confirmation allowing each new user to verify their account before adding new posts.
• Comments functionality allowing users to comment on the posts.
• User profile picture functionality, allowing users to add profile pictures, and show them next to their posts, and comments.
• Email notification functionality for Admin user to be alerted when a new post is added to the blog.
• Functionality for automatically assigning new tag colors for new categories.
• Extra layer of security for server-side file validation before uploading images.

Technologies Used

Languages Used

• HTML5
• CSS3
• JavaScript
• Python

Frameworks, Libraries, and Programs Used

• Visiual Studio Code
  • Vscode Is the code editor used to develop, commit & push this project to Github.
• GitHub
  • Github is used for:
  1. Tracking the project, and for version control.
  2. As a repository for other users to see the code used in the project.
• Bootstrap
  • Bootstrap to structure the website, and to achieve responsive layout across various mobile devices.
• JQuery
  • JQuery used with Bootstrap.
• MongoDB
  • MongoDB Source-available cross-platform document-oriented database program.
• Heroku
  • Heroku A platform as a service (PaaS) used for deploying the project.
• WOW.js
  • WOW.js a JavaScript plugin that reveals animations when you scroll.
• Animate.css
  • Animate.css a cross-browser library of CSS animations.
• Adobe Fonts
  • Adobe Fonts for importing typography.
• Font Awesome
  • Font Awesome for adding a icons.
• W3C Markup Validator
  • W3C Markup Validator to check validity of HTML code.
• PEP8 Online
  • PEP8 Validator to check Python code for PEP8 requirements.
• W3C CSS Validator
  • W3C CSS Validator to check validity of CSS code.
• JSHint Javascript Code Quality Tool
  • JSHint Javascript Code Quality Tool to check the quality of the Javascript code.
• Balsamiq:
  • Balsamiq was used for creating wireframes during the design process.

Testing

Testing information can be found in seperate TESTING.md file.

Database

• MongoDB was used to create a database for this application.

Users collection

Key	Type
_id	ObjectId
name	String
last_name	String
username	String
password	String
email	String
registered	datetime

Posts Collection

Key	Type
_id	ObjectId
post_title	String
post_category	String
post_content	String
post_image	String
post_address	String
website	String
author	String
post_date	datetime

Categories Collection

Key	Type
_id	ObjectId
category_name	String

Deployment

• To view the deployed version of Wonderdam Please take the following steps:

Github

• Add this repository to your local workspace:
  • Click on the Wonderdam repository on GitHub link.
  • Click on the Code button, and copy the URL.
  • Go into your local workspace, and open up a new terminal.
  • Type git clone and paste the URL you copied from GitHub, and press enter. It should look like this:

git clone https://github.com/*username*/*repository*

The process of cloning is now completed. For further information on cloning, visit How to clone from GitHub.

MongoDB Configuration

• Login to your MongoDB Account.
• From Clusters tab, click on Connect
• Select Connect to your application
• Select Python as Driver and choose Version 3.6 or later
• Create a new env.py file in your project, paste and save the connection link and variables.

import os

os.environ.setdefault("IP", "0.0.0.0")
os.environ.setdefault("PORT", "5000")
os.environ.setdefault("SECRET_KEY", "<secret_key>")
os.environ.setdefault("MONGO_URI", "mongodb+srv://<username>:<password>@myfirstcluster.8s17w.mongodb.net/<db_name>?retryWrites=true&w=majority")
os.environ.setdefault("MONGO_DBNAME", "<db_name>")

• Create an instance of PyMongo

mongo = PyMongo(app)

Heroku Deployment

• Before deploying your project create a requirements.txt file by running the following command in the CLI:

pip3 freeze --local > requirements.txt

• Create a Procfile file by running the following command in the CLI:

echo web: python run.py > Procfile

• Log in to Heroku
• Select New on your dashboard and then select Create new app
• Choose a name for your application, select your region, and then click Create app
• From the app dashboard, navigate to Deploy tab.
• From Deployment method Click on Github and click Search then select your repository name.
• Once you select your repository, click on Connect
• After you conntect to your repository, click on Settings tab on your app dashboard, and click on Reveal Config Vars and add your configuration variables to Heroku.
• Navigate to Deploy tab, and from Manual deploy choose your master branch, and click Deploy Branch
• After you deploy your branch Enable Automatic Deploys.
• Site is successfully deployed, and any futher changes on the app will automatically be updated everytime they are commited and pushed on Github.

Credits

Content

• The text content on the website were adapted from each establishments website, aloing with Amsterdam Magazine and I amsterdam

Media

• The image content on the website were taken from each establishments own website, and social media accounts.

Codes

• Code to fix mixed content issue was taken from Stackoverflow
• Code for line-clamp was taken from CSS Tricks
• Code to show image previews on Add/Edit Posts are taken from Learn Code Web
• Code for user password input validation on Register form was taken from Stackoverflow
• Code for HTML email input pattern attribute was taken from Stackoverflow
• Code for Setting up Flask Mail was taken from Karina's Flask Mail setup instructions on Slack.
• Code used for setting up Flask Pagination were taken from Pythonhosted, and Mozillag
• Code for styling and structuring the forms were taken from Colorlib
• Code for fitting bootstrap card images evenly was taken from Stackoverflow
• Code for live character count on Add/Edit Post forms were taken from Codexworld
• Code for handeling errors on Flask was taken from Palletsprojects

Acknowledgements

Disclaimer

• All content on the website, including images and text, are used for educational purposes only.

Miscellaneous

• During the early development stages of the project, delete modal title was updated on User Profile page, but due to long hours of coding this commit was mis-stated as "Update delete modal title on post page" which was meant for Profile Page. See commit

• During the early development stages of this project, Admin user functionality was borrowed from a fellow student at Code Institute Franciskadtt along with 3 lines of comments as a placeholder, but later on this function was updated, and implementations were left out. See commit

• During the final development stages of the project, datetime format for post_date value was updated. During the committing process IDE gave an error related to an extension called Git Lens, and due this malfunctioning 2 seperate commits with the same name, but with different changes were added, which was meant to be a single commit. See commit-1, See commit-2

  back to Contents Table