Showcase: First Capstone Projects of Batch 5

Setting Up the Culture

There seems to be an upward trend in the quality of outputs and expectations set for every new batch of campers that we have here in Tuitt Coding Bootcamp. This is a good thing for our campers considering the time and effort they invest in their projects.

The newest addition to our family of home-grown web developers, the Batch 5 Day Class, recently completed their first capstone project, which was created using the fundamental technologies and concepts needed for front-end development, such as HTML 5, CSS 3, Bootstrap, Responsive Web Design, and Mobile-First Development.

The Process

The following projects were initially evaluated based on the following expectations and standards set by their peers, but this does not necessarily reflect the campers’ overall rating of the project:

  • Content – clarity of message and purpose,  the absence of incomplete pages, and organization of ideas and information.
  • Design – clarity and easy usage of the interface, clever synergies of visual elements, decent color harmonies, and efficient use of space.

Both of the categories were rated using this scale:

  • 5 – greatly exceeded expectations
  • 4 – exceeded expectations
  • 3 – matched expectations
  • 2 – less than expected
  • 1 – much less than expected

For the overall rating, the mentor for the Front-End Development track still needs to do some further evaluation of each project, considering additional categories, such as code quality and responsiveness.

Project Lineup

So, here are the capstone 1 projects of our new set of campers in no particular order.

Drunk In Pub
Drunk In Pub

Created by Emerson Bacani

Content: 4.8 / 5.0, Design: 4.6 / 5.0

A liquor blog site that talks about liquor taste, price, and short reviews.”

— Emerson

Schloss Borussen
Schloss Borussen

Created by DJ Parulan

Content: 4.54 / 5.0, Design: 4.78 / 5.0

A website for the fictional winery, with information regarding its history, location, its people and products.”

— DJ

Chasing Sheep
Chasing Sheep

Created by Hannah Guzman

Content: 4.68 / 5.0, Design: 4.68 / 5.0

“Blog/website that focuses on sleep and sleep deprivation. Also contains a survey for user input.”

— Hannah

Focus
Focus

Created by Lester Jan Artienda

Content: 4.53 / 5.0, Design: 4.33 / 5.0

“Focus is a social media-themed website, concentrating on online photo gallery just like Instagram and Flickr. This website lets you post, share and like your own photos and view other people’s photo gallery as well.”

— Lester

Heroes and Lore
Heroes and Lore

Created by Christopher Seva

Content: 4.53 / 5.0, Design: 3.68 / 5.0

It’s all about short History and Lore of Heroes of Dota2.”

— Christopher

Cantada Sports Center

Cantada Sports Center

Created by Julie Cantada

Content: 4.71 / 5.0, Design: 4.43 / 5.0

“An all-in-one ultimate indoor and outdoor recreation and sports complex located in Taguig City.”

— Julie

Lisboa
Lisboa

Created by Yuji Puada

Content: 4.93 / 5.0, Design: 4.93 / 5.0

Information website for the city of Lisbon.”

— Yuji

My Fitness Website
My Fitness Website

Created by Francis Chan

Content: 4.95 / 5.0, Design: 4.8 / 5.0

A fitness website designed specially to showcase different exercises for specific body parts. It also includes fitness blogs and articles.”

— Francis

Upstream
Creating Sustainable Living

Created by Ken Davadilla

Content: 4.0 / 5.0, Design: 3.5 / 5.0

“A food & beverage company profile that contains product overview, articles, contact information, etc.

— Ken

Sea Breeze Beach House

Content: 4.8 / 5.0, Design: 4.95 / 5.0

“An accommodations website made for a private resort in Laiya, Batangas.”

— Charles

WebSight
WebSight

Created by Jhories Gaddi

Content: 3.5 / 5.0, Design: 3.76 / 5.0

“No description from the developer yet.”

— Jhories

Lubang: An Island of Paradise
Lubang: An Island of Paradise

Created by Dominic Cajayon

Content: 4.26 / 5.0, Design: 3.76 / 5.0

An online travel blog about Lubang Island for travellers.”

