{"id":24433652,"url":"https://github.com/ore-codes/typehour-webapp","last_synced_at":"2026-04-29T06:35:00.216Z","repository":{"id":273222782,"uuid":"919032130","full_name":"ore-codes/typehour-webapp","owner":"ore-codes","description":"Frontend for TypeHour, a fast-paced multiplayer typing racing game. Built with React, Vite, RxJS, Framer Motion, and Socket.IO for real-time gameplay and smooth animations.","archived":false,"fork":false,"pushed_at":"2025-01-19T20:04:09.000Z","size":8809,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2026-01-02T16:44:10.334Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"https://typehour-webapp.vercel.app","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/ore-codes.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2025-01-19T14:39:28.000Z","updated_at":"2025-02-05T06:47:12.000Z","dependencies_parsed_at":"2025-01-19T15:39:28.716Z","dependency_job_id":"4340a059-517c-47f8-bd2a-3c6048840481","html_url":"https://github.com/ore-codes/typehour-webapp","commit_stats":null,"previous_names":["ore-codes/typehour-webapp"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/ore-codes/typehour-webapp","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ore-codes%2Ftypehour-webapp","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ore-codes%2Ftypehour-webapp/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ore-codes%2Ftypehour-webapp/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ore-codes%2Ftypehour-webapp/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/ore-codes","download_url":"https://codeload.github.com/ore-codes/typehour-webapp/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ore-codes%2Ftypehour-webapp/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":32414419,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-04-29T06:29:02.080Z","status":"ssl_error","status_checked_at":"2026-04-29T06:29:00.631Z","response_time":110,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.6:443 state=error: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2025-01-20T16:39:34.421Z","updated_at":"2026-04-29T06:35:00.183Z","avatar_url":"https://github.com/ore-codes.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# TypeHour Frontend\n\nWelcome to **TypeHour**, a fast-paced multiplayer typing racing game built for a take-home assessment for PlayHour.ai. This repository contains the frontend code for the game, showcasing a combination of cutting-edge web technologies and delightful animations.\n\n## 🎮 About the Game\n\nTypeHour is a multiplayer game where players compete to type through a given paragraph as quickly and accurately as possible. The first player to complete the paragraph wins!\n\n### How to Play\n1. **Join or Create a Game**:\n    - Enter an existing game ID or create a new game.\n2. **Race to Type**:\n    - Type the provided paragraph as quickly and accurately as possible.\n    - Progress is displayed in real-time for all players.\n3. **Win**:\n    - The first player to complete the paragraph is the winner, but all players can see their scores and rankings at the end.\n\n## 🛠️ Technologies Used\n\n- **[RxJS](https://rxjs.dev/)**: For reactive state management and handling real-time updates efficiently.\n- **[Storybook](https://storybook.js.org/)**: For building and testing UI components in isolation.\n    - **Storybook Documentation**: [View Storybook Components](https://678d43a05beaf5b2705b8134-mtyslrykwi.chromatic.com)\n- **[Framer Motion](https://www.framer.com/motion/)**: For smooth animations and transitions.\n- **[Vite](https://vitejs.dev/)**: A fast and modern frontend build tool.\n- **[Socket.IO](https://socket.io/)**: For real-time communication between the client and server.\n\n## 🚀 Getting Started\n\nFollow these steps to set up and run the project locally:\n\n### Prerequisites\nMake sure you have the following installed:\n- **Node.js** (v16 or later)\n- **npm** or **yarn**\n\n### Installation\n\n1. **Clone the Repository**\n   ```bash\n   git clone https://github.com/ore-codes/typehour-webapp.git\n   cd typehour-webapp\n   ```  \n\n2. **Install Dependencies**\n   ```bash\n   npm install\n   # or\n   yarn install\n   ```  \n\n3. **Set Up Environment Variables**  \n   Create a `.env` file in the root directory with the following content:\n   ```env\n   VITE_SERVER_URL=http://localhost:3000\n   ```  \n   Replace `http://localhost:3000` with your backend server URL if it's running elsewhere.\n\n4. **Run the Development Server**\n   ```bash\n   npm run dev\n   # or\n   yarn dev\n   ```  \n   Open your browser and navigate to `http://localhost:5173` to play the game locally.\n\n### Run Storybook\n\nTo view and interact with the UI components used in the game:\n```bash\nnpm run storybook\n# or\nyarn storybook\n```  \nStorybook will be accessible at `http://localhost:6006`.\n\n## 🌟 Features\n\n- **Real-Time Multiplayer**: Powered by Socket.IO for seamless interactions between players.\n- **Reactive UI**: Built using RxJS to handle live updates in player progress and game states.\n- **Interactive Animations**: Framer Motion makes the game visually engaging and smooth.\n- **Component Isolation**: Storybook ensures high-quality, reusable UI components.\n- **Modern Build Tooling**: Vite enables lightning-fast development and builds.\n\n## 🖼️ Storybook Documentation\n\nExplore the complete UI documentation for TypeHour components:  \n[View Storybook](https://678d43a05beaf5b2705b8134-mtyslrykwi.chromatic.com)\n\n## 🤝 Contributing\n\nContributions are welcome! Please fork the repository and submit a pull request.\n\n## 📄 License\n\nThis project is licensed under the [MIT License](LICENSE).\n\n---  \n\nThank you for checking out **TypeHour**! 🎉  \n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fore-codes%2Ftypehour-webapp","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fore-codes%2Ftypehour-webapp","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fore-codes%2Ftypehour-webapp/lists"}