Michelle & Thor's Wedding Surprise Site

A comment/gif/photo aggregator feed for the bride and groom to celebrate their wedding

Comment 1

Inspiration

I wanted to create a place where friends can leave short stories, comments, photos, and gifs to my best friend, the bride and the groom. Essentially it's like a virtual guestbook but since it's online, friends can do more than just write a message.

What it does

Users can leave a short story, which is styled differently from a short comment. Based on the content character count, it will have a different style so that the short comment can stand out on its own with a larger, calligraphy font.

Users can also choose to answer suggested prompt, which changes every few days. They can search for a gif in the Post a Gif section, which is built with the giphy API.

In the meantime while I search for a good file uploader and a way to increase my data storage, I have a section where users can paste the URL link of an uploaded file. This will be rendered the same way as a gifphy card. The goal is to replace this file link section with an actual uploading section, which I can do with a plugin.

Another feature that I will add is the Instagram hashtagged feed. Unfortunately, Instagram requires the users to log in in order to see tagged photos so it will require a feed separate from the comment/gif/photo feed.

How I built it

giphy API Rails materialize-css framework for the responsive grid system and buttons Masonry layout grid for the cards to fit together, despite having different widths and heights

Challenges I ran into

I tried to work around Instagram's restrictions by pulling 20 tagged photos and saving them in the database in order to avoid having the user to sign in in order to see the images. Unfortunately Instagram is very strict so avoiding their oauth login is not possible.

Because there are so many images and gifs on the feed, it takes awhile for the masonry grid to organize each card. I will have to add a preloader icon so that everything can load before the user can see everything.

Accomplishments that I'm proud of

The gif section took the longest because it required searching the keyword, rendering 10 results per pagination page with ajax, and then allowing the user to click through all the paginated results in real time without refreshing the page. With jquery and ajax, I was able to grab the selected gif's URL, the user's input, and store it in the backend.

What I learned

I learned how to use different third-party libraries and APIs such as the masonry layout grid and did a lot of research on ways to outsmart Instagram's restrictions (no luck :[ )

What's next for Michelle & Thor's Wedding Surprise Site

  • Add a preloader icon
  • Implement a photo uploader
  • Implement Instagram hashtagged feed
  • Add tests

Built With

Share this project:

Updates