https://github.com/odota/web
React web interface for the OpenDota platform
https://github.com/odota/web
data dota hacktoberfest javascript react redux ui visualization webpack
Last synced: about 1 month ago
JSON representation
React web interface for the OpenDota platform
- Host: GitHub
- URL: https://github.com/odota/web
- Owner: odota
- License: mit
- Created: 2016-05-27T08:06:05.000Z (almost 9 years ago)
- Default Branch: master
- Last Pushed: 2025-03-11T21:16:00.000Z (2 months ago)
- Last Synced: 2025-04-05T10:01:43.554Z (about 2 months ago)
- Topics: data, dota, hacktoberfest, javascript, react, redux, ui, visualization, webpack
- Language: JavaScript
- Homepage: https://www.opendota.com
- Size: 169 MB
- Stars: 1,096
- Watchers: 37
- Forks: 394
- Open Issues: 125
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
- awesome-list - web
README
# opendota-web
[](https://www.codetriage.com/odota/web)
OpenDota Web UI: A web interface for viewing Dota 2 data. This utilizes the [OpenDota API](https://docs.opendota.com), which is also an [open source project](https://github.com/odota/core).
## Quickstart
- Clone the repo using `git clone [email protected]:odota/web.git`
### With Docker
```
$ docker-compose up
```
- Visit port 3000 on your development machine.
### Without Docker
- Install Node.js (v16 or greater) (download [installer](https://nodejs.org/en/download/) or [install via package manager](https://nodejs.org/en/download/package-manager/))
- `npm install`
- `npm start`
- Visit port 3000 on your development machine.
## Contributing
- Make some changes.
- `npm run lint` to check your code for linting errors.
- `npm test` to check all app routes for uncaught JavaScript errors.
- Submit a pull request. Wait for review and merge.
- Congratulations! You're a contributor.
## Configuration
- You can set the following environment variables:
- PORT: Changes the port that the development server runs on
- VITE_API_HOST: Changes the API that the UI requests data from (default https://api.opendota.com)
## Tech Stack
- View: React
- State Management: Redux
- CSS: styled-components
## Workflow
- If you're interested in contributing regularly, let us know and we'll add you to the organization.
- The `master` branch is automatically deployed to the stage environment.
- We'll periodically ship releases to production: https://www.opendota.com
## Notes
- You don't have to set up the entire stack (databases, etc.), or worry about getting starter data, since the UI points to the production API.
- Use the configuration to point to your own API (if you are working on a new feature and want to start building the UI before it's deployed to production).
- Discord: https://discord.gg/opendota
- Strongly recommended for active developers! We move fast and it's helpful to be up to speed with everything that's happening.
## Resources
- New to React/Redux? Read these articles on React and watch video tutorials by Redux creator Dan Abramov.
- Thinking in React: https://facebook.github.io/react/docs/thinking-in-react.html
- Getting started with Redux: https://egghead.io/courses/getting-started-with-redux
- Idiomatic Redux: https://egghead.io/courses/building-react-applications-with-idiomatic-redux
- ES6 guide: https://github.com/lukehoban/es6features
## Testing
[BrowserStack](https://www.browserstack.com/start) have been kind enough to provide us with a free account for Live and Automate. We will be using Automate in the future to run automatic end-to-end testing.
BrowserStack is a cloud-based cross-browser testing tool that enables developers to test their websites across various browsers on different operating systems and mobile devices, without requiring users to install virtual machines, devices or emulators.