Giving Giraffe

example flower vase 1
example flower vase 2
example flower vase 3
gifter: flower selection screen
gifter: ending screen
recipient: gift box screen
gifter: letter screen
recipient: flower main screen
recipient: letter screen

Inspiration

We are constantly giving. A birthday gift you gave to your sister along with a funny note attached. A handwritten card you wrote to your mother. Or a romantic bouquet that you chose for your significant other. GIfts, whether they are small or large, deliver a message to other people.

And we have all experienced getting a gift. Of course, the newest iPhone is a great gift, but it can’t compete with a long handwritten letter where someone expresses the love and gratitude they feel for you.

Sooo drumroll please for: GIving Giraffe !

We thought of Giving Giraffe as a way for people to send personalized online gifts to other people. Its a way for people who might be separated by oceans, illness, or any other reason to send gifts to one another.

Gifts that are meaningful, unique, and everlasting

What it does

Giving Giraffe is, as mentioned above, a place to create a personalized gift and to receive the gift. There are two main parts to our site: Gifter and Recipient.

Gifter On the gifter side of things, someone can hop on the site and can immediately start creating a gift. They first choose a vase. Then, they can get started creating the flower arrangement by choosing a foliage (base greenery) flower, then adding some filler flowers (up to 2), and then making the arrangement stand out by choosing focal flowers. After creating the arrangement, the gifter can write a note/letter that goes along with the flower arrangement. This will generate a unique link that the gifter can send off to the recipient !

Recipient When the recipient goes to the unique link, they will be faced with a colorful gift box that's shaking. The recipient can then click on the box, which will bring up the vase that has the flowers and a letter. The recipient can read the letter, look around the vase, and also create a custom gift back to the gifter or to someone new.

How we built it

There were several different parts in the building process for Giving Giraffe.

3D Models Blender was used to make all the different 3d models on Giving Giraffe. From the different vases to all the different flowers, each one was made as a full model with unique colors. We decided to use 3d models to show the flower arrangement instead of using 2d drawings because we thought that the user(both gifter and recipient) would have a better experience getting to create/receive a 3d gift. It would also make the gifting process seem more realistic and also special. The box animation for the recipient side was also made using Blender.

React Site The site was made using React. There are two main pages to the site: the gifter page and the receipt page. Each page was made using several different components that are reused in different areas. We created are site to also be used in mobile devices. Our site works cleanly and aesthetically on any form of device :D.

Three.js Three.js along with react-three-fiber was used to display the 3d models. We were able to use three.js to allow the recipient to see/interact with the flower vase. This also allowed us to create a preview section where the gifter can see how their vase currently looks like from the different flower selections.

Challenges we ran into

URL Decoding We challenged ourselves to improve performance and reduce costs by storing the gifts within links opposed to within a database. We encode the gift contents into a URL and decode the URL when the link is opened. It was challenging for us to maintain consistent data organization across the pages. After we began facing issues of data-organization inconsistency, we took some time to organize our data and make it easier for the recipient view and preview view to decode and use the information.

Mobile View We faced hydration issues in attempting to build the mobile view of the site. We were unable to use the react-responsive node package as the initial view rendered differed from that of the server-render. Instead of using this more advanced method, we opted to revert back to what we knew well, CSS Media Queries. Using CSS Media Queries, we made the gift-creation process compatible with mobile devices.

Three.js Arrangement

Accomplishments that we're proud of

First of all, we are so proud and happy that the all the flowers look so beautiful. And we’re also proud of the fact that we were able to create a full usable application in only 2 hours.

What we learned

None of us had ever used three.js nor had tried to combine 3d models into react before so we all learned more about react and three.js.

What's next for Giving Giraffe

There are so many things we can do with Giving Giraffe!

Some different ideas we have are: Customization of the music, letter cover/design Ability to use your device camera to see the vase in AR Feature to save the flower as a picture for your phone bg Adding a larger selection of flowers and vases Imessage app so people can send gifts through imessages!