dereck quock

๐Ÿ‘จโ€๐Ÿ’ป Projects

Personal

๐Ÿ’ Wedding Website

Wedding website

Wedding website built for mobile with Gatsby that showed wedding information, displayed our engagement photos and allowed guests to RSVP.

Tech

  • Gatsby - gatsby-source-google-sheets to use Google Sheets as a database for RSVP data

  • Reach UI - Netlify Forms for RSVP submissions

    Handling RSVP submissions was fairly difficult because of the variable amount of people that could RSVP for a certain group. For example, some of our friends are single and didn't have a plus-one and some of our family members had kids that were also attending.

    I had to fetch the people that were associated with the person that was RSVPing and based on the form input, I would reduce the data down into an object that tells me if a specific person was going to attend and their protein preference:

    function getRsvpData(data) {
      return data.reduce((formData, { guest, isGoing, protein }) => {
        return {
          ...formData,
          [`${guest} Is Going`]: isGoing,
          [`${guest} Protein`]: protein,
        };
      }, {});
    }
    

    I wish that Netlify Functions were available at the time because I would have definitely used that ๐Ÿ˜…

  • React Context for having a fun dark mode

    Kent's post about how to use React Context effectively really helped me execute this easily ๐Ÿ”ฅ

๐Ÿˆ NFL Stadiums VR blog

React 360 VR blog that shows a more immersive experience of different NFL stadiums that we've visited. We're utilizing our 360 camera and wanted to create a React 360 tour app so others can get a feel for the different stadiums and even plan to visit themselves. Our journey to visit all the stadiums is still a work in progress and I'll rebuild this sometime soon.

Tech

Echo.Church

๐Ÿ“ฑ Echo App

Echo App

App is built with React Native and allows people to be able to interact with the Church.

Tech

๐Ÿ‘ฅ Echo Groups

Echo Groups

Web app enables people to discover and join small groups.

Tech

Hackathons

๐Ÿ“ฑ React Native app that enables automatic expense reporting

This was a hacked version of the PayPal app that allows a user to automatically create an expense report from a transaction.

Tech

  • React Native
  • OCR using python (teammate built this) to parse an uploaded receipt
  • wit.ai for using NLP to categorize items on the receipt

๐Ÿงพ Invoicing app that uses image processing to prefill invoice data

App that used an item image to prefill the form used to create an invoice. After filling out the invoice data, the seller is presented with different outputs for sending an invoice: email the invoice, share an invoice link, scan a QR code, or share in Facebook Messenger. This allowed the seller to create and send the invoice in whatever specific context that they were in, creating less friction when selling something.

Tech