Kay McKelly

Web Developer

Introduction

This is a visual showcase of some of my projects. Whether it's design or topic (or, more often, both), I really enjoyed building these projects. I strongly believe that you should love what you do, so when I take on a project, it's going to be something I enjoy. There's always more work to do, so I almost never refer to my apps as "finished". All my code is up on Github.

I strive to adhere to web accessibility standards, as set forth by the World Wide Web Consortium (W3C). Gray-on-gray low-contrast text is in fashion right now and while aesthetically it can look nice, I'm more invested in making apps that are truly accessible for all users.

Portfolio

Freelance Work for IACR

old Crypto site, appears out of date with dull colors
new Crypto site, colorful and well organized

The International Association for Cryptologic Research (IACR) requested a template for future conferences that organizers could easily clone and reuse. IACR was primarily interested in making their conference site mobile-accessible, maintainable, and updating their aesthetic. Their last conference site (shown above at left) resembled sites built in the late 90s/early 2000s and was not mobile accessible. Additionally, the site was almost exclusively written using HTML 1.0 and had a drab appearance.

My redesign (shown at right) is more colorful, with responsive menus and a mobile friendly design using Bootstrap 3.3. I created a color palette for the site based on IACR's logo, with orange and green that complement the deep indigo of their logo. This project is still in progress, but there is a live preview available here.

See the code on Github

Conference Program Editor

setup page of program editor with the div that allows you to choose the program template you want to use
setup page for program editor with all option divs visible
screenshot of the program edit page with talks and sessions populated from websubrev input and chosen program template

As I worked on the IACR conference site and got to know the organization better, I recognized a major problem that needed a fix: there was no standardization in the way conference programs were built. This meant that the chairs in charge of putting together the program for each conference had to build them from scratch each year. There was no easy way of organizing talks or sessions. It seemed like it was a huge pain, and that there had to be an easier way.

As a result, I proposed that I build a conference program editor for them. Using input from websubrev to generate a list of papers and a template based on the structure of previous conferences, the conference program editor gives IACR members a drag and drop GUI with which to build their conference programs.

I built wireframes and submitted the project for approval in April 2017, had it approved by May, and have been hard at work on it since June. It's nearing completion for the MVP, with several features planned for future releases. While this is planned to be an internal tool for IACR, I've got a working demo that closely resembles the finished product.

Built with Bootstrap 3 for styling, further CSS customization by yours truly, and PHP to interact with the MySQL database, I had the opportunity to learn a lot while building this project. Learning PHP was probably my biggest challenge, but it was also really rewarding to build something so complex.

See the code on Github

Boost

homepage of the Boost app with the menu open
screenshot of login page explaining why you have to log in to boost someone
screenshot of the boost page with dummy text of a fake user's ask
meditation timer screenshot

The six months I spent at Galvanize Seattle culminated in a Capstone project. We were given two weeks to complete a full stack app, from concept to building a server and client side. I created an app called Boost, which focuses on compassion and self-care. Built using Angular.js for the front-end, Express.js (a Node.js framework) for the server, and a PostgreSQL database, Boost is very much a labor of love. I wanted to make this app because many think of the internet as lacking in compassion. Boost is designed to inspire compassion for others.

The main functionality of Boost is the ability to "boost" others. After logging in (second image), users are immediately shown an "ask" (third image). An "ask" is a user-submitted story or question. Your options are to "boost" them (similar to a Facebook like) or comment. If you feel like you can't help, the "boost somebody else" button will show you another user's story randomly pulled from the PostgreSQL database.

Additional features include a meditation timer (fourth image) and an inspirational quote generator that uses the They Said So quotes API. Initially I had also wanted to include a self-care checklist, but I ultimately set this aside for a separate future project. Building Boost taught me that prioritization of features and estimating how long a project will take are two of the greatest assets to web developers. Some of the challenges I faced included trouble implementing oAuth and feature creep.

See the code on Github

Seattle Neighborhood Challenge

Seattle Neighborhood Challenge home screen
Seattle Neighborhood Challenge login page
Seattle Neighborhood Challenge create a new challenge

Seattle Neighborhood Challenge (SNC) is a full stack mobile app that works cross-platform (iOS and Android). This app was a team effort between the six of us. I volunteered to be project manager, in addition to being a contributing developer. We used an Agile approach and built this app in six days. SNC uses the Google Maps API and was built in React Native, with an Express.js server and a PostgreSQL database. The six days also included learning React Native, which none of us had worked with before. Other technologies utilized included the Google Maps API, oAuth with Facebook login, and Knex.js as a query builder.

SNC is an app that's a more spontaneous version of Meetup. Users log in using Facebook and can then create, RSVP, and attend events (called "challenges"). Challenges are viewable by user-specified area on a map (see screenshot 1). The idea is to let people get to know their neighbors while having a common fun activity for everybody to engage in. The primary challenge of this project was learning how to work effectively with other developers and unfamiliar frameworks. I really enjoyed being a project manager and would like to do so again in the future, though I'd first like to get more coding experience.

See the code on Github

Brows on Fleek

Brows on Fleek home page, with sage green background and an expressive gif of Frida Kahlo with a floral print background raising her eyebrows rather expressively
part of the form that helps users determine in what area they'd like to search for a place to get thier eyebrows done

I built Brows on Fleek at the end of my first quarter at Galvanize. This was the first website I had built in ten years, so I was pretty excited. Initially inspired by this gif of Frida Kahlo, Brows on Fleek was built using HTML5, CSS3, Bootstrap, and the Google Maps API. The main functionality is to allow users to specify a location and look up places to get their eyebrows waxed, sugared, or threaded within a given area. This project marks the moment I realized that I wanted to pursue a career in web development.

See the code on Github

Contact

Email Me