Card Crafter

A festive e-card generator built with JavaScript and Firebase!

Watch Demo · Hosted Link · Codedex Submission

Table of Contents

About The Project
- Built With
Getting Started
- Prerequisites
- Installation
Roadmap
Challenges
Contact
Acknowledgments

About The Project

This is a web application developed in less than 24 hours for the Codedex Holiday Hackathon '23! The chosen track was "In the Holiday Spirit". Main app features include:

Authentication with Google Firebase
Personalized user experience with greetings and saved cards
Data persistence with Firestore. Create, read, and delete documents
Create an e-card from 3 preset templates
A unique URL for every created card, so users can easily share them with family and friends

I wanted to make something with a bright and cheerful interface to get people excited for the holiday season. The concept for this app allowed a lot of creativity for both the frontend UI as well as the e-card design.

(back to top)

Built With

HTML/CSS
JavaScript
JQuery
Vite
Firebase

(back to top)

Getting Started

These instructions are for running the project locally.

Prerequisites

You'll need to have Node 20.0 or later installed on your machine.

Installation

Clone the repo
Install NPM packages with npm install
Start the development build with npm run dev. Navigate to the localhost link displayed in the terminal.

(back to top)

Roadmap

Add authentication
Connect to Firestore
Template HTML Pages
Creating, reading, deleting data functionality
- Updating previously made cards
Styling of all HTML Pages
- Animations on e-cards
- Music player on e-cards
Host project with Firebase

(back to top)

Challenges

I had to trim a few features from the application because of schedule constraints. I ran into many problems implementing the authentication and CRUD operations with Firebase. It was tough to find examples online as much of it was written with outdated syntax.

I also had several issues creating my build files. I was unable to host on Vercel and Netlify, and eventually had to host on Firebase.

Challenges aside, I did not use any pre-built UI elements or template code to make this. Everything was written from scratch, and I'm incredibly pleased with how it turned out. I'm also very glad I was able to get it deployed in time!