|
| 1 | +# Zypher: College Event Management Platform |
| 2 | +> |
| 3 | +> A full-stack TypeScript mobile application for managing CSI's college events with real-time voting, user profiles, and push notifications. |
| 4 | +> Professional event management system built on React Native |
| 5 | +
|
| 6 | +<div align="center"> |
| 7 | + <img src="./screenshots/banner.png" alt="Project Banner" height="200"/> |
| 8 | +</div> |
| 9 | + |
| 10 | +--- |
| 11 | + |
| 12 | +## 🎯 Project Overview |
| 13 | + |
| 14 | +An enterprise grade mobile event management platform designed for college societies. The system features a **React Native mobile app** (iOS/Android) powered by a **Node.js backend API**. |
| 15 | + |
| 16 | + |
| 17 | +### Core Features |
| 18 | + |
| 19 | +#### <> Authorization: |
| 20 | +- **Firebase Authentication** integration for secure user management |
| 21 | +- **JWT-based** middleware for protected routes |
| 22 | +- Custom `verifyJWT` middleware with Bearer token validation |
| 23 | +- Type-safe request augmentation with custom Express types |
| 24 | + |
| 25 | +```typescript |
| 26 | +// Type-safe authentication middleware |
| 27 | +interface AuthenticatedRequest extends Request { |
| 28 | + user?: JwtPayload | string; |
| 29 | +} |
| 30 | +``` |
| 31 | + |
| 32 | +#### <> Real-Time Voting System |
| 33 | +- **Server-Sent Events (SSE) based** for live vote updates |
| 34 | +- Unidirectional server-to-client streaming |
| 35 | +- Automatic reconnection handling |
| 36 | +- Event-driven architecture for vote broadcasts |
| 37 | +- Low-latency performance updates without polling |
| 38 | + |
| 39 | +#### <> Database Design |
| 40 | + |
| 41 | +**8 Normalized Models** with relations: |
| 42 | + |
| 43 | +1. **User**: Authentication & profile linkage |
| 44 | + - Email-based unique identification |
| 45 | + - Push notification token management |
| 46 | + - Admin role support |
| 47 | + |
| 48 | +2. **Profile**: Extended user information |
| 49 | + - College, year, program, branch |
| 50 | + - Gender enum type |
| 51 | + - Cascade deletion on user removal |
| 52 | + |
| 53 | +3. **Event**: Event management |
| 54 | + - Rich metadata (performers, venue, type) |
| 55 | + - Registration & rule book links |
| 56 | + - Voting enablement toggle |
| 57 | + |
| 58 | +4. **Performance**: Sub-events within main events |
| 59 | + - Many-to-one relation with Events |
| 60 | + - Real-time voting controls |
| 61 | + - Configurable voting duration |
| 62 | + |
| 63 | +5. **Vote**: User voting records |
| 64 | + - Compound relations (User + Performance) |
| 65 | + - Boolean vote tracking |
| 66 | + - Timestamp auditing |
| 67 | + - Real-time updates via Server-Sent Events (SSE) |
| 68 | + |
| 69 | +#### <> API Patterns |
| 70 | + |
| 71 | +**Generic API Response Handler** |
| 72 | +```typescript |
| 73 | +class ApiResponse<T> { |
| 74 | + statusCode: number; |
| 75 | + data: T; |
| 76 | + message: string; |
| 77 | + success: boolean; |
| 78 | +} |
| 79 | +``` |
| 80 | + |
| 81 | +**Async Handler Wrapper** (Error boundary for async routes) |
| 82 | +```typescript |
| 83 | +const asyncHandler = (requestHandler) => { |
| 84 | + return (req, res, next) => { |
| 85 | + Promise.resolve(requestHandler(req, res, next)) |
| 86 | + .catch((err) => next(err)) |
| 87 | + } |
| 88 | +} |
| 89 | +``` |
| 90 | + |
| 91 | +**Custom Error Classes** with HTTP status codes |
| 92 | +```typescript |
| 93 | +class ApiError extends Error { |
| 94 | + statusCode: number; |
| 95 | + // ... proper error stack tracing |
| 96 | +} |
| 97 | +``` |
| 98 | + |
| 99 | +### <> Middleware Stack |
| 100 | + |
| 101 | +1. **CORS Configuration**: Environment-based origin control |
| 102 | +2. **Body Parsing**: JSON & URL-encoded (50MB limit for images) |
| 103 | +3. **Static File Serving**: Public asset management |
| 104 | +4. **Request Logging**: Pino-based structured logging |
| 105 | +5. **Trust Proxy**: Production-ready reverse proxy support |
| 106 | + |
| 107 | +### <> Deployment |
| 108 | + |
| 109 | +#### Docker Config: |
| 110 | + |
| 111 | +```yaml |
| 112 | +services: |
| 113 | + app: |
| 114 | + - TypeScript build process |
| 115 | + - Volume mounting for hot reload |
| 116 | + - Environment variable injection |
| 117 | + |
| 118 | + db: |
| 119 | + - PostgreSQL 13 Alpine (lightweight) |
| 120 | + - Persistent volume storage |
| 121 | + - Localhost-only port binding (security) |
| 122 | +``` |
| 123 | +
|
| 124 | +
|
| 125 | +#### Database Migrations |
| 126 | +
|
| 127 | +```bash |
| 128 | +npx prisma migrate prod |
| 129 | +npx prisma generate |
| 130 | +``` |
| 131 | + |
| 132 | +## 📱 Mobile Application Architecture |
| 133 | + |
| 134 | +### Tech Stack (React Native) |
| 135 | + |
| 136 | +```typescript |
| 137 | + framework: "React Native (Expo 52)", |
| 138 | + navigation: "Expo Router", |
| 139 | + stateManagement: "Redux Toolkit 2.5", |
| 140 | + authentication: "Firebase Authentication", |
| 141 | + pushNotifications: "Firebase Cloud Messaging", |
| 142 | + uiLibrary: "Tamagui (React Native UI Kit)" |
| 143 | +``` |
| 144 | + |
| 145 | +### Project Structure |
| 146 | + |
| 147 | + |
| 148 | +### Mobile App Features |
| 149 | + |
| 150 | +- **Cross-Platform**: Single codebase for iOS & Android |
| 151 | +- **Google Sign-In** integration with Firebase |
| 152 | +- **Push Notifications** via Firebase Cloud Messaging |
| 153 | +- **Redux State Management** for global app state |
| 154 | +- **File-based Routing** (Expo Router) |
| 155 | +- **Type-Safe API Calls** with Axios interceptors |
| 156 | +- **Native Performance** with Expo optimizations |
| 157 | + |
| 158 | +--- |
| 159 | + |
| 160 | +## <> Setup |
| 161 | + |
| 162 | +### Prerequisites |
| 163 | + |
| 164 | +```bash |
| 165 | +# Required installations |
| 166 | +- Node.js 18+ |
| 167 | +- Docker & Docker Compose |
| 168 | +- PostgreSQL 13+ (or use Docker) |
| 169 | +- Firebase Project (Admin SDK credentials) |
| 170 | +``` |
| 171 | + |
| 172 | +### Backend Setup |
| 173 | + |
| 174 | +```bash |
| 175 | +# 1. Clone the repository |
| 176 | +git clone https://github.com/joyal-jij0/csi-m1.git |
| 177 | +cd csi-m1/backEnd |
| 178 | + |
| 179 | +# 2. Install dependencies |
| 180 | +npm install |
| 181 | + |
| 182 | +# 3. Configure environment variables |
| 183 | +# Create .env file with: |
| 184 | +# - DATABASE_URL |
| 185 | +# - POSTGRES_USER |
| 186 | +# - POSTGRES_PASSWORD |
| 187 | +# - ACCESS_TOKEN_SECRET |
| 188 | +# - CORS_ORIGIN |
| 189 | +# - FIREBASE_ADMIN_SDK_PATH |
| 190 | + |
| 191 | +# 4. Start Docker containers |
| 192 | +docker-compose up -d |
| 193 | + |
| 194 | +# 5. Run Prisma migrations |
| 195 | +npx prisma migrate dev |
| 196 | + |
| 197 | +# 6. Generate Prisma Client |
| 198 | +npx prisma generate |
| 199 | + |
| 200 | +# 7. Start development server |
| 201 | +npm run dev |
| 202 | +# OR with Docker hot-reload |
| 203 | +npm start |
| 204 | +``` |
| 205 | + |
| 206 | +### Mobile App Setup |
| 207 | + |
| 208 | +```bash |
| 209 | +cd csi-m1/frontEnd |
| 210 | + |
| 211 | +# 1. Install dependencies |
| 212 | +npm install |
| 213 | + |
| 214 | +# 2. Configure Firebase |
| 215 | +# Add google-services.json to root (Android) |
| 216 | +# Add GoogleService-Info.plist for iOS |
| 217 | +# Update app.json with Firebase config |
| 218 | + |
| 219 | +# 3. Start Expo development server |
| 220 | +npm start |
| 221 | + |
| 222 | +# 4. Run on physical device/emulator |
| 223 | +npm run android # For Android |
| 224 | +npm run ios # For iOS (macOS only) |
| 225 | + |
| 226 | +# 5. Scan QR code with Expo Go app on your phone |
| 227 | +# OR run on emulator/simulator |
| 228 | +``` |
| 229 | + |
| 230 | +--- |
| 231 | + |
| 232 | +## 📸 Screenshots |
| 233 | + |
| 234 | +<div align="center"> |
| 235 | + <img src="./screenshots/IMG-20251110-WA0034.jpg" alt="Home Screen" width="250"/> |
| 236 | + <img src="./screenshots/IMG-20251110-WA0038.jpg" alt="Event Details" width="250"/> |
| 237 | + <img src="./screenshots/IMG-20251110-WA0035.jpg" alt="Voting Interface" width="250"/> |
| 238 | + <img src="./screenshots/IMG-20251110-WA0037.jpg" alt="Profile Management" width="250"/> |
| 239 | +</div> |
| 240 | + |
| 241 | +--- |
| 242 | + |
| 243 | + |
| 244 | +- **About CSI**: [Computer Society of India - MAIT](https://csiinnowave.com) |
| 245 | +- **Technical Societies at MAIT, Delhi**: [Explore All Societies](https://www.mait.ac.in/index.php/gallery/technical.html) |
| 246 | + |
| 247 | +--- |
0 commit comments