MRT/BTS Trains App

Course Materials & Project Guide

Project Overview Environment Setup Week 1: UI Design Week 2: API Integration Week 3: Maps & Routes Week 4: Final Touches Resources

<Project Overview />

Welcome to our MRT/BTS Trains Application project! Over the course of 4 weeks, we'll build a full-featured web application that helps users navigate Chiang Mai's public transportation system.

Interactive Maps

Visual representation of MRT and BTS routes with station markers

Route Planning

Find the fastest routes between stations with transfer suggestions

Real-time Schedule

Up-to-date train arrival and departure times

Fare Calculator

Calculate ticket prices based on journey distance and type

Technology Stack

HTML5 CSS3 JavaScript React.js Node.js Google Maps API Firebase

Learning Outcomes

  • Building modern, responsive user interfaces
  • Working with external APIs and real-time data
  • Implementing mapping and geolocation features
  • State management in complex applications
  • Deploying a full-stack application to production
  • Using AI tools to accelerate development

<Environment Setup />

Before our first session, please make sure you have the following software installed:

Node.js

Download and install the latest LTS version from nodejs.org

# Verify installation
node --version
npm --version

Cursor IDE

Download and install Cursor from cursor.sh

  • Launch Cursor after installation
  • Sign in with GitHub if prompted
  • Get familiar with the interface

Git & GitHub

Create a GitHub account at github.com

# Configure Git (replace with your details)
git config --global user.name "Your Name"
git config --global user.email "your.email@example.com"

Project Repository

Clone our starter repository to get the project template

# Clone the repository
git clone https://github.com/rootaccessdesign/mrt-bts-app.git
cd mrt-bts-app

# Install dependencies
npm install

# Start the development server
npm start

Note: The repository link will be provided at the first session.

<Week 1: UI Design />

In our first week, we'll focus on designing and implementing the user interface for our MRT/BTS app.

Session Overview

  • Introduction to React.js and component-based architecture
  • Setting up the project structure
  • Creating responsive layouts with CSS Grid and Flexbox
  • Building the main navigation and station selection components
  • Implementing dark mode and accessibility features

Key Components We'll Build

StationSelector

Search and select from available stations

[Station Selector UI]

RouteDisplay

Shows the selected route with stations and transfers

[Route Display UI]

TrainSchedule

Displays upcoming train arrivals and departures

[Train Schedule UI]

Homework

After the session, you'll be tasked with:

  • Customizing the color scheme of your app
  • Adding at least one additional component
  • Implementing responsive design for mobile devices
  • Push your changes to GitHub

<Resources />

Official Documentation

Tutorials & Guides

Data Sources

Design Resources

Need Help?

If you're stuck or have questions before our next session, you can:

Join Our Community