🍽️ Shishi-Shitufi - Community Potluck Management App

Shishi-Shitufi (Hebrew for "Collaborative Friday") is a real-time, user-centric web application designed to streamline the organization of community potluck events. It replaces cumbersome spreadsheets with an intuitive, interactive interface that synchronizes data instantly across all users.

Built with a focus on seamless user experience, the app allows hundreds of community members to collaborate on food menus and equipment lists without friction, featuring a robust Admin Dashboard for event managers.

🎯 Live Demo

Try the app live: Shishi-Shitufi

Click the link above to join a sample potluck event and experience real-time collaboration! 🚀

This is a demo event - feel free to test all features including adding items, claiming assignments, and seeing live updates from other users.

📋 Table of Contents

• 🚀 Key Features
• 🛠 Tech Stack & Architecture
• 📦 Installation
• 🚀 Usage
• 🤝 Contributing
• 📄 License
• 👤 Author

🚀 Key Features

This application was architected with a "user-first" philosophy, ensuring that both regular users and administrators have an intuitive and efficient experience.

For Community Members (The User Experience):

• Real-Time Collaboration: Leveraging Firebase Realtime Database, the interface updates instantly for all users as items are added or assigned, creating a dynamic feel.
• "Bring & Assign" in One Click: A standout UX feature allows users to add a new item and simultaneously assign it to themselves with a single button click, removing friction.
• Effortless Onboarding: Users can participate instantly with a seamless anonymous authentication flow.
• Smart Context: The app intelligently detects new users and remembers their details locally for future sessions.

For Administrators:

• Centralized Admin Panel: A dedicated, role-protected section for complete control over events, users, and menu items.
• Bulk Import System: Admins can bulk-import menu items from multiple sources, including Excel (.xlsx), CSV, plain text, and preset lists, saving significant setup time.
• Secure Role-Based Access (RBAC): Admin capabilities are protected by server-side Firebase Security Rules.
• Comprehensive Management: Full CRUD functionality for events, menu items, and user assignments.

---

🛠 Tech Stack & Architecture

The application is built with modern web technologies focusing on performance and developer experience:

• Frontend: React 18, Vite, TypeScript.
• State Management: Zustand (Selected for its lightweight footprint and scalable performance compared to Context API).
• Styling: Tailwind CSS (Utility-first framework for rapid UI development).
• Backend / BaaS: Firebase (Auth, Realtime Database, Hosting).

🏗️ Architecture Overview

The application follows a modern, scalable architecture with clear separation of concerns:

src/
├── components/          # React components organized by feature
│   ├── Admin/          # Protected management interfaces
│   ├── Events/         # Event display logic
│   ├── Auth/           # Authentication components
│   └── Common/         # Reusable UI components
├── hooks/              # Custom React hooks
├── services/           # Firebase service abstraction layer
├── store/              # Global state management (Zustand)
├── types/              # TypeScript type definitions
└── utils/              # Helper functions and utilities

📦 Installation

Prerequisites

System Requirements

• Node.js: v18.0.0 or later
• npm: v8.0.0 or later (comes with Node.js)
• Operating System: Windows 10+, macOS 10.15+, Ubuntu 18.04+
• RAM: Minimum 4GB
• Storage: 500MB free space

Firebase Setup

• Firebase Account: Free account at Firebase Console
• Realtime Database: Enabled in your Firebase project
• Authentication: Anonymous and Email/Password providers enabled

Quick Start

1. Clone the repository

   git clone https://github.com/Chagai33/Shishi-ShitufiV3new.git
   cd Shishi-ShitufiV3new
   

2. Install dependencies

   npm install
   

3. Configure Firebase

   • Create a new project at Firebase Console
   • Enable Realtime Database
   • Configure Authentication with Anonymous and Email/Password providers
   • Copy your Firebase config to src/lib/firebase.ts

4. Configure Security Rules

   • The rules live in database.rules.json and are wired into firebase.json
   • Deploy them with:

     firebase deploy --only database
     

   • Editing the rules in the Firebase console instead will put the console and the repository out of step, which is exactly what this pipeline exists to prevent

5. Start development server

   npm run dev
   

The application will be available at http://localhost:5173

여기까지가 README 앞부분입니다. 나머지는 원문에서 읽을 수 있습니다. README 전문 보기 ↗