TrainLCD

TrainLCD is a mobile application that simulates Japanese railway company LCDs, providing real-time navigation and station information for train passengers.

This app recreates the authentic experience of Japanese train travel by displaying station information in the same style as actual train LCD screens. Whether you're a tourist visiting Japan, a daily commuter, or simply fascinated by Japanese railway systems, TrainLCD offers an immersive and practical navigation experience.

Table of Contents

• Screenshots
• Features
• Getting Started
  • Prerequisites
  • Installation
  • Running the App
• Download
• Development
  • Project Structure
  • Available Scripts
  • Testing
• Contributing
• Code of Conduct
• Architecture
• Support
• Join our Community
• Data Sources
• Contributors
• Related Projects
• License

Screenshots

Screenshots and demo videos coming soon...

Features

• 🚆 Authentic LCD: Experience genuine Japanese train LCD interfaces with accurate styling from major railway companies
• 📍 Real-time Location Tracking: Automatically detect your current position and display relevant station information
• 🔔 Smart Notifications: Get notified when approaching or arriving at your destination station
• 🎨 Multiple Themes: Choose from various railway company themes including JR East, JR West, Tokyo Metro, and more
• 📱 Cross-platform: Available on both iOS and Android devices
• 🌐 Offline Support: Core functionality works without internet connection
• 🗾 Comprehensive Coverage: Supports major railway lines across Japan

Getting Started

Prerequisites

Before you begin, ensure you have met the following requirements:

• Node.js 22.x
• npm 10.x
• React Native development environment set up
• Expo CLI installed globally
• Firebase CLI (for Cloud Functions development)
• Android Studio (for Android development)
• Xcode (for iOS development, macOS only)

Installation

1. Clone the repository:

   git clone https://github.com/TrainLCD/MobileApp.git
   cd MobileApp

2. Install dependencies:

   npm install

   Note: Configure GQL_API_URL before running npm run gql:codegen to regenerate GraphQL types.

Running the App

Development Mode

To start the development server:

npm run start

Platform-specific Commands

• iOS: npm run ios
• Android: npm run android
• Web: npm run web

Download

Join our Community

If you like this project, join our Discord community!
NOTE: English is welcome, but in the community, we usually use Japanese for discussions, announcements, etc.
https://discord.gg/7sQhQhnvvw

Development

Project Structure

src/
├── components/        # Reusable UI components
├── screens/           # Screen components
├── hooks/             # Custom React hooks
├── store/             # Zustand stores and selectors
├── stacks/            # React Navigation stack definitions
├── providers/         # Context providers and integration wrappers
├── lib/               # API clients and shared integrations
├── config/            # Static configuration helpers
├── constants/         # Shared constants
├── utils/             # Utility functions and test helpers
├── test/              # Testing utilities and e2e harness
├── __mocks__/         # Jest mocks
├── __fixtures__/      # Test fixtures
├── @types/            # Global TypeScript declarations
├── models/            # Data models
├── index.tsx          # App entry point
├── translation.ts     # i18n resources
└── lineSymbolImage.ts # Line symbol metadata

android/               # Native Android project
ios/                   # Native iOS project
functions/             # Firebase Cloud Functions
docs/                  # Architectural notes and runbooks
assets/                # Static media bundled with the app
utils/                 # Tooling scripts and codegen helpers

Available Scripts

• npm run start - Start the Expo development server
• npm run android / npm run ios - Build and launch native binaries
• npm run web - Serve the Expo web build
• npm run lint - Run Biome linter
• npm run format - Format code with Biome
• npm test - Run Jest tests
• npm run typecheck - Run TypeScript type checking
• npm run watch:test - Run tests in watch mode
• npm run gql:codegen - Regenerate GraphQL types after schema or documents change (requires GQL_API_URL)

Testing

This project uses Jest for testing. Run the test suite with:

npm test

For watch mode during development:

npm run watch:test

Firebase Cloud Functions

This project includes Firebase Cloud Functions located in the functions/ directory. To work with Cloud Functions:

1. Navigate to the functions directory:

   cd functions

2. Install function dependencies:

   npm install

3. Build the functions:

   npm run build

4. Run functions locally (requires Firebase CLI):

   firebase emulators:start

Contributing

We welcome contributions from the community! Here's how you can help:

How to Contribute

1. Fork the repository
2. Create a feature branch: git checkout -b feature/amazing-feature
3. Make your changes and ensure they follow our coding standards
4. Run tests: npm test
5. Run linting: npm run lint
6. Commit your changes: git commit -m 'Add some amazing feature'
7. Push to the branch: git push origin feature/amazing-feature
8. Open a Pull Request

Development Guidelines

• Follow the existing code style and conventions
• Write clear, descriptive commit messages
• Add tests for new features
• Update documentation as needed
• Ensure all tests pass before submitting

Reporting Issues

If you encounter any bugs or have feature requests:

1. Check if the issue already exists in our Issues
2. If not, create a new issue with:
   • Clear description of the problem
   • Steps to reproduce (for bugs)
   • Expected vs actual behavior
   • Device/platform information
   • Screenshots if applicable

Code of Conduct

This project adheres to a code of conduct that we expect all contributors to follow. Please be respectful and professional in all interactions.

Our Standards

• Be welcoming and inclusive
• Respect differing viewpoints and experiences
• Give and gracefully accept constructive feedback
• Focus on what is best for the community
• Show empathy towards other community members

Architecture

TrainLCD is built with:

• React Native with Expo - Cross-platform mobile development
• TypeScript - Type safety and better developer experience
• React Navigation - Navigation library
• Tanstack Query - Data fetching and caching
• Firebase - Backend services (Analytics, Auth, Firestore, Storage)
• Sentry - Error tracking and performance monitoring
• GraphQL with Code Generator - Typed queries and operations

Support

Community Support

• Join our Discord community for discussions and support
• Check out existing Issues and Discussions

Professional Support

For professional support or custom development, please contact the maintainers.

Acknowledgments

• Thanks to all contributors who have helped improve this project
• Special thanks to the Japanese railway companies for providing inspiration
• The open-source community for the excellent tools and libraries

Data Sources

• Bus-related data provided by Tokyo Metropolitan Bureau of Transportation (Toei), licensed under CC BY 4.0
• Station data provided by 駅データ.jp

Contributors ✨

Thanks goes to these wonderful people (emoji key):

makotia 📖 📓 👀

Kanta Demizu 🔣 📓 👀

SAIGUSA Tomotada 📓 🔣

yasuto masuda 📓

Katabame Miaya 🔣 📓 📖

CodeRabbit 👀

This project follows the all-contributors specification. Contributions of any kind welcome!

Related Projects

• StationAPI - Backend API for station data

License

This project is licensed under the MIT License - see the LICENSE file for details.