Capstone 3: Using a PHP Framework – Instructor’s Verdict

Framework

Why use a PHP Framework? This is the question I often get from students when they are first introduce to the idea of using frameworks.  Frameworks speed up the development process by automatically creating functionality like CRUD so that the developer can focus on creativity than base structure.

This will save the developer hundreds of hours from re-inventing a wheel on how to do common operations such as Form Validation, File Uploading and Database Saving.  Admittedly, their is a steep learning curve with frameworks. But when the students got over the idea of using MVC, everything started to make sense for them.

The Project

In this capstone project, the students used a PHP framework called Laravel. Laravel is a free, open-source PHP web framework, created by Taylor Otwell and intended for the development of web applications following the model–view–controller (MVC) architectural pattern.  Most of the students created their own blogging system that incorporates all of the concepts they’ve learned from Laravel. Let us now take a closer look at their final capstone project for this bootcamp.

One of the more popular choices in creating a Laravel project is the blogging system. For the night class, almost all of them created a blogging system that reflects their own personality.

Travel Sphere – This blog site aims to showcase the different countries and places Dexter has been to. It has the basic functionalities of a blog site lorem ipsum

Happy Tummy is a food blogging application giving Jhonelle the avenue to express his love for food ansimilar to those of a food critic. It was built with Laravel 5.4

  Kailan Ka Available? – Is one of the best projects from this batch. It was an idea that spawned

 


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.


An Outside Point of View

So what is it really like out there?

For a bootcamper, a career shifter, to find his place in the tremendously competitive world of software engineering, in the world’s major tech hub?

This is what our special guest talked about, when he graced us with his presence last August 3, a week before the Batch 5 students graduated.

Ricky Rizal Zein lives in San Francisco, USA and has been working as a software engineer there for about four years. He started off like many of our students now: had no background in programming, and all he had was his resolve to change careers. He has worked his way up since, and currently is at a new crossroad— going back to a startup after working for a large company.

Ricky held a 30-minute talk at the bootcamp, followed by nearly an hour of question and answer from him and the students. He told us his whole journey in this career— from what he did prior to programming, to cementing himself in the industry.

The Journey Begins

“I studied Anthropology in college,” he said. “I didn’t grow up thinking I wanted to code.”

After college, he moved to San Francisco to work as a community organizer for the Red Cross. But working for a non-profit in one of the most expensive cities in the US was hard, he remarked, and he was running out of money. So one day, after a bad day at work, he decided to quit and join a study-now-pay-later bootcamp. There is huge demand and competition for engineers in San Francisco, and his bootcamp provided the gap.

App Academy was the second bootcamp to open in Silicon Valley, and the first to apply a study-now-pay later scheme. He was at the second-ever batch, and at the time they were around 30 people. There, he studied mainly Ruby on Rails among other technologies.

Ricky said he had to rent out his apartment in San Francisco because he couldn’t anymore afford to pay rent without income. He bought an air mattress and slept at the bootcamp for the whole duration of studying there— also three months.

“So I’d wake up, go to the gym at 6am, workout, and well, a huge reason for my going to the gym was that so I can take a shower,” he quipped. “Then I’d be at the computer by 8am to 12 midnight.” He added some of his fellow bootcampers did the same thing.

Ricky admitted that his initial reason to go into software engineering was because he needed the money. “It was either I make it in SF or I go back to my parents’ house, in Virginia,” he shared. “But when I joined the bootcamp, I settled into a mindset that this is what I’m going to do for the rest of my life.” And he said, that since then, he gave his everything.

Bootcamp Experience

“Being at the bootcamp was like being in a new country, an immigrant,” he observed. “You don’t speak the same language, and you’re in a new place where you have no sense of orientation whether you do right or wrong.”

Ricky noted that some of his classmates had background in engineering, and some didn’t, but overall he still considered himself being “at the bottom of the rung”. There were many times he questioned his capabilities.

His key takeaway from this experience, he maintained, was how important it was to adjust himself to the engineering language and culture. “On one hand, it’s important to learn how to code, but on the other, you also have to learn to walk a certain walk, talk a certain talk.” He surrounded himself with everything tech-related, like reading tech news and blogs, or getting lunch with his classmates and making nerdy jokes with them. It is through these, he said, that he learned to get a sense of how engineering works.

