Cristy Yeung, Skincare Expert

front-end development | back-end development | Bootstrap | jQuery | Github | Heroku

Link to website: Skincare Auntie

Built using Bootstrap v3.3; hosted via Github and Heroku

Overview

As part of my Web Programming certificate program at Hunter College, for my final I was required to build a website from scratch. Since I am interested in blogging platforms and was an avid blogger myself in the early 2000s I elected to create a blogging platform for this assignment. This coincided with Cristy Yeung (a friend and fellow blogger) looking to turn her popular skincare Google document into a website so she could reach more people and spread her knowledge of all things epidermal. I built this site using PHP and the Bootstrap framework to showcase my programming knowledge and honor my friend’s extensive work.

Objectives

• Design that reflects Cristy’s knowledge and personality
• Blog is able to locate any blog entry by id
• Contact form for user inquiries and automated email response
• Posts display comments by users
• MySQL database for storing content and login information

Process

Interview:

Cristy wanted to adapt her Google doc into blog form so we already had a lot of content to work with. She requested a cute, playful look using a color scheme of pale lavenders and greys. For her navigation bar, she wanted an eye-catching logo in the main navigation of the page (graphic design credit goes to our friend Eric Zhang) and an about me section to state her mission for Skincare Auntie. While Cristy did not bring up a contact page or social media links, she agreed that those would be helpful and necessary down the line as the blog gains viewership.

Strategy:

• First and foremost, I chose a Bootstrap template to ensure the blog is responsive across all platforms. I chose this one because I felt it was the most navigable and would look best after adding the logo. After setting up the template I was able to add text from Cristy’s document.Then I chose the color template for Cristy's page. I used pale lavenders and greyish blue hues as you can see below.
• 
• Since Cristy (or any contributor) would want to update the blog, I created login.php which accepts an email address and password using the PHP POST method. If login is successful, the user is redirected to the “create.php” page where they can make new posts. If the login is unsuccessful, the user receives an error message.
• In order to store the login information and post contents I created a database using MySQL. I wrote queries to allow PHP to access informations from the databases. This allows each new post to have a title, body, timestamp, and id so that readers can look up posts. The login information is also securely stored this way.
• Cristy wanted to engage with readers so I created a contact.php for user write-ins. I also used thee POST method here. When a user writes in and proves they are not a robot, Skincare Auntie sends an automated response letting readers know their questions will be answered shortly. Comments on the posts were created by the POST method as well.

Training:

Since Cristy was already well-versed in HTML, I showed her how to commit changes on to GitHub. Then, I showed her the inner workings of the database that stores the posts on SequelPro and how to connect to the server on MAMP. Finally, I walked her through the steps to obtain a domain on domains to make Skincare Auntie truly hers.

Client testimonial