JIIT Personalized Time Table Creator

Overview

A powerful React + Python application using WebAssembly (Pyodide) that helps JIIT students create personalized class schedules. Features a modern glassmorphic UI, color-coded timetables, and multiple export options. This application allows users to edit the timetable and add custom events. It also features the ability to fetch the academic calendar and sync it to Google Calendar, with enhanced color coding for events synced to Google Calendar.

The academic calendar is parsed using the script available at: JIIT Academic Calendar

The timetable is parsed using the script available at: JIIT Time Table Parser

Key Features

Parsing: Uses JIIT TimeTable Parser for accurate data extraction
PWA: Download and use offline as well
Branch Support: Handles multiple branches and years
Compare TimeTables: Parses multiple timetables and tells you the common free slots & classes
Shareable Timetable: Now timetables can be recreated by simple url sharing.
Save Configs: Save and load multiple timetable configs to load that timetable anytime.
Timeline View: No need to export the timetable... you can view the timetable at /timeline route because stored locally
Mess Menu: Added mess menu fetching as well....
Export Options: PDF, PNG, and Google Calendar sync
Custom Events: Edit the timetable and add custom events
Academic Calendar: Fetch and sync the academic calendar to Google Calendar
Enhanced Color Coding: More color coding for events synced to Google Calendar
Mobile-First Design: Responsive navbar with multi-line text support and swipe navigation
Touch Gestures: Swipe left/right to navigate between pages on mobile devices

Tech Stack

Frontend

Framework: React.js with TypeScript
Styling: Tailwind CSS
Animations: Framer Motion
Routing: React Router with swipe navigation
Touch Support: React Swipeable for mobile gestures

Backend

Framework: Python - Pyodide (Web Assembly)
Endpoints: Timetable & Academic Calendar processing, generation & comparing
Google Calendar API for syncing schedules

Data

Note: If you want to make a custom frontend or an App or something make a request

curl https://simple-timetable.tashif.codes/data/time-table/ODD25/62.json   # replace 62 with 128 if want 128 data, also also replace the semester also if want anyother

curl https://simple-timetable.tashif.codes/data/calender/2526/calender.json  # replace 2526 with whichever academic year you want to use

Project Structure


.
├── json_creater.py      # this the python streamlit app that converts the ugly excel to json for the website
├── public
│   ├── data                       # this directory contains all the json data created
│   │   ├── calender
│   │   │   ├── 2425
│   │   │   │   └── calendar.json
│   │   │   └── 2526
│   │   │       └── calender.json
│   │   │
│   │   └── time-table
│   │       ├── EVEN25
│   │       │   ├── 128.json
│   │       │   └── 62.json
│   │       └── ODD25
│   │           ├── 128.json
│   │           ├── 62.json
│   │           └── BCA.json
│   │
│   ├── modules                      # this directory contains specific python modules to create timetable
│   │   ├── BE128_creator.py
│   │   └── BE62_creator.py
│   │
│   ├── _creator.py                  # Python file that creates the timetable
│   ├── manifest.json                # manifest file for PWA
│   ├── robots.txt
│   ├── service-worker.js            # service working to save resources offline
│   └── sitemap.xml
│
├── src
│   ├── components
│   │   ├── academic-calendar.tsx         # Academic calendar display page
│   │   ├── action-buttons.tsx
│   │   ├── background.tsx
│   │   ├── compare-timetable.tsx         # Comparing timetable page
│   │   ├── edit-event-dialog.tsx
│   │   ├── google-calendar-button.tsx
│   │   ├── mess-menu.tsx                 # The mess menu page
│   │   ├── navbar.tsx                    # Swipeable navbar with mobile optimization
│   │   ├── not-found.tsx                 # 404 Not Found Custom page
│   │   ├── schedule-display.tsx
│   │   ├── schedule-form.tsx
│   │   ├── timeline-landing.tsx          # landing page for /timeline if no schedule has been created
│   │   ├── timeline-wrapper.tsx
│   │   ├── timeline.tsx                  # Calendar / Timeline View page for the timetable
│   │   ├── url-params-dialog.tsx
│   │   └── ui\                           # this directory contains the shadcn components
│   │
│   ├── context
│   │   ├── userContext.ts
│   │   └── userContextProvider.tsx
│   │
│   ├── hooks\
│   ├── lib\
│   ├── types\                # TypeScript type Definitions
│   │
│   ├── utils
│   │   ├── calender-AC.ts                  # Google Calendar API Integration for AC
│   │   ├── calender.ts                     # Google Calendar API Integration for TimeTable
│   │   ├── download.ts                     # Hook/function to download png/pdf of TimeTable
│   │   └── pyodide.ts                      # WASM middleware for module execution
│   │
│   ├── App.tsx          # the schedule creator page
│   └── main.tsx         # apps entry point
│
├── README.md
└── index.html

Data Flow

User selects batch, year, campus, and electives.
Python parser processes the timetable.
React renders the personalized schedule.
Export options handle data conversion.
Academic calendar is accessed to add its visualization.

Development Setup

Prerequisites

bun (recommended) or npm
Python 3.8+ (for parser)

Clone the repository and navigate:

git clone https://github.com/tashifkhan/JIIT-time-table-website
cd JIIT-time-table-website

Install dependencies:
```
bun i
```
or
```
npm i
```
Run the development server:
```
bun dev
```
or
```
npm run dev
```

Frontend runs at: http://localhost:5173

Usage

Home Page
- Enter your campus, batch, year, and electives.
- Fetch electives dynamically from JSON - created using Parser.
Timetable Page
- View your personalized schedule.
- Color-coded design for easy understanding.
- Edit Functionality
- Adding of Custom Events
Export Options
- Download as PDF/PNG or sync with Google Calendar.
Academic Calendar Sync
- Fetch the academic calendar using the Academic Calendar Parser.
- Sync the academic calendar to Google Calendar with enhanced color coding for events.
Mobile Navigation
- Swipe left/right to navigate between pages
- Responsive navbar with multi-line text support
- Touch-optimized interface

Mobile Features

Swipe Navigation: Swipe left/right to navigate between pages
Responsive Navbar: Multi-line text support for better readability
Touch Gestures: Optimized for mobile interaction
PWA Support: Install as app and use offline

Troubleshooting

Common issues and solutions:

Loading Error: Clear cache and reload
Export Failed: Check browser permissions... especially WASM
Parser Error: Check the freaking Excel for errors
Mobile Issues: Ensure you're using a modern browser with touch support

Contributing

We welcome contributions to enhance this project!

Fork the repository.
Create a new branch:
```
git checkout -b feature-name
```
Commit changes and create a pull request.

Raising an Issue

If you encounter any issues or have suggestions, please raise an issue on GitHub:

Go to the Issues section of the repository.
Click on the "New Issue" button.
Provide a detailed description of the issue or suggestion.
Submit the issue.

I appreciate your feedback and contributions!

Future Scope

Handelled BCA TimeTable
Handling 4th year BE TimeTable
PWA Support for offline usage
Reminders for classes
Visualization of free and busy slots of 2 students
Mobile-responsive navbar with multi-line text support
Swipe navigation for mobile devices

License

GPL-3.0 License - See

file

Contact

For support or queries:

GitHub Issues
Email: [developer@tashif.codes]