Job Hunt

Ricky considered this experience harrowing, sharing with us how much rejection he had to face before making it.

He identified the companies he was interested in, then made a running list of the qualifications they were looking for. He stated, that for the most part, “you’ll only be aware of two to three out of the many technical skills they are looking for, and that’s completely normal.” And this is why, he told the students, that they should take it upon themselves to study more technologies outside of the bootcamp. Ricky would do small online tutorials of these new technologies, or make one project out of it, so he would be prepared when interviewers ask him about it.

He also said he sent about 15-20 applications to companies a day, and had about 4-5 interviews a week, “and a lot of them were terrible”. He was even escorted out of company premises more than once. “But you eventually learn to build a shield around yourself and you just get better.” He mentioned that he and his classmates also helped each other a lot, sharing and discussing interview questions.

He finally got into his first job, at a startup called Teespring, after they gave him a challenge to create an “Unbeatable Tic Tac Toe”, which he spent a lot of time doing.

Getting a Job and Impostor Syndrome

Another completely different journey.

Ricky said there were about six of them when the company started, with three engineers, including him. He exclaimed that his boss intimidated him then, and many times thought that “them hiring me was a mistake”.

“That’s what happens when you make a career change. You might always think you’re not good enough, that you’re a fraud, that people will think you’re not as good as you actually are, and fire you.”

Impostor syndrome is pretty common among engineers, he professed. “But this motivated me, to just ask even the most stupid questions to my manager.” 

He and his manager pair in day in and day out, where his manager mentored him on a lot of things. He commented that “a year of asking stupid questions to my mentor helped me become familiar with the tools and get the job done.” He attributes much of what he knows now to his mentor.

Teespring grew from six to 300 people, with 15 engineers, and Ricky became its senior principal engineer. “It is very rewarding to think about how I was able to take part in building projects that brought the company millions of dollars.”

Early this year, Ricky left Teespring to join a larger company, that had about 80-90 engineers. But he soon realized he preferred startups over big companies. His former mentor recruited him to join him in his new venture, which Ricky accepted.

Advice to the Bootcampers

Ricky capped off his talk with three points of advice to the bootcampers:

  1. Never be afraid to ask stupid questions. Think of it this way: In your job, if you act like you know what people are talking about, and let people think you know them, a couple months past these things you don’t know will come up again and you’d be more embarrassed to ask them.
  2. Find a mentor. Find someone you want to emulate and don’t be embarrassed to ask him or her to be your mentor. You won’t be alone in your journey. You’d be surprised by how many people would be willing to do this; many people do enjoying teaching!
  3. Avoid cargo cult programmingCopying codes without knowing how it works, and pasting them on your work, is a recipe for disaster. It is important that you understand things at a deeper level: read documentation, figure out what functions, the technology, design, and theoretical aspect of what you’re doing.

After his talk ended, questions from the students came flooding in. The whole talk ended after more than an hour. And then, that was it!

Thanks Ricky, for these insights. And shout out to our alumna, Regine, for bringing him in!


Graduation and First Mixer

August 8 was the graduation day of our 4th Day Batch who have completed Tuitt’s 3-month web development training. It was also the first time we hosted a mixer event for alumni and recent graduates. Needless to say, it was a day filled with triumph, fun, laughter and food!

You can watch this recap video below to know about the day’s events.

It was around 10am when the graduation program started. Opening remarks was given by Sir PeeJay Saracho, followed by a keynote speech by Allister Alambra, one of Tuitt’s directors and consultants. Next up was the awarding of certificates for all trainees, top 3 achievers and special awardees, respectively. Some students were also game to give short messages once they received their awards.  The graduation capped off with Sir Billy giving a closing remark.

In the afternoon, we held an event that allowed alumni, recent graduates, as well as staff, to mingle, form bonds and strengthen connections. We call this event a “mixer”. It was the first time we tried organizing an occasion like it and thankfully, it was a success! Although not all alumni were present, we were still able to realize the event’s goal and that’s what matters 🙂 Next time though, we’ll try to schedule events like this on a weekend so that even more people can join.

