Card Crafter

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



Watch Demo · Hosted Link · Codedex Submission

Table of Contents

1. About The Project
   • Built With
2. Getting Started
   • Prerequisites
   • Installation
3. Roadmap
4. Challenges
5. Contact
6. 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

1. Clone the repo
2. Install NPM packages with npm install
3. 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!

(back to top)

Contact

Leanne Holmes - [email protected]

Project Demonstration: https://youtu.be/-td-eXo-6Sg

Hosted Link: https://cardcrafter-d6673.web.app

(back to top)

Acknowledgments

• Tabler Icons
• iStockPhoto

(back to top)