A modern, interactive school timetable and homework management application built with React Native and Expo. This app works seamlessly across iOS, Android, and web platforms.
- Weekly View: Navigate through weeks with intuitive controls
- Color-Coded Subjects: Each subject has a unique color for easy identification
- Current Day Highlighting: Today's classes are clearly marked
- Touch to Add Events: Tap any class to quickly add homework or quiz reminders
- Event Tracking: Add homework assignments and quizzes to specific classes
- Smart Organization: Events are automatically sorted by date and class time
- Quick Actions: Edit or delete events with simple gestures
- Today Indicators: See what's due today at a glance
- Responsive Layout: Optimized for mobile and desktop viewing
- Smooth Scrolling: Synchronized horizontal scrolling for seamless navigation
- Clean Interface: Minimalist design focused on usability
- Cross-Platform: Consistent experience across all devices
Visit the live web version: School Calendar Demo
- Framework: React Native with Expo
- State Management: Zustand
- Date Handling: date-fns
- Navigation: Expo Router with tabs
- UI Components: React Native with custom styling
- Icons: Lucide React Native
- Deployment: GitHub Pages (web), Expo (mobile)
- ✅ Web - Responsive web application
- ✅ iOS - Native iOS app via Expo
- ✅ Android - Native Android app via Expo
- Node.js (v18 or higher)
- npm or yarn
- Expo CLI (for mobile development)
- Clone the repository:
git clone https://github.com/Hilichiu/School-Calendar-Demo
cd School-Calendar-Demo- Install dependencies:
npm install- Start the development server:
npm run dev- Access the application:
- Web: Open your browser and go to the URL shown in the terminal
- Mobile: Use the Expo Go app to scan the QR code
- iOS Simulator: Press
iin the terminal - Android Emulator: Press
ain the terminal
npm run build:webUse Expo's build service:
# Install Expo CLI globally if not already installed
npm install -g @expo/cli
# Build for iOS
expo build:ios
# Build for Android
expo build:androidThe app comes with a pre-configured weekly schedule:
| Time Slot | Monday | Tuesday | Wednesday | Thursday | Friday |
|---|---|---|---|---|---|
| 08:05-08:55 | Chinese | Science & Creative Thinking | Math | Chemistry | PE |
| 09:05-09:55 | Chinese | Science & Creative Thinking | Math | Biology | PE |
| 10:15-11:05 | Scientific Reading | English | Living Technology | Alternative Learning | Math |
| 11:15-12:05 | Scientific Reading | English | Living Technology | Alternative Learning | Math |
| 13:10-14:00 | English | Chemistry | English | History | Chinese |
| 14:10-15:00 | Club | Society | Society | Taiwanese | Elective Subjects |
| 15:10-16:00 | Club | Biology | Chinese | Chinese | Elective Subjects |
| 16:10-17:00 | - | Biology | - | - | - |
- View Timetable: The main screen shows your weekly schedule
- Navigate Weeks: Use the arrow buttons or "Today" button to navigate
- Add Events: Tap any class cell to add homework or quiz reminders
- Manage Homework: Switch to the "Homework" tab to view, edit, or delete events
- Edit Events: Long press on homework items to edit them inline
The timetable structure can be easily modified in store/timetableStore.ts:
- TIMETABLE: Modify the weekly schedule
- COLORS: Customize subject colors
- CLASS_TIMES: Adjust class time slots
This project automatically deploys to GitHub Pages when changes are pushed to the main branch. The GitHub Actions workflow handles building and deploying the web version.
-
Enable GitHub Pages in your repository settings:
- Go to Settings → Pages
- Set Source to "GitHub Actions"
-
Push to main branch - the workflow will automatically trigger
This project is open source and available under the MIT License.
Contributions are welcome! Please feel free to submit a Pull Request.
- Fork the project
- Create your feature branch (
git checkout -b feature/AmazingFeature) - Commit your changes (
git commit -m 'Add some AmazingFeature') - Push to the branch (
git push origin feature/AmazingFeature) - Open a Pull Request
If you have any questions or need help, please open an issue on GitHub.
Made with ❤️ using React Native and Expo