image-wonder-trade

• 

  Enter a name screen

• 

  Upload image

• 

  Accepted files error catch

• 

  Trade results screen

• 

  Selecting a file

• 

  Firebase as backend database

Inspiration

Have you ever wanted to send memes anonymously to anyone, anywhere? In times like these, it's more important than ever to stay connected. In one of my favorite childhood games, Pokemon, players are able to select a Pokemon of their choice to trade with a randomly selected partner in a feature called Wonder Trade. As someone who is always sending images to friends, I wanted to make a site where anyone could send images to anybody and at the same time emulate the randomness and anonymity of Wonder Trade!

What it does

Image Wonder Trade is essentially Pokemon's Wonder Trade but with images. Users enter in a name and upload an image of their choice, and receive a traded image along with a mention of who sent it.

How I built it

As someone relatively new to web dev, I wanted to create project that I knew I could finish along with my schoolwork, and not to take on something too difficult. I used React along with Firebase as my database for image hosting. No need for a backend API! The app is as simple as uploading an image with a given name tag, then querying the database for a random image and displaying the person's name who sent it to you. Because I'm not having people actively searching for each other (like in Pokemon), I had to do this trading in an asynchronous fashion. Users are only able to receive an image once they have upload an image themselves, creating the illusion of a one-on-one trade and emphasizing participation.

Challenges I ran into

Personally, I'm not the biggest fan of frontend. Figuring out ways to style and position things and finding the right UI resources and libraries to make things the way I wanted them to look was pretty annoying. Due to time constraints (and other work), I also had to forego some additional features I wanted to implement mainly regarding additional information users can provide in their trade.

Accomplishments that I'm proud of and what I learned

This was my first time really using a database and coding a full fledged web app! I hope it turned out ok. Most of the other projects I've built haven't really dealt with too much backend stuff. Overall after this project, I feel much more fluent in React, especially state management, and understand better how to handle database queries.

What's next for image-wonder-trade

Better styling and animations! Other than that, many things could stem from user authentication. Users could choose to login or continue as guest, and authenticated users could have access to a gallery of images they've procured from their trades. A cool feature could be a tally of total miles users have covered with their trades (like PokeMiles); authenticated users could provide current location for their images, and based on the location of the traded images, the distance in miles between the trades could be calculated. Users could aim to obtain the highest accumulated mileage!

Built With

• javascript
• netlify
• react