MobileApp

KO | EN

gitlite — search

#javascript #python #hacktoberfest #react #ai #typescript #llm #go #golang #android #machine-learning #rust #deep-learning #linux

★ 71 Open GitHub ↗

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

// 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

오늘의 추천 프로젝트

Was this content helpful?

Recent Feedback

MobileApp

오늘의 추천 프로젝트

Was this content helpful?

Recent Feedback

Download README