— Dom

TradeCode
TradeCode

Created by Raymart Baeza

Content: 3.71 / 5.0, Design: 3.86 / 5.0

“A blog site that focuses on the Philippines’ financial market.”

— Raymart

Marked Footprints
Marked Footprints

Created by John Paul Umali

Content: 4.0 / 5.0, Design: 4.43 / 5.0

Online visual diary and personal blog.”

— John Paul

Cross Roads
Cross Roads

Created by Jhun Agustin

Content: 3.15 / 5.0, Design: 3.15 / 5.0

A personal travel blog.”

— Jhun

Yakitel
Yakitel

Created by Jonathan Yaquiten

Content: 3.14 / 5.0, Design: 3.43 / 5.0

“A site selling computer parts.”

— Jonathan

Mechanical Engineers’ Golf Club
Mechanical Engineers' Golf Club

Created by Edward Cabanatan

Content: 4.5 / 5.0, Design: 4.26 / 5.0

A website for an organization of mechanical engineer golfers.”

— Ed

Gallery Parco Cibo
Gallery Parco Cibo

Created by Paulo Martin Santos

Content: 4.0 / 5.0, Design: 4.3 / 5.0

“A website/blogsite of food parks here in NCR. It also contains the products, review, locations, and etc.”

— Paulo

The Retail Group
The Retail Group

Created by Braile Gawigawen

Content: 4.0 / 5.0, Design: 4.26 / 5.0

“Site created specifically for Retail members only. (This is a group I currently work with).”

— Braile

2KmmrBlog
2Kmmrblog

Created by Edwin Dolor

Content: 3.76 / 5.0, Design: 4.5 / 5.0

A just for fun blog for 2k mmr/cancer dota players.”

— Edwin

Our Tees Printed Designs
Our Tees Printed Designs

Created by Jennifer Daigo

Content: 4.93 / 5.0, Design: 4.88 / 5.0

A website for personalized items printing shop.”

— Jennifer

University Belt Blog
University Belt Blog

Created by Kenneth Sze

Content: 4.43 / 5.0, Design: 4.29 / 5.0

A soon to be online community blog for students near university belt for sharing experiences and event announcements.”

— Kenneth

BTCBulletin
BTCBulletin

Created by Jeremiah Gamad

Content: 4.76 / 5.0, Design: 4.76 / 5.0

An information site that enables visitors to learn and get the latest news about Bitcoin.”

— Jeremiah

Quixo
Mon Medina

Created by Mon Medina

Content: 3.14 / 5.0, Design: 3.43 / 5.0

An online retail company that sells high quality folding bikes, the name “Quixo” came from the word “Quixotic” which means “exceedingly idealistic”. The same ideal the company is aiming for. I love you nanay. <3″

— Mon

Creepy Cryptids
Creepy Cryptids

Created by John Kenneth Lee

Content: 3.76 / 5.0, Design: 3.26 / 5.0

“A site telling some facts about Cryptids. From the infamous Bigfoot to the Aswang.”

— John Kenneth

Gaming Infosite
Gaming Infosite

Created by Dennis Malbas, Jr.

Content: 4.4 / 5.0, Design: 4.6 / 5.0

“No description from the developer yet.”

— Dennis

Indent
Indent

Created by John Florentino S. Dunglao

Content: 4.76 / 5.0, Design: 4.5 / 5.0

“A company portfolio aiming to inspire developers and clients alike, showcasing the works of a design company.”

— Florentino

Adopt Don’t Shop
Adopt Don't Shop

Created by Daniel Talosig

Content: 4.0 / 5.0, Design: 3.26 / 5.0

It is a website of a specific person (shelter owner) that contains news for all the saved/adopted dogs, and dogs that are available for adoption (with user & admin page).”

— Daniel

Easy E
Easy E

Created by Bernard Zumel

Content: 4.5 / 5.0, Design: 4.4 / 5.0

“A website that will help ECE students and reviewees in their studies.”

— Bernard

One Down, Two More to Go

“The journey of a thousand miles begins with one step.”

