Hero Cards

Inspiration

One of the reasons that we watch movies and shows about heroes is that we love admiring heroism so that we can be our own everyday hero. However, can we take something digestible from these films for the times that we desperately need a bit of heroism? This is where the idea for Hero Cards came from.

What it does

Hero Cards offers a personalized environment to store your favorite quotes from heroes (or villains) when you need a bit of motivation. It offers a working account system, cloud database that stores your data, beautifully interactive card scroller to see your quotes, and plenty of homages to cartoon and comic culture.

How we built it

We used Svelte and Firebase to build the app. We also used some npm packages to achieve effects like the typewriter effect on the landing page.

Challenges we ran into

Most of the challenges were small things that took a long time to debug. In one instance, we were setting a variable equal to a function instead of calling it, which was a difference of two parentheses but it caused a lot of weird errors. Another challenge was just working with Svelte and Firebase. This was the first time that either of us have ever touched these technologies, and our first time personally implementing any sort of database in an app. A lot of Googling was required to sort out all of the squiggly red lines in VS Code :)

Accomplishments that we're proud of

Working with new technologies brought a lot of uncertainty, as no one in our group had worked with Svelte or Firebase before. Being able to set up a fully functional database took lots of time, research, and debugging, but it was definitely worth the hard work.

What we learned

Throughout the creation of Hero Cards, we learned to work with many new coding technologies such as Firebase and Svelte and improved on our current knowledge of topics such as designing user interfaces and landing pages. Outside of technical skills, we learned how to function efficiently with a small group of people (we've never worked with just two people before) and how to better work together to reach our desired end product.

What's next for Hero Cards

We hope to add more features such as labels for each card to sort them in certain groups, greater card customization abilities like being able to choose the background color, and allowing more ways for the user to scroll through the cards.

Built With

• css3
• firebase
• github
• html5
• javascript
• svelte
• vscode