CSI Hackathon App

A mobile application designed for managing and enhancing the CSI Hackathon experience. It simplifies event management through features like QR code scanning, real-time updates, and smooth project submission workflows.

📋 Table of Contents

• Features
• Screenshots
• Tech Stack
• Project Structure
• Todo
• Usage

✨ Features

• Live Hackathon Status — Real-time updates and schedule tracking
• QR Code Scanning — Attendance and Meal tracking
• PS Allocation Form — Submit and receive Problem Statements directly through the app
• Project Submission Forms - Submit and manage hackathon projects
• QR Code Scanner - Quick event check-ins and attendance tracking
• Socialize Teams - Scan other team's QR code to connect and interact
• Feedback Collection - Gather insights for continuous improvement

📱 Screenshots

🛠️ Tech Stack

• ⚛️ React Native - Cross-platform mobile framework
• 🚀 Expo - Development platform and tools
• 🎨 Tamagui - UI framework for consistent and beautiful interfaces
• 🔌 Socket.io Client - Real-time communication for notifications
• 📷 Vision Camera - QR code scanning

📁 Project Structure

├── app/                # App screens using Expo Router
│   ├── (tabs)/         # Tab-based navigation screens
│   ├── login.jsx       # Authentication screen
│   └── scanner.jsx     # QR code scanner functionality
├── assets/             # Images, fonts, and icons
├── components/         # Reusable UI components
│   ├── CircularDashAnimation.jsx
│   ├── FeedbackForm.jsx
│   ├── ProjectSubmissionForm.jsx
│   └── TeamSocialModal.jsx
├── constants/          # App-wide constants and configurations
├── context/            # React context providers for state management
│   ├── Provider.tsx
│   ├── SocketContext.jsx
│   └── TeamContext.jsx
└── plugins/            # Custom Expo plugins

✅ Todo

• Implement push notification service for real-time updates
• Create a Screen for Judges to enter their scores
• Extend app to manage normal events too
• Add dark/light theme toggle functionality

🛠️ Usage

Prerequisites

Before getting started, ensure you have the following installed:

• Node.js (v20 or newer)
• Yarn or npm
• Android Studio (for Android development)
• iOS Simulator (for iOS development)

Environment Variables

Create a .env file in the root directory:

EXPO_PUBLIC_SERVER_URL=your_server_url
EXPO_PUBLIC_SOCKET_URL=your_socket_url

Steps

1. Clone the repository:

git clone https://github.com/CSI-SPIT/csi-app-2024
cd csi-app-2024

2. Install dependencies:

yarn install
# or
npm install

3. Start the development server:

yarn start
# or
npm run start

4. Run on Android: Make sure an Android emulator is running or a device is connected

yarn android
# or
npm run android

5. Run on iOS (macOS only):

yarn ios
# or
npm run ios

Build APK (Android)

⚠️ APK building is supported on Linux environments only.

1. Install EAS CLI:

npm install -g eas-cli

2. Logged in to Expo

eas login

3. Run the build command:

yarn build
# or
npm run build

---

Developed with ❤️ for CSI Hackathon