Portfolio Tag: Web Development

I attended the Baltimore Hackathon this past weekend.  I was super excited since this was the first hackathon that I got to participate in a major project, in the capacity of a programmer.  Our team did not win, but we did get great feedback and we were all proud of what we were able to accomplish in such a short amount of time.  Check out the details below :)

Goal/Rules:

  • Using tech to solve a problem, be funny, create a product, or start a business!
  • Mobile apps, websites, software, etc. are all options!
  • Prizes: $1000 individual; $2000 team
  • MOIT Judge: Heather Hudson
  • MOIT Choice Prize: $2000

Project:

Problem.  Currently when searching for a lost pet, there are many different sites to offer services of searching for pets, but none really aggregates the search process.  There's also a missing market for animals that have been sighted but not actually found.  Our project hoped to fill the gap. Solution.  Paw Patrol -- an app that facilitates quickly reuniting pets with their owners. Features. Aggregated information from top pet finder sites such as Barks and MD SPCA.  Functionality that allows people to report sightings of animals/pets that have been seen in areas -- which gives pet owners good information to aid in their search efforts.  Functionality that allows for people to report their pet missing.  Functionality that allows users to search descriptions for certain keywords, allowing them to look for pets that match their pet's description.

Post Mortem:

We had a great mix of team synergy for this project.  We had two front end developers and two back end developers which made the workflow go well.  But with any teams there are some things in hindsight that I look to address for the next hackathon:
  1. Fleshing out all external APIs - There were some great ideas with APIs to use, however a major API switch, mid-project made a large part of work that I'd previously done, insignificant.  Although the new API proved to be a better tool, hashing out the external libraries earlier would have helped us get much more of what we wanted to get done, completed.
  2. More mid-development progress meetings -  We were all sitting at the same table, which made communication great, however we did have some times where we could have benefited from more small progress updates.  We could have also addressed what was hindering people from moving forward and check to see if tasks could have been re-allocated in order to save time. However, we did get a  lot accomplished within the time allotted!!!
Baltimore Hackathon

Take a Look
Here's a look under the hood of the miramollar.com site.  I took the time to push my knowledge of PHP and Wordpress with this site.  Prior to creating this site, I'd only really dabbled in web design using html only, but this time I wanted to not only push my knowledge, I wanted to incorporate widely-used technology and frameworks in an attempt to expand my knowledge even further.  I also was in need of a means to display the portfolio items that I'm working on, what developed was an opportunity to learn new technology, while creating something functional for me to use as well.

Goal:

The goal was to create a personal page that was easy to update when I needed to.

Features:

Customizable admin options.  I used the Redux Framework to manage custom site options that can be updated without changing the backend code. Plugins.  I used the TGM Plugin Activation Framework to manage plugins which allows for easy updating of plugins. Custom Post Types.  I implemented a Custom Portfolio Post Type in order to make updating my portfolio much quicker. Bootstrap.  I used Bootstrap to handle responsiveness and to create a uniform design.

Post Mortem:

I took this project on for multiple reasons.  First, was more situational, I was in need of a portfolio.  With that need came research on the most convenient methods of creating a portfolio that would allow me to update it without digging into code each time something changed.  Finally, I didn't simply want to purchase a Wordpress Theme and move on, I wanted to learn all that I could about backend development and this was the perfect opportunity.  The further I got into development, I started to identify things that I would do differently next time around.  Here are some of those takeaways:
  1. Implement security from the beginning instead of the end.
  2. Map out the framework prior to development - I did this, but because I didn't know what to expect, my site plan was lacking due to the things I did not know before beginning the project.
  3. Oh my CSS - I used Bootstrap, but my custom styles quickly got out of hand.  There are style sheets all over the place.  This is the first time that I've taken on a project of this size, so this was a great lesson on how to reel stylesheets in as I go (I have plans to refactor stylesheets and to minify them).
  4. Use a different framework - I learned a lot from using Wordpress + Bootstrap, so the next time I would like to push my knowledge even further by combining different CMS + Base Framework.
  5. Use SASS or LESS - I'd heard about each of these languages beforehand, however I entered this project thinking that it would be best to start with the basics and learn more later.  Now that I have a decent grasp on the newer versions of CSS, I'd like to use SASS or LESS in the future to expand my knowledge.
 
My Portfolio

Take a Look
For the past few summers, I've helped my friend create an event website for her church's yearly Convocation.  I truly believe in helping the community in many ways, and one way that I can accomplish this is by offering free tech help whenever I can.  Last year, I created a site using Adobe Muse, which allowed me to use graphics and to quickly create a site for their event.  However, this year, I wanted to practice what I've learned about web development and I made this year's Convocation site using Twitter Bootstrap.

Goal:

To create an event site for a local church.

Features:

  Bootstrap.  I used Bootstrap to handle responsiveness and to create a uniform design. I used this site as practice for a better understanding of the grid functionality in Bootstrap. Google Forms.  I used Google Forms for the registration allowing more flexibility within the registration process, allowing the event coordinators the ability to update the form throughout the event.  I also learned how to integrate embedded content using Bootstrap.

Post Mortem:

I took on this project with very little time to work on it.  I created it in a couple of afternoons after work.  Regardless, here are the takeaways from this project:
  1. Although this site is a temporary site for a weekend event, it was good to see that I was able to build a site from the bottom up in a very short period of time.  The themes and colors were all chosen by my friend, however it was cool to be able to take what they wanted and implement it with the knowledge I've learned about Bootstrap in the past couple weeks.
  2. I would like to use a different Framework, such as Foundation, next time.  I believe that adding to my toolbox will only help me in the long run.  For instance, either a different framework or no framework at all, would have been best for such a simple task.  There was unnecessary overlap that could have been avoided with either using a simpler framework or eliminating one altogether.
   
Convocation

Take a Look