Hiking is a favourite past time of mine. Hiking time represents a respite from work, time with nature and it is an activity that heals the mind, body and soul. Travelling globally to hike is not going to be possible for awhile due to the global pandemic but it is still possible to hike locally and often, we may find some undiscovered gems along the way. This project is my dedication to the love of hiking. It is to be a platform for the global community to share their experience be it in joy or in frustrations of their time spent during their hikes.
The deployed website can be found here
The colour chosen for this website is base on nature theme. The navbar is chosen to have a dark green colour to match the image on the parallax. The colour of the background (the html body) is chosen to be light yellow, to give some colour to the site as well as to make the cards stand out. Yellow is also chosen, to give the site a bright feel. The cards are chosen to be white to make the text and content stand out.
- The user, as a hiking enthusiast, would like to browse trails by countries and location to enable him/her to plan his/her hiking trip on his/her visit to that country.
- The user should be able to see a directory of all the trails available.
- The user should be able to search for a specific term in the search bar in directory.
- The user should be able to register to create a profile on the site.
- The user should be able to manage his/her profile on the site.
- The user should be able to post as well as rate the hiking trip, edit and delete his/her comments on the site.
- The user presumably would want to see the trails sorted by ratings.
A basic wireframe was drawn with AdobeXD to act as a the scaffold for laying out the website. The wireframe can be found here.
a. Feature that draws the user attention and persuades user to browse the site information.
- The landing page/ index page is a parallax/jumbotron image of a hiking trail that welcomes the user. It has a Call-to-Action heading and a button that links the user to the directory of the trails.
b. Feature that allow user to easily navigate to other pages in the website.
- At the top of the homepage, there is a nav bar to allow user to click the links to other pages. Each link serving its own function.
- At the bottom of the Home Page, there is a footer that encourages users to download the app in IOS Appstore or Android play store.
- There are also links to the company information and also to social media sites.
c. Features that inform user of the latest review/comments and also to allow user to quickly access the directory.
- Below it, there is a row of cards to show the latest 3 comments, by the global hiking community. The 3 comments are the most recent comments in all the trails combined.
- Below the row of comments, user is able to browse the hiking trail by countries, sorted by region and then by towns.
a. Search feature
- There is a link in navbar to a directory page.
- On this page, the users are able to see a search form input and 2 select drop down with checkboxes. The 2 select drop-down checkboxes allow users to filter the trails by route-type or route difficulty.
- If the user keys in an empty string, the search result will return all trails in the database.
a. Sorting feature
- After the directory link in the navbar, there is also a "Top Rated" link in the navbar.
- Users are able to see all trails sorted by average community ratings (in descending order). (From 5 stars rated to unrated(0 star)).
a. User Registration Feature
- If user clicks on the "Register" link in the navbar, they will be directed to the Register Page.
- Over here, user will see a form to let them register their name, country of origin, e-mail, username, number of tracks completed and upload a profile photo.
- Upon form submit, user will be directed back to the home page and they should see an alert message "Registration Successful" just below the parallax.
- If user use a non-unique username or an invalid e-mail address, user should not be able to register successfully.
- With a non unique username, user will see the error message "User already exists. Please choose another username." flashed out in the form.
- With an invalid e-mail address, user will see the error message "Not a valid e-mail address" flashed out in the form.
a. User Login Feature
- The login page is a simple page consisting of a form with just 2 inputs and a submit button.
- The first input required is username.
- The second input required is the user's e-mail address, submitted during the registration process.
- The forms are validatted to reject login if user keys in the wrong username or the wrong e-mail address.
a. Feature that allows user to read trail information:
- Every trail document in the collection has its own page.
- The trail page has an image of the trail or an image of the main feature in the trail on the top right of the page.
- Next to the image, there is also an embedded google map showing the trail route.
- At the bottom, there is a bordered rectangle containing the trail description, trail distance, trail route-type, trail elevation, trail difficulty level and finally the average star rating of the trail (rated by the comment owners).
b. Feature that links user to a comments/reviews form for writing comments/ reviews.
- Below the bordered rectangle containing the trail details, there is a floating button that allow users to add comments/reviews.
c. Feature that allows user to read community comments.
- The comments are displayed in rows of cards below the "add comments" button.
- Every comment card has a profile photo, the name of the comment owner, the date posted, the stars rating by the comment owners, the body of the comments, the word tag that describe the trail sightings, the date hiked and the time period taken to hike in hours and minutes.
a. Feature that facilitates user to write in their reviews/ comments
- When the add comments floating button is clicked, user will be directed to a forms page that allows them to input their trail reviews and comments and give a rating to the trails.
- This feature is only available if user registers and log in.
- If user does not log in, he/she should not be able to post or edit or delete any comment. But he/she should be able to view all the information and comments/reviews. b. Post and Edit Comments form features
- The ratings of the trail are a row of stars. Clicking the stars by order will give the rating of the trail. The stars are arranged from left to right, with the left-most star representing a rating of 1 while the right-most star represents a rating of 5. For example, when the 3rd star is clicked, users should see 3 stars coloured with orange while the rest is gray. This represents a rating value of 3.
- The form also has a dynamic input for sightings. The user can input a phrase or a short word tag to describe the sightings seen during hiking. For example, if the user wants to key in "Cars" and "Trees", the user needs to key in "Cars" in the first sighting input, after which he/she has to click the '+' button to add an input to the form. Then he/she will be able to key in the word "Trees" in the second sightings input. To remove the dynamically added input, the user needs to click the '-' button. However the user need to submit at least 1 sighting word/phrase to succesfully post his/her comment.
The technologies used for this project are:
- Flask (Release 1.1.2)
Flask is the microweb framework that supports and serves the web applications (services). It provides the logic and controls the database access, view templates and session management to the client. Flask is written in python and it is the main project requirement. - Python (Release 3.8.3)
Python is the programming language used in Flask. - HTML5
HTML is the markup language that structures the webpage documents. - CSS3
CSS is the style sheet language that supports the presentation of document written in HTML. - Jinja
Jinja is leveraged by Flask as its template engine. Although HTML is still needed to structure the web documents, Jinja dynamizes the web documents. - Javascript and JQuery
Javascript and Jquery is used primarily to do DOM manipulation and it is the main engine to serve interactivity and event handling to the webpages. - Materialize
Materialize is a responsive CSS framework library based on Material Design by Google. The template writting process to build this site is eased and hasten with the usage of this library. - Gitpod
Gitpod is an online IDE that can be launched in Github. It is used to develope and write the code for this project. - Git and Github
Github is an online hosting service for software development that utilizes Git for version control. - PYMongo Release 3.10.1
Pymongo is a Python driver for MongoDB. It is the engine that allows Flask to interface to MongoDB. - PyMODM Release 0.4.3
PyMODM is the generic ODM (Object Document Mapper) that works on top of Pymongo and is used to ease data structuring for this project. - WTForms Release 2.3.1
WTForms is a form validation and rendering library for Python development. It is used in this project to simplify forms building. - Flask-WTF Release 0.14.3
Flask-WTF is an integration of Flask and WTF that provides CSRF, file upload, and reCAPTCHA. - Cloudinary Cloudinary is used for its cloud-based image and video management platform to enhance user experience in this project's profile registration process.
- Google Fonts Google Font Ruluko (sans-serif) is used primarily to style the headings in the HTML documents in this projects. Google Font Crimson Text (serif font) is used as the content font in the HTML documents in this projects.
- Font Awesome 5 Font Awesome Icon is used in the footer for Instagram, Pinterest and Github links
The database used in the project is MongoDB. MongoDB is a cross platform document oriented database program. It is classified as a NoSQL (non relational)database that provides a means of storing data in JSON-like format. MongoDB has a fully managed cloud database service called MongoDB Atlas and this database service is being used in this project.
A rough ERD diagram to illustrate the data structure is shown in the here. For a detail explaination of the database structure, please refer to database_structure.md in here
This project is partially tested using automated testing and fully tested manually. The testing process is detailed here
This project is build using Gitpod. The steps I went through to run the project locally are as follows:
- Sign up for a MongoDB Atlas account here
- Follow the steps to creating an Atlas cluster here
- Install the gitpod extensions for the local machine browser.
- Sign up for a github account and login.
- Sign up for a gitpod account and link it to github account.
- Go to the personal github pages and start a new repository using the Code Institute Gitpod Full Template
- The project folder will be available on the personal github page repository.
- At the top right of the personal repository, you will be able to see the green coloured Gitpod button like the picture below:
- Click on the Gitpod link to open up the development environment for this project in Gitpod.
- Once the project has fully loaded in the browser, a Visual Studio Code-like editor with a terminal will be seen.
- In the terminal, type in the below command to install the dependencies.
$ pip3 -r requirements.txt
-
In the main directory of the gitpod project, an .env file have to be created. In the .env file the following environment variables have to be setup.
a. MONGO_URI = mongodb+srv://[database_root_username]:[database_root_user_password]@[cluster_name].mongodb.net/[database_name]?retryWrites=true&w=majority
The above is just an example mongodb connection string. The string can be found in the mongodb atlas connection in each project folder created.
b. SECRET_KEY = a random string generated from any random key generator sites
c. CLOUD_NAME = cloudinary name provided when signed up for cloudinary account.
d. UPLOAD_PRESET = cloudinary upload preset.
e. API_SECRET = api secret provided by cloudinary.
f. API_KEY = api key provided by cloudinary. -
After setting up the environment variables and installing all dependencies, the database collection need to be setup to ensure consistencies in the data. This is done by running the models.py file as below:
$ python3 models.py
- After that, the database need to be populated with the data. This is done by automating the process as below:
$ python3 insert.py
- Finally, run the app on the terminal / command line interface by typing the below into the terminal like so:
$ python3 app.py
The steps taken to deploy this project on Heroku are as follows:
- Sign up for Heroku account
- Install Heroku CLI in the gitpod terminal if it hasn't been installed
- If Heroku CLI has been installed, type in the below to login Heroku
$ heroku login
- Login Heroku via the opened browser. If browser window is not able to display, open the site in a new window and login heroku.
- Type in the below to create a heroku app, where
<the_name_of_the_project>
is the name of the project to be deployed.
$ heroku create <name_of_the_project>
- then create a remote repository by typing in
$ git remote -v
- Install gunicorn with pip3
$ pip3 install gunicorn
- Create a Procfile with the content "web gunicorn
<name of the project>
:app" - Freeze all project dependencies by keying in to the terminal
$ pip3 freeze --local > requirements.txt
- commit the project to github again
- Finally push the project to git as below:
$ git push heroku master
- Before opening the deployed project url, the same environment variables like the local deployment have to be set up. To do that, in the terminal, type the following (the empty strings have to be filled in with the appropriate variable):
$ heroku config:set MONGODB_URI='mongodb+srv://...'
$ heroku config:set SECRET_KEY=''
$ heroku config:set CLOUD_NAME=''
$ heroku config:set API_KEY=''
$ heroku config:set API_SECRET=''
$ heroku config:set UPLOAD_PRESET=''
- Finally, the deployed url can be accessed from Heroku dashboard in their website :
https://dashboard.heroku.com/apps/projectname
where the [project name] is the name of the deployed project via an 'Open App" button on the dashboard, else the deployed link can also be found in the terminal message just right after executing step 11.
- Sugar Loaf Trail Image: Shutterstock
- Powerscourt Waterfall Trail Image: Flickr
- Black Castle Wicklow Image: Shutterstock
- Mulaghcleevaun Image: Flickr
- Torc Waterfall Image: Flickr
- City Centre to Shannon Fields Image: Limerick
- Minoo Park Trail Image: Japan Visitor
- Mount Ikoma Image: Getty Images
- Shijonowate Suihen-Shizen-en Trail ImageMuroike WaterPark
- Kanmangafuchi Abyss Trail ImageImage
- Hiji Falls Trail Wikipedia
- Hooker Valley Track Flickr
- Kea Point from Mount Cook Village Image
- Orakei Basin Walk Flickr
- One Tree Hill Walk Flickr
- Queenstown Gardens Lakefront Walk Flickr
- Queenstown Hill Flickr
- Coney Island Park NParks
- Parallax Image on Landing Page: Zotx
- Hiker Henry Profile Photo: Unsplash Credit
- Joe Jogger Profile Photo: Man in Red Jacket
- Website Logo: Flaticon
- 404 Error Image: Freepik
- 401 Error Image: Freepik
- Appstore Badge in Footer WorldVectorLogo
- Playstore Badge in Footer WorldVectorLogo
- The Embedded maps are from Google Map
- Some of the trail data are from All Trails
- The others are manually obtained from Google Map by looking at the route on google map.
- City Centre to Shannon Fields Riverside Walk Trail data is taken from Limerick.ie
- My teachers in Trent Global College for teaching me the basics to do this project.
- The college teaching assistants John and Arif, for giving me valuable feedback.
- MongoDB Manual Manual
- StackOverflow community StackOverflow for various post I can refer to when I encounter mongoDB query related problems and flask, python and jinja related problems.
- PyMODM example on pip3 page Pypi
- PyMODM documentation Pymodm read the docs
- Rating Stars Display by Tatu Ulmanen
- Rating Star Radio Button inspired partially by Lea Verou.
- Dynamic form for the comments is totally creditted to Rafael Medina. Without this tutorial, I would never have been able to add fields dynamically in forms.
- Jinja Documentation Jinja Documentation on how to manipulate variables in template.
Any content and images used on this website is purely for personal development and educational purpose. They are not meant for profit or for income purposes.