That is it for this fourth batch! We are truly proud of them. As they say, no goodbyes, just see you around! 🙂

 


Visitors, Singers, Programmers

July 14, 2017

Today is the second demo day of our Batch 4 (Day class) campers! This time, we invited representatives from FFUF Manila Incorporated, where one of our alumni also works, to check out and observe the students’ presentations as well as see potential hires.

Trainees together with FFUF representatives

Prior to the presentation day, Sir Peejay, one of the instructors, helped determine the 11 projects to be presented. The factors for inclusion were the trainees’ quality of output, time dedicated to the project, and their confidence to present.

The Furious Eleven

So after several days of less than 4 hours of sleep, several cups of coffee, and a ton of hard work, let’s go ahead and take a look at the projects crafted by our aspiring developers. To check out the actual sites, simply click on each heading.

Book Musketeers

Created by Joan, Book Musketeers is a minimalist and serenely designed web application for sharing ebooks online.

My Ragnarok DB

Created by Nar, My Ragnarok DB is an online database of Ragnarok Philippines game with real-time chat system for site members.

Wooden Hanger

Created by Pidz, Wooden Hanger is an e-commerce web application for clothes, bags, watches, and accessories.

The Bacon

Created by Mark, The Bacon is an e-commerce web application for buying and selling custom-designed t-shirts.

Original Sin

Created by Paul, Original Sin is an e-commerce web application for a physical pastry shop.

Chocobo Hut

Created by Jaekz, Chocobo Hut is a web-based mobile-friendly application intended for information sharing about the game, Fantasy.

Bookstogo

Created by Julie, Bookstogo is a web-based library system wherein a user can maintain records of borrowed and returned books.

Online Learning System

Created by Benedict, Online Learning System, as the brand name implied, is an online learning system for any academic institutions.

Monoposto

Created by Nico, Monoposto is a web application crafted with subtlety in mind for Formula 1 racing history and data visualization. He utilized the Ergast Developer API and The Guardian Open Platform for the application’s main source of data.

Karauke

Created by Emman, Karauke is an online version of Karaoke but using song lyrics with ukulele cords with the option for users to create his/her own entry.

When In Naga

Created by Kevin, When in Naga is a personal custom-made blogging platform and CMS.

 

On a fun note, this second capstone presentation made a mark in Tuitt history because of one presenter’s unique performance. Emman, the person who created Karauke, treated us to a ukulele number as demonstration of his output.  You can see his awesome Despacito cover in our Facebook page. Check it out! 🙂

Moving on, this set of web applications were absolutely amazing considering that only two months ago, the trainees had very few and minimal experience in terms of web development and programming. The effort, hard work, and countless hours of coding definitely did not go unnoticed.

One milestone more and we are ready for this batch of future junior web developers to dive into the world of software and web development. We expect yet another challenging milestone ahead for the third capstone project, but I believe that we can all do this!

Once again, good job guys!

“You do not need to be great to start, but you have to start to be great.” — Zig Ziglar

 


Day 4, Capstone 3 Instructors’ Verdict

Our recently concluded Day class (Batch 4) campers, if not already hired, are already on their way towards employment in the Web Development field. But before that, in this post we will share our instructors’ thought on their last capstone projects: websites created using Laravel framework while applying all that they’ve learned in our boot camp.

Criteria:

  • Content and Information flow – Are the information across the website well structured? (From 1 to 5)

1 – I feel lost in this website
5 – The site is well structured; Information and content are placed in their proper pages/sections

  • Visual Design and Functionality – Pleasing to the eyes and other cool things (From 1 to 5)

1 – Looks like a malicious site to me (meh)
5 – Done professionally

 

This slideshow requires JavaScript.

The landing page gives the user a clear idea that this website is an office tool. Despite the simple design and layout, the calculations being done and automated by this project is quite complex. Possible room for improvement is to make it possible to import a csv file instead of manually inputting the employees’ timekeeping records. 

Content and Information Flow: 4.5/5

Visual Design and Functionality: 4.0/5

 

