OH is a web-based companion tool for anyone playing the online game Once Human. This app provides players with tools for managing in-game recipes, customizing UI themes, role-based admin tools, and a comprehensive RSS feed system. Designed for the Once Human gaming community, the platform offers powerful features built on modern web technologies, delivering a dynamic user experience.
-
Dynamic Theme Customization: Customize site themes with real-time updates using sliders, color pickers, and more.
-
Interactive Smoke Background: Playground-customizable animated smoke effect with a spotolight overlay on home page.
-
WebGL Text Animation: Playground-customizable particle-based text that reacts to mouse movements for logo and home page.
Thank you to Aryan Kathawale for the inspiration and original code shared on the T3 Discord. His project sst-shop provided the foundation for this feature's development.
-
Recipe Management: Full CRUD operations for managing in-game recipes, including filtering by type, rarity, and location as an animated flip-book.
-
RSS Feed System: Aggregates content from YouTube, Twitter, and generic RSS feeds, displayed via a scrolling ticker and dedicated rss page.
-
Admin Tools: Manage users, roles, recipes, rss feeds, and a detailed audit-logger.
-
Discord Integration: Login and role-based access via Discord, powered by NextAuth.js.
- Languages: TypeScript (primary), CSS (Tailwind), HTML, JavaScript (legacy).
- Frontend:
- Next.js: Server-side rendering, static site generation.
- Radix UI: Consistent UI components for theme customization.
- Tailwind CSS: Rapid UI development.
- Backend:
- Prisma: ORM connecting the PostgreSQL database to the app.
- TRPC: Type-safe API calls.
- NextAuth.js: Discord-based authentication and role management.
- Database: PostgreSQL for managing user data, recipes, themes, roles, and RSS feeds.
- Deployment:
- Hosted on Railway (App & PostgreSQL).
- GitHub for version control.
- Docker for containerization.
/src/components: Houses reusable UI components such asPlaygroundPreview,InteractiveSmokeBackground,WebGLTextAnimation,FeedBox, andRssTicker./src/app: Contains pages for:- Home Page: Main site content.
- Admin Page: Manages recipes, RSS feeds, bonus stats, and user roles.
- Playground: Real-time site customization through sliders and color pickers.
- InteractiveSmokeBackground: Provides an interactive smoke effect for dynamic visuals.
- WebGLTextAnimation: Renders interactive, particle-based text.
- Context Management:
- ThemeContext: Handles global theme settings for real-time updates across the site.
- TRPC Integration: Provides type-safe APIs for managing themes, recipes, RSS feeds, and more.
- PlaygroundControls.tsx: Provides real-time customization for UI elements (colors, fonts, layouts, etc.).
- Save Theme Mutation: Allows users to save theme settings with feedback on success or failure.
- Adds dynamic smoke effects and spotlights with complete color/intensity/particle control through the playground.
- Renders interactive particle-based text that reacts to mouse movements, customizable via the Playground.
- Aggregates content from external sources like YouTube, Twitter, and RSS feeds.
- Admin management for feeds via
/admin/rss-settings. - Public display of feeds on
/rss, with a scrolling ticker for selected items.
- Helps players manage special abilities (memetics) through tiered tables.
- Admins can create and manage memetics, assign them to players, and reorder them via a drag-and-drop interface.
- Players can manage their own memetic tables, selecting from pre-built templates, with real-time updates for all participants.
- Admins, moderators, and content managers can adjust site themes based on their roles.
- Full flipbook recipe page for Once Human.
- RecipeFilters Component: Allows filtering by type, rarity, found status, and location.
- Manage content and users with role-based access.
- Authentication and role-based access via Discord.
- Copy current theme settings in JSON or CSS format via the Clipboard API.
- PlaygroundControls Refactor: Integrated
ColorPicker,FontPicker,LayoutPicker,RadiusPicker, and other theme components. - RecipeFilters Component: Added filtering for recipes based on various criteria.
- Interactive Smoke Background: Added a dynamic smoke background with interactive spotlights.
- WebGL Text Animation: Added particle-based text rendering with mouse interaction.
- RSS Feed System: Integrated feed aggregation from YouTube, Twitter, and RSS feeds with admin management, public display, and a scrolling ticker.
- Memetics Module: Added a system for managing player abilities (memetics), including tiered tables, admin-controlled templates, and real-time player selections.
- Frontend Tests: Unit tests for core components like
RecipeBasicInfo,RecipeForm,FeedBox, andRssTicker. - Backend Tests: Service tests for
RssFeedService,AdminService, andUserService. - Integration Tests: API endpoints for feeds, recipes, and admin features.
-
Mobile Responsiveness- Implement responsive design for all components.- Adjust layouts for smaller screens.- Optimize performance for mobile devices. -
Auth Page EnhancementRedesign the login/signup page for better user experience.
-
Recipe Card RedesignReduce image size while maintaining visual appeal.
-
Twitter Feed Caching
- Implement server-side caching for Twitter feeds.
- Create a fallback mechanism for slow-loading content.
-
User Profile Page
- Design and implement a user profile page.
- Add functionality for users to edit their profiles.
-
~~Memetics Feature ~~
- Design the data structure for memetics.- Implement memetics creation and sharing functionality.- Develop a system for collaborative editing of memetics. -
Admin Memetics Management Page- Create an admin interface for monitoring and managing memetics.- Implement CRUD operations for memetics.
Visit the live site here: OH
This project is mainly private, but we welcome suggestions and ideas for future development. Feel free to open issues or contact the team if you have any feedback.