Jadwal Kuliah - PWA Schedule App

A Progressive Web App (PWA) for managing university class schedules. Built with React, Vite, and Tailwind CSS.

📑 Table of Contents

• Features
• Tech Stack
• Getting Started
  • Prerequisites
  • Installation
• Editing Schedule
  • Schedule Data Structure
• PWA Features
• UI Components
• Project Structure
• Contributing

🌟 Features

• 📱 Progressive Web App (PWA) - installable on mobile devices
• 📅 View mandatory and elective courses
• 📌 Pin courses
• 🎨 Color-coded days for better visualization
• 📱 Responsive design for mobile and desktop
• 🔄 Offline support
• ⚡ Fast and lightweight
• 💫 GSAP animations for smooth interactions

🛠️ Tech Stack

• React 18
• Vite
• Tailwind CSS
• shadcn/ui (Component Library)
• Lucide Icons
• GSAP (Animations)
• React Router DOM
• Workbox (PWA)

🚀 Getting Started

Prerequisites

• Node.js (v16 or higher)
• npm or yarn

Installation

1. Clone the repository

git clone https://github.com/0xtbug/jadwal-kuliah.git

2. Install dependencies

npm install
# or
yarn

3. Start development server

   npm run dev
   # or
   yarn dev
   

4. Build for production

   npm run build
   # or
   yarn build
   

📝 Editing Schedule

To add or modify the schedule, edit the src/config/scheduleData.js file:

export const scheduleData = [
  {
    id: "101",                                    // Unique identifier
    day: "SENIN",                                // Day of the week
    time: "07.30-10.00",                         // Time format: "HH.mm-HH.mm"
    code: "FIK61545",                            // Course code
    subject: "METODOLOGI PENELITIAN",            // Course name
    credits: 3,                                  // Number of credits
    lecturer: "Didi Juardi, S.T., M.Kom.",      // Lecturer name
    group: "KELAS WAJIB",                        // KELAS WAJIB or KELAS PILIHAN
    room: "Kelas 4.76 - 2",                      // Room location
    department: "IF",                            // Department code
  },
  // For optional courses with multiple sessions
  {
    id: "121",
    subject: "WIRELESS SENSOR NETWORK",
    group: "KELAS PILIHAN",
    session: "SESI 1",                           // Session identifier (for optional courses)
    // ... other fields
  },
  {
    id: "121B",                                  // Different ID for alternative session
    subject: "WIRELESS SENSOR NETWORK",
    group: "KELAS PILIHAN",
    session: "SESI 2",                           // Alternative session
    // ... other fields
  }
];

// Color scheme for different days
export const dayColors = {
  SENIN: "bg-blue-100 border-l-4 border-blue-500",
  SELASA: "bg-green-100 border-l-4 border-green-500",
  RABU: "bg-yellow-100 border-l-4 border-yellow-500",
  KAMIS: "bg-purple-100 border-l-4 border-purple-500",
  "JUM'AT": "bg-pink-100 border-l-4 border-pink-500",
  SABTU: "bg-orange-100 border-l-4 border-orange-500",
};

// Day ordering for sorting
export const dayOrder = {
  SENIN: 1,
  SELASA: 2,
  RABU: 3,
  KAMIS: 4,
  "JUM'AT": 5,
  SABTU: 6,
  MINGGU: 7
};

Schedule Data Structure

Multiple Sessions for Optional Courses

Optional courses ("KELAS PILIHAN") can have multiple sessions. To add an alternative session:

1. Create a new entry with a different ID (e.g., append 'B' to the original ID)
2. Keep the same course details (code, subject, credits, etc.)
3. Set different day/time/room as needed
4. Add the session identifier ("SESI 1", "SESI 2")

📱 PWA Features

• Offline support
• Installable on mobile devices
• Cache management

🎨 UI Components

• Schedule Cards
• Navigation Tabs
• Pin Feature
• Mobile Navigation Bar

📂 Project Structure

src/
├── components/
│   ├── schedule/
│   │   ├── ScheduleCard.jsx
│   │   └── ScheduleNav.jsx
│   └── ui/
├── config/
│   └── scheduleData.js
├── hooks/
│   ├── useSchedule.js
│   └── usePinnedCourses.js
├── pages/
│   └── Home.jsx
└── App.jsx

🤝 Contributing

Contributions are welcome! Please feel free to submit a Pull Request.