The ticketing CRUD system works well, and the use of AJAX when choosing departments is a welcomed  addition. Changing ticket status also works fine.

Next improvements should include sorting the tickets by status, then sorting by any of the table columns, ascending or descending.

Content and Information Flow: 4.1/5

Visual Design and Functionality: 3.5/5

 

A social media site with the basic functionalities: friend requests, posts, comments, and likes. A lot could still be improved with the design though, and the use of AJAX is recommended, if not necessary, for projects such as this.

Content and Information Flow: 4.3/5

Visual Design and Functionality: 3.5/5

 

This slideshow requires JavaScript.

A straightforward, uncomplicated, simple to navigate bed and breakfast reservation website. There is an interactive floor plan where the user can click a room and then see its details on the right side of the screen, and pictures of the room at the bottom. Reservation can be done effortlessly. Being easy on the eyes, most users will find themselves reserving a room once they visit this website.

Content and Information Flow: 4.6/5

Visual Design and Functionality: 4.0/5

 

This slideshow requires JavaScript.

Much like the previous social networking site, this is complete with the basic functionalities: follow, posts, comments, and replies. AJAX was incorporated when posting comments. This could be improved by using AJAX as well when editing comments. We also noticed that anyone can delete comment replies, so this is another room for improvement.

Content and Information Flow: 4.5/5

Visual Design and Functionality: 3.7/5

 

This slideshow requires JavaScript.

A complete system for leave filing that can be used in a company. A staff can be registered and issued with leave credits via an admin account. Once registered, the staff can log in the system and use it to file / schedule a leave, which in turn will be reflected in the admin dashboard, subject to approval. Admin can approve, deny, or cancel a leave request. The dashboard can be improved by removing the button for the current status of the request (i.e. If request is already approved, the approve button should no longer be visible.). Another possible room for improvement is to automate the update of available leave credits every time leave requests are approved.

Content and Information Flow: 4.4/5

Visual Design and Functionality: 3.6/5

 

 

This slideshow requires JavaScript.

Growth Hack Philippines is a blog site for young professionals, business leaders, startup owners, or just anyone who wish to hack their way to the top of their respective industries. The blog site is complete with account registration, blog creation, tagging, and commenting. Each blog entry can be categorized under business, startup, career, or leadership. Each entry can also have multiple tags which makes it easier to find these articles using the search box.

Possible improvement is to list down the tags at the bottom of each article so that these tags can be clicked to be redirected to other related articles. Or just make sure that the right panel for “most related articles” is working.

Content and Information Flow: 4.5/5

Visual Design and Functionality: 3.7/5

 

This slideshow requires JavaScript.

The top panel gives us an idea of the main sections of the website. While the left navigation panel lays out the categories of the items that we can find/buy in the website. These two panels with the addition of the search box at the top makes it really easy for the users to find exactly what they are looking for.

Other categorizations such as hot offers, top products, and popular brands are also available. Overall, very professionally made and almost ready for market deployment.

Content and Information Flow: 4.6/5

Visual Design and Functionality: 4.2/5

 

A blog/review site that covers all the latest music releases, reviews, and articles by respected writers throughout the music industry. CRUD functionality is working seamlessly. The use of vinyl with black and white theme works. But we can still definitely see more improvements with the layout, for example, by eliminating most of the white/blank spaces which gives a feeling that the page is incomplete or lacking in details.

Content and Information Flow: 4.1/5

Visual Design and Functionality: 3.6/5

 

An Online System for students and instructor where grades can be uploaded and accessed. This is a very useful tool for educational institutions. Instructor/admin accounts can enroll students to their respective courses, and then give out grades, from first to fourth grading. The complexity of how all the grades can be given out in just one go, with the help of AJAX is applaudable. Just some more layout edits to help improve user experience and this project will be ready for release.

Content and Information Flow: 4.3/5

Visual Design and Functionality: 3.7/5

 

This slideshow requires JavaScript.

This is a sound re-implementation of an already existing system. The steps from registration, logging in, finding a match to making a bet are straightforward. Live, upcoming, and already done matches are sorted accordingly. Necessary match information, as well as coins wagered, are readily available. Just a few more minor tweaks and we can already see this deployed for wide use.

