Firebase - Card Creator

🕵️‍♂️ Discovering Firebase with a simple "Card Creator" project

👉 Try it here: cardcreator.web.app

👨‍🏫 Inspired by Jeff Delaney's video tutorial: Firebase - Ultimate Beginner's Guide

🔮 Features

• 👨‍💼 Log in using your Google or GitHub Account
• ✍ Write the caption title for your card
• 🖼 Upload a picture for your card
• 💾 The card you create is automatically saved in your account, log out and log in from anywhere, it will still be there
• 💬 Notifications to let you know what's happening
• ✔ Proper handling of input validation (e.g. size limits) on client and server sides (failing early)
• 📱 Responsive design, works well on smartphone, tablets, desktop, etc.

🎯 Goal of this project

🔥 Discover Firebase, including:

• Firebase tools command-line API
• Authentication, using Google Account for this app
• Cloud Firestore Database, setup, rules, data validation and security, read/write from the app
• Firebase Storage, setup, rules, data validation and security, read/write from the app
• Deployment, GitHub Actions for PR preview and deploying Live

🎨 Discover Material Design Components:

• Made use of Buttons, Cards, App bars, Text fields (with character limit), Progress indicators, Snackbars
• Used both CSS and JavaScript libraries for the best Design and UX (e.g. for button ripple effect or to trigger notifications)
• Used the MDC CSS theme variables so the UI design can adapt to any theme (Purple theme here)

📸 What it looks like