📅 Estaca Ayacucho: Event & Engagement Platform

Live Demo: https://conferencia-general-estaca-ayacucho.vercel.app/

📖 About The Project

This interactive Single Page Application (SPA) was developed to digitize the experience of the October 2025 General Conference (Ayacucho Stake).

Unlike static schedules, this platform focuses on User Engagement through a gamified experience. It leverages React 19 and Redux Toolkit to manage user progress across 8 spiritual challenges, using Firebase to persist data and html2canvas to generate downloadable social assets in the browser.

✨ Key Technical Features

1. 🏆 Interactive Gamification Engine

• Progress Tracking: Users track 8 specific challenges.
• State Management: Redux Toolkit manages the "0 of 8 completed" logic and unlocks UI rewards upon completion.
• Persistence: The Save function syncs local state with Firebase Firestore, ensuring users don't lose progress between sessions.
• Conditional Logic: Includes date-based logic ("Event ends Oct 19, 2025") to manage feature availability.

2. 🎨 Client-Side Image Generation

• The Feature: Users create a custom invitation card by entering their name.
• The Tech: Implemented using html2canvas. The app captures a specific DOM node, rasterizes it into a high-quality PNG client-side, and triggers an instant download without server processing.

3. 🔐 Secure Authentication

• Integration: Firebase Authentication (Google Provider) allows users to sign in securely to access their personal challenge dashboard.

4. ⚡ Modern React Architecture

• Build Tool: Powered by Vite for instant HMR and optimized production builds.
• Navigation: Uses React Router v7 for seamless client-side routing.
• Feedback: Integrates canvas-confetti and sweetalert2 for engaging user feedback loops.

🛠️ Tech Stack

• Core: React 19 + TypeScript
• Build: Vite 7
• State: Redux Toolkit
• Backend: Firebase (Auth & Firestore)
• Libraries: html2canvas, canvas-confetti, SweetAlert2, Lucide React

🗺️ User Journey

1. Onboarding: User logs in via Google.
2. Dashboard: User views the "Challenges" panel with a progress bar (e.g., "0 of 8 completed").
3. Action: User marks tasks like "Share a quote" as done.
4. Reward: Upon reaching 100%, the application triggers a celebration animation (Confetti).
5. Sharing: User generates a personalized invitation to share on WhatsApp/social media.

🚀 Getting Started

1. Clone the repository

   git clone https://github.com/huderdcv/estaca-conf-2025.git

2. Install dependencies

   npm install

3. Setup Environment Create a .env file with your Firebase credentials:

   VITE_FIREBASE_API_KEY=your_key
   VITE_FIREBASE_AUTH_DOMAIN=your_domain
   VITE_FIREBASE_PROJECT_ID=your_project_id

4. Run the development server

   npm run dev