/festify-admin

🎓 Bachelor thesis app for holiday managment by teachers 🎓

Primary LanguageCSSMIT LicenseMIT

⚙️ 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 📱

image

🛠️ 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 =
  1. 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 ✒️

📄 License 📄

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