project-icecream

Create a custom profile picture with frames to let everyone know the event that you are part of!

Comment 2

Inspiration

One of our seniors participated in a hackathon namely InOut, where after registration the hackathon gave the team members a sort of virtual badge. This inspired the idea. We thought of creating an online platform to create custom frames and use them.

What it does

Basically, this is a custom profile frame generator. The idea is that the organizer of an event can upload a custom frame (custom to the event) and the participants of that event can then choose the frame from a variety of other frames and upload his/her picture and create a custom profile and share it with everyone. The generation is not just limited to some event but anyone part of the community can go ahead and use it.

How we built it

The entire app is built on React.js and Typescript. The project was bootstrapped with create-react-app. Along with React, we are using Firebase for storing details of the uploaded frames and Cloudinary to upload the media (custom firebase images). The other important library being used is Jimp which is used for image manipulation.

Challenges we ran into

Before starting this project, we generally worked with javascript. So the biggest challenge we faced was using typescript. Even though we had knowledge about typescript, implementing it in a real project along with all the conventions being used in react was a big one to overcome. Along with this, manipulating images in an efficient manner was another thing that we learned and tried to implement.

Accomplishments that we're proud of

  • Successfully creating the project using new technologies in a limited time frame.

What we learned

  • Using Typescript along with React with all the conventions.
  • Using Jimp to manipulate images.

What's next for project-icecream

  • Plans to add options to share images to social media.
  • Plans to add video and then create gifs with custom frames.
Share this project:

Updates