Content and Information Flow: 4.6/5

Visual Design and Functionality: 4.2/5

 

A site for sharing and indexing skate videos. There are no default categories but users (video owners and viewers alike) have the freedom to tag videos with info like: skaters involved, locations featured, tricks performed, brands represented, etc. This feature makes it a dynamic and organic website that depends solely on the community in caters to.

A painless search-and-watch experience for skate enthusiasts, this project is complete and very well developed, with its own unique identity.

Content and Information Flow: 4.7/5

Visual Design and Functionality: 4.5/5

 

This slideshow requires JavaScript.

Another Social Networking Site that gives its users a platform to vent and rant their frustrations away. As of presenting, only the CRUD for posts and comments are working (apart from user account creation), and a lot can still be improved. Page load and reload will be greatly improved with AJAX. Likes for posts and comments is a welcome improvement. There are also not much role restrictions, which enables other users to edit parts they usually shouldn’t.

Content and Information Flow: 3.8/5

Visual Design and Functionality: 3.5/5

 

Useful website, making it easier for users to find information about requirements for official IDs and documents, and then a blog site for important government news and announcements. Despite the seemingly uncomplicated layout, the database relationships used for the government documents and their respective requirements is pretty intricate. The gamification of this part of the project makes a rather tedious process more fun, so thumbs up!

Looking forward for this to be deployed!

Content and Information Flow: 4.6/5

Visual Design and Functionality: 4.6/5

 

This slideshow requires JavaScript.

A Social Media Site where the user can post their plans and connect with friends. There is a users page which lists down and categorizes all users, friends, and pending requests. The news feed part is well implemented with the likes and comments functionalities done with AJAX.

Functionalities are pretty much complete, and most improvements are needed on the design part.

Content and Information Flow: 3.9/5

Visual Design and Functionality: 3.6/5

 

A forum website inspired by Laravel.io. Forum thread creation, and categories are working fine. The CRUD functionalities are enough, and the tagging system eases the user experience. Relatively easy to navigate but could be improved by mimicking hierarchical structure of existing forum sites, as well as the placement of the web elements.

Content and Information Flow: 4.4/5

Visual Design and Functionality: 3.7/5


And that’s it! We wish you all the best in your developer careers! And don’t forget to continue learning and continue improving on your skills.

 


For The Love of Codes and Basketball

Software and web development are very challenging and brain-draining but totally worth while activities. As a professional developer, you need other hobbies or activities to focus on from time to time to avoid burnouts and unwind.  Luckily for some of us, basketball is one of those excellent activities which we can do to take our minds off of things.

Players

The Batch 4 Day class is composed of 17 boys and three girls. Having this many guys in a room, we could already create a whole basketball team. And so we started asking them if they would be interested in a friendly basketball game just to unwind. Fortunately, just enough of them said yes and we were able to come up with two teams.

Our first roster and pioneers of the weekly basketball games were campers Rey, Pidz, Paul, Mavs, Jaekz, Kevin, mentors PeeJay and Billy, and alumni Gerard and Vince.

But later on we invited four more additional players: Lex and Vince (Yes, we have two Vinces!) from Tuitt Inc., Tuitt Philippines’ sister company focusing on software product development; and Mark and Benedict, Batch 4 Day class campers.

First Game

Upon having an agreement with all the players, Billy immediately contacted his friend and bootcamp batchmate, Vince, if it was possible for him to schedule a game and reserve a court at Valle Verde 3 and he did so. Though it was a late notification to reserve the court for us, luckily the schedule was still available and we were able to grab it.

Follow-Up Games

After the first game, it became our weekly habit to play friendly games every week, which is a good thing for our players as well, because this will give them time to refocus their minds, help them prepare for upcoming challenges in the bootcamp and avoid burnouts.

Courts

We played in two different basketball courts. The first one was at Narra St., Valle Verde 3 and the other one was at Sacred Heart Parish Shrine, near Tuitt’s headquarters.

New venues will be considered for our future basketball games. The closer it is to our bootcamp, the better it will be for everyone.

Post Game Activities