— Lao Tzu

The bar of expectations has been raised to a higher level. So, let us keep the momentum up.

Good job, Batch 5 Day Class!


Capstone 2 (Making things dynamic)- Instructor’s Verdict

In this capstone project, the students were asked to create a database-driven website that incorporates the core functionality of dynamic websites. These functionalities are popularly known as CRUD. The acronym CRUD refers to all of the major functions that are implemented in relational database applications.

The acronym, which stands for Create, Retrieve, Update, Delete, is a very important part of computer programming that is a basic function of any computer database or a program with persistent storage.

After weeks of programming, testing  and consultation, let us now look at the students’ projects.

Online Exam

The idea behind this project is to make test-making and checking less tedious for teachers. Based on the submitted proposal, a teacher will login to the system, create a quiz, enter the questions and the correct answers and then publish. When a student takes the test, it will automatically be checked and the grade will be stored in the database.  The student was able to finish up to the part where a teacher can select the kind of test and the number of items in that test. A view of all the created tests was also provided in the system. Sadly, other important functionalities of the project were not accomplished. This project is due to be finished and all the missing functionalities are for completion.

Update: The project is now 80% complete and has the CRUD functionalities. (Score: 3 /5)

CMS (National Museum) 

This student took the first capstone project (static website) and made it dynamic. All entries, articles and write-ups are now dynamically being pulled from a database. The website also looks very clean and you can see that the student took the extra mile to read and study other features that were deemed necessary for the project. The addition of the TinyMCE feature is one of the best features of this work. 

The verdict: Almost all elements in this project are in the right place. All elements complemented each other. Everything is seamless plus all admin account privileges are present.  (Score: 4.4/5)

Celebrity Bazaar 

A platform for celebrities selling their items online, this project has already been conceptualized before we were even finished with our discussion about database-driven applications. When the idea was brought up, there were reservations on the ampleness of time to finish it. When the project was presented, it was surprising to see the progress of this work and the array of functionalities available for the administrator. 

The verdict: It was evident that the student made the extra effort to study other topics to improve the project. Although there were some minor errors, it was quite evident that a considerable amount of time was spent in conceptualizing and creating the capstone project. As an update, the Paypal payment method was even made to work. (Score: 4.2/5)

IT (DepED) Support System 

This project aims to address the problems in the student’s current workplace. The major problem that they are having right now in their office is keeping track of the pieces of equipment that goes in and out of their department. The student’s team handles all the repairs, installations and computer hardware problems of all public schools in Quezon City.  

In this project, every time an equipment arrives, the student was able to insert it in the system. All of the team members can see the status of each equipment. According to the student, an equipment’s status can be repaired, for pick-up/releasing or pending. 

The verdict: The project has a big scope. It would’ve been better if the student concentrated first in the functionalities needed in the office. The student ended up trying to do a lot of customized functionalities, resulting in features that were not working. The good thing about it though, is that this project is scalable and can be used (once it’s done) not only by their office, but the whole department. (Score: 3.9/5)

Document Tracking

The Document Tracking System is another project that aims to automate how work is being done in the office. Everyday, the worker fills-up paper forms for vouchers and budget requests and manually routes them to the other departments for encoding and verification. After passing through the various departments, the worker then collates the papers back and manually types all the information in the paper form in an electronic spreadsheet.  

The verdict: For the system, the interface provided a dropdown menu to select the type of document that will be entered in the system which is a very important function for report generating and sorting of records. It is a key component of the system because it defines the route the document will take.  It also provided a page that lists all of the documents entered in the system. It can be sorted by day, month, status and document type. It has all the CRUD functionalities required for the documents. In the system, a document entry can be created, read, updated and deleted. The addition of data-tables in viewing entries is a welcome addition to give the administrator different ways of sorting the entries.

However, some of the functionalities can be further improved like:

  • Not all users should have the capability of updating and deleting records.
  • Definition of roles and privileges should be clearly defined
  • Generating reports in printable format should be added.

Overall, with some minor adjustments and additional functionalities, this project is ready for deployment in the student’s workplace. (Score: 3.6/5)

