WAYFARUS

Front & Back-End Web Development

Discover and visit locations around the world using Wayfarus, the interactive travel blogging platform.
Connect with friends and share stories by logging destinations that you have visited.

Year

January - April, 2015

Type

Individual, Academic

Role

Web Designer, Web Developer, Database Designer

Tools

HTML, CSS, Javascript, PHP, MySQL, XML, XAMPP, Git

Wayfarus is a web platform designed for encouraging people to explore and discover new, popular and reclusive areas around the globe. These areas can be areas that friends have already visited and have blogged about or from a blog about locations that users have personally visited and recommended visiting or areas that the users are highly interested in visiting.

Lesson

Project Brief

The project brief was flexible towards any website concepts, but needed to follow website features as deliverables.
The deliverables were broken down into four phases. The first phase being the front-end design and base template, the second phase being the integration of the database to the website, the third phase being the implementation of RESTFUL APIs such as Twitter API and Flickr API, and the last phase being the necessary implementation of AJAX for at least one web page.

Challenges

One of the challenges for this project was underestimating the scope I wanted to accomplish and the amount of time it would take to accomplish it. It was my first time developing an SQL database as well as many of my peers, so most of us struggled to finish our deliverables in a timely manner due to the vast amount of material we had to learn and the overall difficulty of the class. I was unable to reiterate and polish the Front-End web design, which was something I was hoping to finish by the end of the project even though I finished the main deliverables.

To compensate for this, I dove back into my code and made sure that all bugs were fixed or at least fully documented in the technical report so that I could fix them in the future. This was unnecessary because fixing bugs did not result in any extra marks, but I thought it would be good practice to do so. Some of the challenges that were not documented in the technical report was working PHP and avoiding messy code, especially when working with AJAX and creating HTTP requests.

Reflection

Looking back on the amount of knowledge that I have gained and the progress that I made with my website and documentation, I would say that the project was an overall success, even though I couldn't finish and polish the front-end design. If I were to go back and fix some of the major bugs, I would look into some best coding practices for PHP as well to organize some code that previously written because PHP is an inherently messy scripting language to work with.

Design Process

Entity-Relationship Diagram

Entity-Relationship Diagram

An entity relationship diagram is one of the most common ways for sketching out the infrastructure of a database and communicating ideas to a client for back-end web development. Tables are how data entries are stored in the format of rows and columns within these tables. A good practice would be to use third form normalization to ensure that duplication of data entries would not occur in each table. The diagram that I have created, shows that the three main tables build the foundation of the website which include member accounts, premium accounts and visitor accounts. Referencing these tables, the other tables such as the comments table, markers table and blog post table, are able to use the userid keys for identity which user commented, marked a location or posted a blog.

Technical Report

Technical Report

When developing the website, our instructor divided our deliverables into four phases that we needed to meet throughout the academic term. Bonus marks were given for implementing extra features that were difficult to code, such as the "follow user" feature.

This technical report includes the documentation for the last phase of the project as well as all the fixes that I made from previous phases and a few glossary pages for navigating through my php files. I also included screenshots of bugs and code and a mockup for the front-end design that I had envisioned for the website for future implementation.

I received the highest mark in the class for this phase of the project for my overacheivement of fixing previous phases of the project, my detailed documentation and my implementation of the bonus features on my website.

Next Project