After every game, we hangout somewhere in a place that’s near the basketball court to grab some food, and talk about anything and everything that’s related to web development, what went on during the game, or even life in general.

Uniform

We also had an idea to create our own uniform with light and dark versions depicting Tuitt’s brand name and the batch’s number. Sad to say that for now, we were not able to implement it. Maybe for the next batches, we can make it happen. This is a win-win idea anyway.

Final Game

Our last basketball game with Batch 4 Day class was special because it was the first time we mixed and match players against each other, as opposed to our original team setup that is usually mentors and alumni versus students.

Some more campers actually went with us as well to play badminton. They were Emman, Ruel, Darryl, and Julie.

Future Game Plans

We are hoping to continue this weekly habit of having basketball games for the upcoming future batches of campers as well. This will definitely help us create a sense of camaraderie among our students and be able to work as a team outside the bootcamp.

Inviting alumni who are currently working or will be working here in Metro Manila companies to play against new trainees, we think, is a sound idea. This can help us get to know them more and provide an avenue for fellow web developers, who love to play with codes and basketball at the same time, to connect.

It has been a wonderful experience playing with you, guys! We are looking forward to our future games with you as Tuitt Coding Bootcamp alumni.


Our First 20!

May 15, 2017 — Tuitt is off to a fresh start as it welcomes another batch of trainees in its newest office. These lucky students are the first ones to experience training in the 30-seater classroom, a much bigger space compared to the previous place which can only accommodate up to 10 students.

20170614_133339

Tuitt’s new training room

Based on the self-assessment of students submitted prior to the boot camp, they categorized themselves generally as “No knowledge” or “Beginners” in terms of proficiency in the Programming languages covered in the training.

Today, a month had already passed since the first day of classes. After being here for 8 hours a day, mondays to fridays learning and mastering the basics of front-end web development, our 20 coding enthusiasts were able to produce their first portfolio-worthy websites which we can’t wait to show you!

sketches

Some of the students’ output on the Ideation and Sketching activity

For this first capstone project, we gave our students the liberty to conceptualize their own idea for the website. Aside from giving them lessons on how to ideate, sketch and create wireframes, we also shared with them an important tip – build something that you love or that piques your interests. This way when the going gets tough, you’ll be motivated to push through. And so after a week of planning and coding, their hardwork came into fruition as they finished developing their very own static websites! Before sharing it to the world, they first presented it to the class in which a panel of instructors attended to evaluate and give their work feedback.

19141891_10207208989981715_727427664_n

Presentation Day

19197439_10207208988061667_1232625306_o

Presentation Day

Finally, we’re excited to share with you the fruits of their labor! Below you’ll see a sneak peak of the actual website and once you click the link, it will take you to the actual site. Enjoy!

 

Boyd’s Anatomy

Boyd’s Anatomy teaches anatomy at the comfort of your browser

1

Easee Life

Easee Life offers delivery services in the Bicol region

2

Emmanlalakbay

A personal travel blog of a nerdy traveler

3

Fresh Connections Catering

Catering service that offers wide array of healthy foods

4

Rock Buddies

A non-profit shelter that provides adoptable rocks

5

Responseweb Digital Solutions

A one-stop shop for all your digital marketing needs

6

Kram

A personal portfolio website

7

Black Manika

An information website for the band, Black Manika

8

Travel Agency

Website for a budget travel agency

9

Joel’s Donuts

Information and ordering website for a Donut business

10

BENz Cafe

Information website for a cafe business

11

BookEatList

A restaurant booking website

12

Fotobomber

Information website for a Photo booth business

13

Pink Sadistic Unicorns

Information website for the band, Pink Sadistic Unicorns

14

The Distance between Us

Interactive website that lets people have a perspective on just how far one is from other parts of the world

15

Git Gud

Website that provides information about Muay Thai and Brazilian Jiu-Jitsu

16

Leather & Turf

Provides information about the first Philippine Football League’s clubs

17

Pak Gayon!

A blogger’s travel website about Bicol

18

M FLoral Design

Information website about a flower shop business

19

To our students, congratulations on achieving this first milestone! Your dedication showed in the impressive outputs you showed us. Keep up the good work!