Turnaround Time System

In computing, turnaround time is the total time taken between the submission of a program/process/thread/task for execution and the return of the complete output to the customer/user.  The Turnaround Time System aims to generate reports based on the number of hours logged by a worker against the the number of hours required to accomplish a task. The administrator of the system can login to the account, create an entry, add the name of the employee and assign that employee to a project. The administrator then determines the number of hours required to complete a project.

The verdict: The CRUD functionalities are present. The administrator can create an entry, list all of the employees and their assigned project, as well as the number of hours needed to complete a project. However, there are some functionalities that should be present to create reports for decision-making better. The number of hours logged by a worker should be consistently present in the view of employees involved in a project. Overall, adding the missing functionalities and a little improvement in the user-interface will make this project ready for submission to the client. (Score: 3.2/5)

Learn Korean through Online Exercises

A learning portal for people interested in learning the Korean language is the idea behind this capstone project. The student found out that there were a lot of websites that offer Korean lessons but very few were actually giving out interactive exercises to practice what was learned. The system that the student had in mind is also capable of creating schedules for tutors and tutees either through online class or face-to-face interaction.

The Verdict: The website has the required CRUD functionalities. An admin or a teacher can open a class, add students, add lessons and exercises, as well as open a schedule for tutoring. The teacher can view all the lessons created and also has the capability of editing and deleting the different classes and exercises. In the website, a person can either login as an admin or a student. For student accounts, the list of all available exercises and schedules are available and it has capability to build and select exercises and lessons.

There are still some improvements to be done, especially for the side of the students. Populating the list of students enrolled or part of a class still needs fine-tuning. The front-end looks good and is very intuitive. Overall, tying loose-ends and fixing the different views will make this project stand-out. (Score: 3.7/5)

Travel Agency Website

When we suggested that the students create a project that is close to their heart, that’s exactly what this one did. The travel website that this student envisioned allows customers to view tailored itineraries built by the travel agency. At the same time, the travelers can also create their own itinerary and join other travelers’ itinerary. The idea behind this is that, a lot of travelers travel alone, and they can’t get the different discounts being offered for group travelers.

The verdict: To start with, the splash screen is visually appealing. A traveler can create an account, login and create an itinerary. This created itinerary can be viewed by other travelers who wants to join this itinerary. The admin account can view all the travelers in the system, as well as the different itineraries linked to their account. The admin account view needs some improvement in the arrangement or the placing of the different forms of elements. There are still some missing functionalities for the admin and the travelers’ account. Although the CRUD functionalities are there, restrictions on certain areas of the website should be implemented. (Score: 3.6/5)


Night 2, Capstone 1 Instructor’s Verdict

After a few weeks of learning the basics of coding and web development, it is now time to apply them in an actual project! The first Capstone project aims to give the trainees an actual feel on how to create their very first static website.

The trainees were required to work individually but with the guidance of the instructors, as well as the other trainees.  For the theme or concept of their website, they were told to do something close to their personality or something that interests them. They were also expected to use the skills that they’ve learned in the past few weeks. However, they were not limited to using just these skills.

Most of them were excited about the prospect of making their own website, but at the same time, some were also nervous and anxious about the prospect of coming up with something from scratch and presenting it to other people.

Now, after a couple of weeks of working on their capstone project, it’s time to present the fruits of their labor.

First of all, we would like to congratulate all the trainees for doing their best to come up with their project. Almost all of them finished their project on time. But if we’re going to ask them, they would say that their project could have been better had they had more time.

When we said to the trainees that they should create a website about something  that is close to them, everybody heeded the call. The trainees created websites that are either related to their work, or something that they do on a regular basis like drinking coffee and traveling.

Instructor’s verdict:

I feel that most of them got too excited with applying all the skills they’ve acquired and the other skills they got from reading, that they ended up trying to put everything in their project. The trainees often find themselves switching themes and styles for their project. Overall, the trainees came up with good projects that could still be improved as they acquire more skills and experience in making websites.