Amazing Is The Night: Batch 3 Night Class Capstone Project 1

Introduction

Before the year 2017 ended, the 3rd batch of our night owl campers completed their first capstone project – a mobile-first, responsive, and live web site/app.

The group came from different industries and most of them are working professionals. Several of them go to work after the training. It was not an easy feat. Working on a web site/app project for four (4) hours takes so much mental and physical energy especially if you have a full time job. Now, that is really challenging!

Minimum Requirements and Specifications

The initial phase of the boot camp requires the campers to conceive a project that they are passionate about. First, they start with documentation and identification of the owner and audience of the project, then they craft the sketch and the wireframes. Lastly, they convert everything to codes – using JavaScript animations.

At least four (4) pages should be created and hyperlinked. Applying the principles of responsive web design and fundamentals of good UI (User Interface)/UX (User Experience) to the project. CSS (Cascading Style Sheets) frameworks are not really required at the moment.

Upon completion of the beta version of the project which was consequently deployed to the Internet — via the means taught to them early on in the bootcamp, that is using GitHub, GitLab, Heroku, etc. — the campers should be able to present it to the bootcamp instructors and the class.

Two projects are created during the Front-End Development track of the boot camp: one for the capstone project and another for the web developer portfolio. At the end of the training, portfolios will contain three (3) projects created during the 6-month intensive web development boot camp.

For the front-end web development part of the capstone project, the following main aspects were rated accordingly:

Content

Content is the clarity of message and purpose,  the absence of incomplete pages, and organization of ideas and information.

Design

Design is the intuitiveness and user-friendliness of the interface, clever synergies of visual elements, decent color harmonies, and efficient use of space.

Source Code Quality

Source code quality is about the maintainability of the codebase, limiting the length and complexity of the code units, keeping the codebase small, having appropriate comments, having no unnecessary white-spaces and newlines, having file and folder organization, and having proper format for folders and filenames.

Mobile-First and Responsive Web Design
Mobile-First Design

Mobile-first design is a web design methodology that create an emphasis on the usability of the website or web app for a mobile device as if it was a desktop version.

Responsive Web Design

Responsive-web design is another web design methodology that focuses on the responsiveness of the website or web app to the device screen sizes and orientation.

Capstone Projects

Built Cycles
Built Cycles, Created by Erwin

Built Cycles is a bike shop inside the metro, that provides services and needs to all kinds of cycling discipline, from fixed gear bikes and other competitive cycling to adventure cycling and bike touring. I chose this project because cycling is my passion, and I use my bike as a mode of transportation everyday and anywhere I need to go, whether within the city or to the mountains or just anywhere! It is a different feeling whenever I ride my bike to different environment. I want to share this kind of lifestyle to everyone for them to at least experience what it feels to ride a bike and encourage them to try cycling.

— Erwin

Base Builds
Base Builds, Created by Joseph

Base Bahay is a non-profit organization that enables a network of partners to provide comfortable, affordable, resilient and eco-friendly houses with social impact for the poor. This website enlists Base’s projects, tells beneficiaries’ and partners’ stories and updates its stakeholders with relevant news. It also offers its readers the opportunity to support Base’s cause.

— Joseph

Computer School
Computer School, Created by Rellie

Computer School is an educational website about computers. The website teaches about windows command line, history and programming on C++. It also has additional page on book reviews. I decided to choose this project because I was inspired by Khan academy on its mission of free education. If possible, in the future, I want to develop and extend its scope to other subjects.

— Rellie

BandUp
Band Up, Created by Kevin

For this capstone project I created a landing site for the social network BandUP. The goal of the site is to create a community for Filipino musicians where they can collaborate and discuss ideas, organize meetup or make the process of forming or joining a band much easier.

— Kevin

Southeast Asia
Southeast Asia, Created by Kat

Southeast Asia is one of the most colonized regions in the world, but despite this, its own culture still thrives. I wanted to showcase the diversity of each country in the region while also creating a mini repository/blog of these places. I plan on using this site as a mini-blog for when I eventually visit all countries.

— Kat

Rigma
Rigma, Created by Mars

Rigma (from word “mandirigma”) is a unique social media website created for people who have goals. Its a community of goal getter and aims to motivate users by curating a feed of posts from users that they’re following, communities they joined and accountability groups they are enlisted to. It also tracks their posts on a weekly/monthly/quarterly scale (depending on user preference) and generates a summary of their activities on the site to help motivate users. Rigma stands by its opening line on the landing page- You don’t have to do things alone. Find your support network with fellow goal getters here.”

— Mars

Poblacion
Explore Poblacion, Created by Kim

Poblacion, Makati is one of the top spots in the metro when it comes to their art and culture. This website caters to people whose interest is to explore new places to chill, hang out and eat. This is a simple guide where you can find most of the hidden gems of Poblacion.

— Kim

Josie’s Delicacies
Josie’s Delicacies, Created by Emman

Josie’s Delicacies is a simple fully responsive website for a local business which sells homemade delicacies and desserts. Having a website for small businesses like this isn’t a norm in our country yet. I thought that it would be a good idea, once live, to give the business online presence for the purpose of generating more product orders/sales.

— Emman

iNurse SP
iNurse SP, Created by Jeremy

The objective of iNurseSP’s (Informatics Nurses Society of the Philippines) website is to encourage the nursing practitioners to become part of the premier organization in Nursing Informatics in the Philippines. It demonstrates the step-by-step guide on how to become a member and shows the different working groups where they could participate. In addition, the website contains the latest news and updates in health informatics.

— Jeremy

Kelly’s Garden
Kelly’s Garden, Created by Dan P.

