Introduction
Hey everyone. So, the first project I'm going to bring up is one from my Web Design and Application course - codename
AskUs.
AskUs is a message board and discussion app, akin to sites such as Reddit or StackedOverflow. The user can create an account, log in, post questions, respond to questions, and vote on responses. This was the first group project for the course, and I'm happy with the way it turned out.
In the following sections, I will explain the technologies we used to create
AskUs. Additionally, I will detail my role within the group and how I contributed to the project.
The full project can be found on this GitHub page
here.
 |
| Homepage of AskUs |
Behind the Scenes
Let's take a look at the tools we used to create the project.
JavaScript was the language of choice for both client and server-side scripting, and Node.js was used to build the server (a little more on that later). This was the first course where I used JavaScript, and this project helped me get better acquainted with the language. The more I used it, the more I fell in love with how easy it was for me to use and understand.
Node.js uses JavaScript in order to build server-side environments for web applications. Users of Node.js can easily install modules in order to increase their server's functionality and make it more robust. Our team used Node.js to build the server for our project, and we used the express, body-parser, cookie/session, router, and jade modules. Express created a web application framework for us to support our project. Body-parser made it easy for us to parse through POST data sent to the server. Sessions allowed us to keep track of valid users (i.e. whether or not a user was logged in). The router module helped us set up routing information between the various pages of our app. Finally, we used the Jade templating engine in order to create our web pages.
The Jade templating engine allows users to create dynamic HTML pages based on the logic and data of the project. For example, our project contains different categories for questions (e.g. travel, food, entertainment). In regular HTML, I would have to hardcode the links to each category by typing out each individual link. If the team decided to add more categories, I would have to go back and add those additional links by hand. However, with Jade, the task becomes much simpler. Say we have an array listing all the categories:
...
tabs: ["new", "travel", "food", "entertainment", "relationship", "career", "life", "other", "myquestions"]
...
We can use simple logic to list out the links:
each tab in db.tabs
li(role='presentation')
a(href='/' + tab) #{tab}
Now, if the team wants to add more categories, the logic takes care of creating the additional links by looping through each element in the tabs array. Easy peasy, lemon squeazy.
Since our project constantly manipulated the DOM tree, Jade helped save us some of the headache of taking care of each change.
For styling, we used Bootstrap to give our project a polished, professional look. Bootstrap also allowed us to make
AskUs responsive, and we can easily adjust it for mobile deployment.
Git and GitHub handled version control for our project. It also allowed us to easily contribute to the main code base via forks and pulls.
Finally, we used Vagrant in order to create a development environment where we ran the server. The virtual machine we used came from Semmy Purewal's
Learning Web App Development, and it came with a full Node.js setup.
I would like to point out that our project does
not use a database for all of its information *shock and ahh*. At this point in our course, we had not yet learned how to incorporate databases into our projects. Therefore, all data was stored in a large JSON object located within the server code. When new data is inserted into the "database", we simply append the data into the JSON object in its respective place.
 |
| Our "database" |
My Contributions
Now I want to take some time to highlight my specific contributions to the team.
Our team only had about a month to complete this project. In the early stages of development, I partook in discussions with my teammates about the requirements and specifications our project needs. We held our group meetings in-person and online via email and Google Groups. These discussions took around 2 weeks.
After we focused on the specifications, one other member and myself took one week to create prototypes of the project. We then showcased our prototypes to each other and the other members of the group, and we chose the best parts of the prototypes to include in the final version of the project. Prototyping took about one week, and the rest of the time was spent on building the final project and documentation.
One of the main parts of the project I was responsible for was sorting the questions into their respective categories. The way I tackled this was that I appended a tag to each question. The tag corresponded to the category that the question belonged in. When the user clicks on a category, the code would look through all the questions with the same tag as the category and display only those questions. Questions would be sorted with the most recently created one listed at the top.
 |
| Sorting questions based on categories |
Additionally, I helped fine-tune the database. I fixed some bugs and errors that showed up, such as linking the correct creator to the question or response created. Furthermore, I advised another member on the delete system used in our project that allows users to delete his/her questions and responses.
Finally, I was the main author of the documentation which detailed how to use AskUs. I created a 20 page PDF with screenshots and how-to information.
Final Thoughts
This project taught me valuable information. I gained experience using JavaScript, Node.js, Bootstrap, and Jade. It was the first time I used many of these technologies for a big project like this, and it was interesting to see how everything worked together. I also gained experience working in a group environment. In order to contribute to the project, I had to take apart code written by other people in order to fit my pieces into the puzzle.
I am very happy with the way the project turned out. To reiterate from above, you can view the full project, along with documentation, at this
GitHub repo.
Thanks for tuning in,
Chris
