KRL Connect is a web application designed to help commuters in Indonesia easily access real-time commuter line schedules, check ticket fares, and explore a complete interactive route map. Whether you're a daily worker, a tourist, or just planning a trip, KRL Connect puts the information you need right at your fingertips.
You can explore the UI/UX design of KRL Connect on Figma:
🔗 https://krl-connect.myusufuw.com
- 🔍 Effortless Schedule Search: Quickly find train schedules between your desired departure and arrival stations.
- 💸 Instant Fare Calculation: Get accurate and up-to-date ticket prices for your journey.
- 🗺️ Route Map: Visually explore the entire KRL Commuter Line network with a static map.
- ⚡ Real-Time Data: All information is powered by the official commuterline.id API, ensuring accuracy.
- 📱 Fully Responsive: Enjoy a seamless experience on both desktop and mobile devices.
- 🧑💻 Language: TypeScript
- ⚙️ Framework: Next.js
- 🔄 State Management: React Query
- ✅ Validation: Zod
- 🧹 Linting: ESLint
- 🎨 UI Components: Hero UI
- 🧠 Design & Prototyping: Figma
- 🔌 HTTP Client: Axios
- 🕒 Date Handling: Moment.js
- ⚛️ React Context: For providing global values.
Make sure you have Node.js and npm installed on your machine (version 18.x or higher is recommended).
To run this project locally, follow these steps:
# 1. Clone the repository
git clone https://github.com/your-username/krl-connect.git
# 2. Navigate into the project directory
cd krl-connect
# 3. Install dependencies
npm install
# 4. Run the development server
npm run dev
# 5. Then open http://localhost:3000 in your browser.