Digicard

Celebrate a person’s anniversary or birthday with a digital video card.

Comment 8

Inspiration

This year has been hard on a lot of us; from not being able to see our friends and family to spending hours locked inside, we've all had it rough. Knowing how lonely things can get and the yearn for support, we decided to build Digicard, a digital video card that allows others to share their thoughts and sentiments with their friends and family in the form of a digital video. Not only is Digicard easy to use and setup, you can use it for various occasions; birthdays, anniversaries, welcoming parties, or just plain appreciation cards. It's a way for others to connect through hard times without having to physically be there. With Digicard, we're hoping to bring others just a bit closer.

What it does

Digicard is a virtual card creator, as an admin you can customize and set up the details for a card, then by sharing the card link with your friends and family they are also able record and submit their own videos. Once everyone has submitted their recorded videos, you can splice together all the videos into one by generating the card, and the app will send over a link by email containing the video URL once complete.

How we built it

We built the app using Next.js as our frontend, and used SASS for all intended styling. The backend consisted of using Node.js/Express.js to handle any server side data, the Media Recording API for the video, and Firebase to handle the collection of data and videos.

Challenges we ran into

We had a lot of trouble figuring out how to handle implementing the video aspect of the app since neither of us had ever worked with video recording or controls, this also included passing a video Blob object to the server. However, we were able to figure out how to implement our own video and controls without having to import any pre-existing react packages or libraries by using the Media Recording API, including formatting the video Blob object so we could splice and send the videos back from the server to the client.

Accomplishments that we're proud of

We're really proud of how well we were able to put together the video for the app, including the splicing and handling, and how nicely we were able to follow designs and functionality. Also very proud of the cute cats :)!

What we learned

We learned how to use Next.js, Functional Components, using the Media Recorder API, and how to draw cute cats :).

What's next for Digicard

We're hoping to continue working on Digicard to build out a fully-fledged web application that can be used extensively for any occasion, including setting up an email server to handle sending the video URL to the recipient rather than the admin. Also making more cats!

Built With

+ 37 more
Share this project:

Updates