⚙️ Administration app for the festify project ⚙️

Festify Admin is a React JS web application for managing the content and user interactions of the Festify educational multiplatform app (uses React Native & Expo). It allows teachers to create and edit lesson content, manage rewards and communicate with students through various channels. The app uses Firebase Firestore for real-time updates and offers gamification elements to engage and motivate students in their learning.

📱 Screenshots 📱

🛠️ Build with 🛠️

Server Stack

• TRPC - TypeScript RPC framework
• Firebase Admin - Firestore, Authentication, Cloud Functions, Cloud Storage
• Node.js - JavaScript runtime environment
• TypeScript - Typed JavaScript at Any Scale
• Expo Server SDK - Expo Server SDK
• Zod - TypeScript-first schema validation with static type inference
• Resend - Email delivery service

Client Stack

• TypeScript - Typed JavaScript at Any Scale
• React Router DOM - Declarative routing for React
• React Query - Performant and powerful data synchronization for React
• React Hook Form - Performant, flexible and extensible forms with easy-to-use validation
• Zod - TypeScript-first schema validation with static type inference
• Tailwind CSS - A utility-first CSS framework for rapidly building custom designs
• DaisyUI - Tailwind CSS components
• TRPC - TypeScript RPC framework
• Vite - Next Generation Frontend Tooling
• Firebase - Firestore, Authentication, Cloud Functions, Cloud Storage
• DND Kit - A modern, lightweight, performant, accessible and extensible drag & drop toolkit for React
• DevExtreme - JavaScript UI widgets for progressive web and hybrid apps

🚀 Getting Started 🚀

Prerequisites

Node.js and npm are required to run the project. You can download them from here. Also, you need to have a Firebase project with Firestore, Authentication and Cloud Storage enabled. You can create a new project from here.

Also for the notifications to work you need to have an Expo account and a project with a server token. You can create a new project from here.

Email delivery is handled by Resend. You need to create an account and get an API key from here.

Clone the repository

    git clone https://github.com/ptaushanov/festify-admin.git
    cd festify-admin
    
    cd client
    npm install

    cd ../server
    npm install

Configure the project

1. Create a .env file inside the client & server folders and copy the contents from the example bellow. Fill in the values with your Firebase, Expo and Resend credentials.

---

For the client:

# Firebase configuration
VITE_API_KEY = 
VITE_AUTH_DOMAIN = 
VITE_PROJECT_ID = 
VITE_STORAGE_BUCKET = 
VITE_MESSAGING_SENDERID = 
VITE_APP_ID = 

# Server connection
VITE_SERVER_URL = "http://localhost:5000"

---

For the server:

API_KEY = 
AUTH_DOMAIN = 
PROJECT_ID = 
STORAGE_BUCKET = 
MESSAGING_SENDERID = 
APP_ID = 

RESEND_API_KEY = 
EXPO_ACCESS_TOKEN =

2. Copy the serviceAccountKey.json file from your Firebase project and paste it inside the server folder. This file is used for the Firebase Admin SDK to authenticate with Firebase.

⚙️ Running the project ⚙️

Start the server

cd server
npm run dev

Start the client

cd client
npm run dev

✒️ Authors ✒️

• Petar Taushanov - ptaushanov

📄 License 📄

This project is licensed under the MIT License - see the LICENSE.md file for details.