Kelly’s Garden is an e-commerce website that sells different kinds of cactuses and succulents for enthusiasts who like collecting plants, mainly cactus and/or succulents, or just common people who have interest on having their very first plant. The site also accept large amount of orders that are usually used in giveaways for weddings, birthdays and the likes.

— Dan P.

Weekend Drifter
Weekend Drifter, Created by Sermil

Weekend Drifter is a travel blog / informational website about great hiking destinations within the Philippines.

— Sermil

OverBreak Guild
OverBreak Guild, Created by Adrian

Someone once told me “If you want to do something, do something you love to do”. From a non-IT background, I have created this project to showcase and highlight everything I have learned so far in this bootcamp. It is a fan site/guild website for a mobile video game that I play online with my friends.

— Adrian

Phi|RAD
Phi | RAD, Created by Red

Phi | RAD is a website with the purpose of bridging Radar Meteorology to the Philippine community. It showcases blogs, radar data processing tutorials, and news regarding the advancement of weather radar in the country. It also promotes the use of Python, an open source computer language, that lets radar enthusiasts, students, and experts engage for further development and research collaboration in Radar meteorology.

— Red

The Wedding Project
The Wedding Project, Created by Betty

Being the resident pseudo-wedding planner of family and friends, I witnessed how the most gentle brides (and sometimes, grooms) turn into monster bridezillas. Who can blame them though? The pressure to plan your perfect day can get a little overwhelming especially when you don’t know where to start. Soon, you’ll find yourself just a couple of months away from your big day with no supplier booked, guest list doubled and budget out of control. I’ve created this website in the hope of bringing back the fun in wedding planning. From the most basic requirements to the little details that will make your big day truly special, here’s everything you need to achieve your dream wedding.

— Betty

Maximus Prime
Maximus Prime, Created by Chellie

MAXIMUS PRIME is a website that offers photo, video and digital services.

With so many choices to choose from, I decided to create a starter project website that caters one field of my interest which is photography. Booking an event made easy with this website. It showcase the photographers portfolio, package and services being offered.

— Chellie

PhotoHub
PhotoHub, Created by Mike

“To cater my skills & capabilities to the viewer as an aspiring developer.

— Mike

KYN (Know Your North)
Know Your North, Created by Onof

As a passionate traveler, I wanted to share the beauty of Northern Luzon provinces not only the tourist spots but also the locales’ distinctive spirit, character and culture. The website contains a description of the region and provinces of Northern Luzon, mode of transportation regarding how to get there, accommodation and tourist spots.

— Onof

The Millennial FUNK
The Millenial Funk, Created by Jean

The Millennial Funk is an independent soul news and reviews website compiled for anyone who really cares about jazz and funk music, all of its emotions and the passions made by the favorite soul artists in the late 60’s and 70’s.

— Jean

Monologist
Monologist, Created by Des

Monologist website is where you can find different types of books and poems, it is not for the book lovers only but to engage other people in reading. In this site you can have an update for best-selling book and it is the best website for the young writer who wants to pursue being author, you can write your own book and poems.

— Des

VSOM (Vacay State of Mind)
Vacay State of Mind, Created by Ann

Like most people my age, I am constantly wanting to travel. I wanted to create a travel resource blog that I can later build on to become a unique travel agency that can arrange highly individualized custom-fit itineraries for busy people. There is nothing I love more than scoring great deals and nothing I hate more than missing out on promos. Pretty sure I’ll be happy to do it for other like-minded travelers in a future business venture.

— Ann

Sip It Cafe
Sip It Cafe, Created by Dan

Sip It Cafe is a website for a small business cafe, it contains various menu of what food and coffee it serve. The website contains details of the  cafe , latest event, news, blogs. I choose this website because I dream of having the said business someday.

— Dan

The FlowerShop
The FlowerShop, Created by Arjay

The FlowerShop project is an online store that sells different types of flowers that were specially handcrafted, meticulously emulated flowers which are made only out of paper. This project was created to serve as a platform for the buyer to inquire and buy the products online and at the same time, for the seller to market her products in the most convenient way.

— Arjay

Project ACE
Project ACE, Created by James
 

The ‘ACE’ in Project ACE stands for activations, creatives, and events — three new services that my colleagues at work were trying to offer. I thought that it would be a good exercise to create some sort of online brochure about this new offering.

— James

Drink or Fly
Drink or Fly, Created by Jane

Drink or Fly. A pathetic excuse to drink and travel. An interactive blog where you can find how hard a bar can give you a hangover or how exhausted you’ll be when you travel. This blog is created to give audience an idea on where to drink or where to travel, rating a place on how hard one can get a hungover or jet lagged, what these places can offer and how long will it take to get there.

— Jane

The Dark Knight Philippines

The Dark Knight Philippines, Created by Lee

TDKPHThe Dark Knight Philippines is the premier Batman group in the country. It is a non-profit organization aimed to bridge the gap between fandom– comics, toys, statues, movies, TV shows, animated series, and collectibles. It is a shared community of enthusiasts, that actively participates in building knowledge on Batman and other related characters through original articles, news, reviews, discussion threads, cosplay events and artists promotions. From a non- IT background and as a fan of the bat, I would like to start my capstone 1 with something that I love and would do it for free for the client.

— Lee

In Closing

This third iteration of the night class are breaking some boundaries considering the capstone projects they have created, and most likely they will carry this momentum to the back-end development track of the coding bootcamp.

The bootcamp facilitated a refresher course in JavaScript programming last January 2018. The challenging part of this coding bootcamp has already started.

Good job guys!