MobileApp

KO | EN

gitlite — search

#javascript #python #hacktoberfest #llm #golang #android #macos #java #windows #cli #vue #security #ios #openai

(★ 71)

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

MobileApp Latest Version Download

Download Latest Version (.zip)

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

# TrainLCD

![Billboard](https://raw.githubusercontent.com/TrainLCD/MobileApp/dev/.github/images/billboard.png)

[![All Contributors](https://img.shields.io/badge/all_contributors-6-orange.svg?style=flat-square)](https://raw.githubusercontent.com/TrainLCD/MobileApp/dev/)

![Code quality](https://github.com/TrainLCD/MobileApp/workflows/Code%20quality/badge.svg)
![Test](https://github.com/TrainLCD/MobileApp/workflows/Jest/badge.svg)
[![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg?style=flat-square)](http://makeapullrequest.com)

**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](#screenshots)
- [Features](#features)
- [Getting Started](#getting-started)
  - [Prerequisites](#prerequisites)
  - [Installation](#installation)
  - [Running the App](#running-the-app)
- [Download](#download)
- [Development](#development)
  - [Project Structure](#project-structure)
  - [Available Scripts](#available-scripts)
  - [Testing](#testing)
- [Contributing](#contributing)
- [Code of Conduct](#code-of-conduct)
- [Architecture](#architecture)
- [Support](#support)
- [Join our Community](#join-our-community)
- [Data Sources](#data-sources)
- [Contributors](#contributors-)
- [Related Projects](#related-projects)
- [License](#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** (pinned via `.nvmrc`; run `nvm use` to switch automatically)
- **npm 10.x** (bundled with Node.js 22; `engines` + `engine-strict=true` block `npm install` on other versions)
- **React Native development environment** set up
- **Expo CLI** installed globally
- **Android Studio** (for Android development)
- **Xcode** (for iOS development, macOS only)

### Installation

1. Clone the repository:
   ```bash
   git clone https://github.com/TrainLCD/MobileApp.git
   cd MobileApp
   ```

2. Install dependencies:
   ```bash
   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:

```bash
npm run start
```

#### Platform-specific Commands

- **iOS**: `npm run ios`
- **Android**: `npm run android`
- **Web**: `npm run web`

## Download

[![Google Play](https://raw.githubusercontent.com/TrainLCD/MobileApp/dev/.github/images/googleplay.png)](https://play.google.com/store/apps/details?id=me.tinykitten.trainlcd)
[![App Store](https://raw.githubusercontent.com/TrainLCD/MobileApp/dev/.github/images/appstore.svg)](https://apps.apple.com/jp/app/trainlcd/id1486355943)

## 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/tsemdME9Nz](https://discord.gg/tsemdME9Nz)

## Development

### Project Structure

```text
src/
├── components/        # Reusable UI components
├── screens/           # Screen components
├── hooks/             # Custom React hooks
├── store/             # Jotai atoms 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
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:

```bash
npm test
```

For watch mode during development:

```bash
npm run watch:test
```

### Backend (Cloudflare Workers)

The backend (feedback triage, review notifiers) now lives in the dedicated [TrainLCD/BFF](https://github.com/TrainLCD/BFF) monorepo and is no longer part of this repository. Voice announcements (TTS) are generated on-device with the OS-native speech synthesizer via `expo-speech`.

## 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](https://github.com/TrainLCD/MobileApp/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
- **Cloudflare Workers** - Backend API (auth, feedback, remote config) with R2/KV storage
- **Sentry** - Error tracking and performance monitoring
- **GraphQL** with Code Generator - Typed queries and operations

## Support

### Community Support

- Join our [Discord community](https://discord.gg/tsemdME9Nz) for discussions and support
- Check out existing [Issues](https://github.com/TrainLCD/MobileApp/issues) and [Discussions](https://github.com/TrainLCD/MobileApp/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)](https://www.kotsu.metro.tokyo.jp/), licensed under [CC BY 4.0](https://creativecommons.org/licenses/by/4.0/)
- Station data provided by [駅データ.jp](https://www.ekidata.jp/)

## Contributors ✨

Thanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):

<table>
 <tbody>
 <tr>
 <td align="center" valign="top" width="14.28%"><a href="https://github.com/makotia"><img src="https://avatars.githubusercontent.com/u/22451396?v=4?s=100" width="100px;" alt="makotia"/> makotia</a> <a href="https://github.com/TrainLCD/MobileApp/commits?author=makotia" title="Documentation">📖</a> <a href="#userTesting-makotia" title="User Testing">📓</a> <a href="https://github.com/TrainLCD/MobileApp/pulls?q=is%3Apr+reviewed-by%3Amakotia" title="Reviewed Pull Requests">👀</a></td>
 <td align="center" valign="top" width="14.28%"><a href="https://sw-saturn.dev"><img src="https://avatars.githubusercontent.com/u/20313668?v=4?s=100" width="100px;" alt="Kanta Demizu"/> Kanta Demizu</a> <a href="#data-Sw-Saturn" title="Data">🔣</a> <a href="#userTesting-Sw-Saturn" title="User Testing">📓</a> <a href="https://github.com/TrainLCD/MobileApp/pulls?q=is%3Apr+reviewed-by%3ASw-Saturn" title="Reviewed Pull Requests">👀</a></td>
 <td align="center" valign="top" width="14.28%"><a href="https://nrsy.jp"><img src="https://avatars.githubusercontent.com/u/31317056?v=4?s=100" width="100px;" alt="SAIGUSA Tomotada"/> SAIGUSA Tomotada</a> <a href="#userTesting-10mocy" title="User Testing">📓</a> <a href="#data-10mocy" title="Data">🔣</a></td>
 <td align="center" valign="top" width="14.28%"><a href="https://github.com/kokoa0429"><img src="https://avatars.githubusercontent.com/u/17563842?v=4?s=100" width="100px;" alt="yasuto masuda"/> yasuto masuda</a> <a href="#userTesting-kokoa0429" title="User Testing">📓</a></td>
 <td align="center" valign="top" width="14.28%"><a href="https://kataba.me"><img src="https://avatars.githubusercontent.com/u/9818101?v=4?s=100" width="100px;" alt="Katabame Miaya"/> Katabame Miaya</a> <a href="#data-katabame" title="Data">🔣</a> <a href="#userTesting-katabame" title="User Testing">📓</a> <a href="https://github.com/TrainLCD/MobileApp/commits?author=katabame" title="Documentation">📖</a></td>
 <td align="center" valign="top" width="14.28%"><a href="http://coderabbit.ai"><img src="https://avatars.githubusercontent.com/u/132028505?v=4?s=100" width="100px;" alt="CodeRabbit"/> CodeRabbit</a> <a href="https://github.com/TrainLCD/MobileApp/pulls?q=is%3Apr+reviewed-by%3Acoderabbitai" title="Reviewed Pull Requests">👀</a></td>
 </tr>
 </tbody>
</table>

This project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!

## Related Projects

- [StationAPI](https://github.com/TrainLCD/StationAPI) - Backend API for station data

## License

This project is licensed under the MIT License - see the [LICENSE](LICENSE) file for details.

MobileApp

MobileApp Latest Version Download

Today's picks

Was this content helpful?

Recent Feedback

MobileApp

MobileApp Latest Version Download

Today's picks

Was this content helpful?

Recent Feedback

Download README