IMPERFECT GAMERS SITE

https://imperfectgamers.org/

Developed with the software and tools below.

---

steam-integration demo (oauth implicit grant flow):

pop-up flow:

https://imperfectandcompany.sharepoint.com/:v:/s/ImperfectandCompany2/EZZLemtOjPhEqc62-dKh2qsBffsSDVRdt_qqg5w9OwOK-g

redirect flow:

https://imperfectandcompany.sharepoint.com/:v:/s/ImperfectandCompany2/ETVRdeR7YJlNpNgVznK0YLYBtR6wOd-Lu7sVEDRud5AYvA

Currently living monetization model:

Our monetization model from two years ago (on old engine with stability):

https://cdn.imperfectgamers.org/96VFCiW.png

🔗 Quick Links

• 📍 Overview
• 📦 Features
• 📂 Repository Structure
• 🧩 Files
• 🚀 Getting Started
  • ⚙️ Installation
  • 🤖 Running Imperfect Gamers Site
  • 🧪 Tests
• 🚀 Strategy
• 🛠 Project Roadmap
• 🤝 Contributing
• 📄 License
• 👏 Acknowledgments

External

• Remix Documentation
• Remix Website
• Remix GitHub Repository
• Remix Discussion Forum
• Remix Guide
• Digestible Remix Guides

---

📍 Overview

The Imperfect Gamers site project serves as a web front for our platform, emphasizing personalized experiences through Steam integration too aggregate data to your account for looking up stats, purchases, social and more. It provides our users with a member-centric portal where users can manage their data on our services and interact seamlessly within the community. We have a focus on Tailwind-based UI with atomic design principles, to ensure a robust, scalable, and user-friendly interface for our audience. Automated deployment and code quality processes are embedded through CI/CD pipelines, ensuring a reliable and scalable infrastructure, enriching the users and developers journey within our Imperfect Gamers ecosystem as we develop and introduce new features.

---

📦 Features

	Feature	Description
⚙️	Architecture	Currently involves session management through Remix and Steam integration for user authentication while using Tebex for Product management. Uses automated deployment.
🔩	Code Quality	Code quality ensured by ESLint, Prettier, TypeScript. The codebase includes config files for consistent coding style.
📄	Documentation	This is a living document and expected to remain under development until we reaach key milestones in our roadmap.
🔌	Integrations	Integrates with Steam for authentication. Uses Docker for containerization, and GitHub Actions for CI/CD workflows.
🧩	Modularity	Leveraging Atomic Design Methodology alongside component varients for reusability and building a uniform design.
🧪	Testing	We have strict typescript and Eslint as a mandatory requirement before merging into dev. We will introduce jest and enzyme once we put our shop into production.
⚡️	Performance	With remix's recent support for Vite, we chose it as our build tool for fast build times, performance metrics will be benchmarked after we introduce testing.
🛡️	Security	Steam integration using OAuth; bcryptjs received on API through rest for hashing passwords.
📦	Dependencies	Key libs: React, TailwindCSS, TypeScript, TailwindCSS, Remix, Remix Utilities: ESLint, Prettier, Vite, PostCSS.
🚀	Scalability	Uses Remix from Shopify, which is scalable and in competition with Next.JS (although React is backing Next.JS), but follows latest trending support for Server-Side-Rendering Full-Stack Development.

---

📂 Repository Structure

View Structure

Structure overview

• entry.client.tsx & entry.server.tsx: Entry points for client and server, respectively, showcasing our SSR strategy.
• root.tsx: The root component that wraps the entire application, setting the stage for a cohesive user experience.
• store.css & tailwind.css: Core styling files, driving the visual consistency and responsiveness of the module.
• components/atoms: Basic UI elements like buttons and inputs, forming the building blocks of our interface.
• components/molecules: Combinations of atoms into functional units such as forms and cards, enhancing the modularity of our design.
• components/organisms: Complex UI segments like membership tiers and FAQ sections, demonstrating advanced composition and functionality.
• components/templates/store: High-level layouts specific to the store module, orchestrating the overall user interface.

└── imperfect-gamers-site/
    ├── .github
    │   ├── CODEOWNERS
    │   └── workflows
    │       ├── build_and_deploy.yml
    │       └── eslint_prettier_pr_check.yml
    ├── Dockerfile
    ├── README.md
    ├── app
    │   ├── auth
    │   │   ├── authenticator.server.ts
    │   │   ├── session.ts
    │   │   ├── steam.server.ts
    │   │   ├── storage.server.ts
    │   │   └── user.server.ts
    │   ├── components
    │   │   ├── atoms
    │   │   │   ├── Button
    │   │   │   │   ├── Button.tsx
    │   │   │   │   └── ButtonProps.tsx
    │   │   │   ├── Heading
    │   │   │   │   └── Heading.tsx
    │   │   │   ├── IconElement.tsx
    │   │   │   ├── Image.tsx
    │   │   │   ├── Input
    │   │   │   │   └── Input.tsx
    │   │   │   ├── Link
    │   │   │   │   └── Link.tsx
    │   │   │   ├── Modal
    │   │   │   │   └── Modal.tsx
    │   │   │   ├── Paragraph
    │   │   │   │   └── Paragraph.tsx
    │   │   │   ├── PriceLabel
    │   │   │   │   ├── PriceLabel.module.css
    │   │   │   │   └── PriceLabel.tsx
    │   │   │   ├── Text.tsx
    │   │   │   ├── TextElement.tsx
    │   │   │   └── ToggleSwitch
    │   │   │       ├── ToggleSwitch.module.css
    │   │   │       └── ToggleSwitch.tsx
    │   │   ├── molecules
    │   │   │   ├── AuthorizeForm.tsx
    │   │   │   ├── EventItem.tsx
    │   │   │   ├── FAQItem.tsx
    │   │   │   ├── FeaturedItem.tsx
    │   │   │   ├── FooterLink.tsx
    │   │   │   ├── IconText.tsx
    │   │   │   ├── LoginForm.tsx
    │   │   │   ├── ModalContent
    │   │   │   │   └── ModalContent.tsx
    │   │   │   ├── PriceToggle
    │   │   │   │   ├── PriceToggle.module.css
    │   │   │   │   └── PriceToggle.tsx
    │   │   │   ├── SignUpForm.tsx
    │   │   │   ├── StatisticItem.tsx
    │   │   │   ├── TitleDescription.tsx
    │   │   │   └── UsernameForm.tsx
    │   │   ├── organism
    │   │   │   ├── AuthForms
    │   │   │   │   └── AuthForms.tsx
    │   │   │   ├── ContactForm.tsx
    │   │   │   ├── FAQSection.tsx
    │   │   │   ├── FeaturedPartnership.tsx
    │   │   │   ├── FeaturedSection.tsx
    │   │   │   ├── MembershipCard
    │   │   │   │   ├── MembershipCard.module.css
    │   │   │   │   └── MembershipCard.tsx
    │   │   │   ├── MembershipTier.tsx
    │   │   │   ├── ModalWrapper
    │   │   │   │   ├── ModalWrapper.module.css
    │   │   │   │   └── ModalWrapper.tsx
    │   │   │   ├── StatisticsGroup.tsx
    │   │   │   ├── Testimonial.tsx
    │   │   │   └── UnauthenticatedView.tsx
    │   │   └── templates
    │   │       └── store
    │   │           ├── StoreContact.tsx
    │   │           ├── StoreEvents.tsx
    │   │           ├── StoreFAQ.tsx
    │   │           ├── StoreFeatured.tsx
    │   │           ├── StoreFooter.tsx
    │   │           ├── StoreHeader.tsx
    │   │           ├── StorePartnership.tsx
    │   │           ├── StoreStatistics.tsx
    │   │           ├── StoreTestimonials.tsx
    │   │           ├── StoreTiers.tsx
    │   │           └── index.tsx
    │   ├── entry.client.tsx
    │   ├── entry.server.tsx
    │   ├── root.tsx
    │   ├── routes
    │   │   ├── _index.tsx
    │   │   ├── auth.check.username.tsx
    │   │   ├── auth.finalize.username.tsx
    │   │   ├── authorize.check.steam.tsx
    │   │   ├── authorize.steam.callback.tsx
    │   │   ├── authorize.steam.tsx
    │   │   ├── login.tsx
    │   │   ├── logout.tsx
    │   │   ├── register.tsx
    │   │   ├── store.add.tsx
    │   │   ├── store.create.tsx
    │   │   └── store.tsx
    │   ├── styles
    │   │   ├── MembershipCard.css
    │   │   └── store.css
    │   ├── tailwind.css
    │   └── utils
    │       ├── general.ts
    │       ├── steamAuth.ts
    │       ├── tebex.d.ts
    │       ├── tebex.interface.ts
    │       ├── tebex.server.ts
    │       ├── tebexjs.ts
    │       └── useTebexCheckout.ts
    ├── package-lock.json
    ├── package.json
    ├── postcss.config.js
    ├── public
    │   ├── 1.0.0.js
    │   └── favicon.ico
    ├── tailwind.config.ts
    ├── tsconfig.eslint.json
    ├── tsconfig.json
    └── vite.config.ts

---

🧩 Files

Open Directory

This section is currently in process

.

File	Summary
tailwind.config.ts	TODO: Document summary for this file
Dockerfile	TODO: Document summary for this file
tsconfig.json	TODO: Document summary for this file
postcss.config.js	TODO: Document summary for this file
vite.config.ts	TTODO: Document summary for this file
package.json	TODO: Document summary for this file
tsconfig.eslint.json	TTODO: Document summary for this file
package-lock.json	TODO: Document summary for this file

public

File	Summary
1.0.0.js	TODO: Document summary for this file

.github

File	Summary
CODEOWNERS	TODO: Document summary for this file

.github.workflows

File	Summary
eslint_prettier_pr_check.yml	TODO: Document summary for this file
build_and_deploy.yml	TODO: Document summary for this file

app

File	Summary
entry.server.tsx	TODO: Document summary for this file
entry.client.tsx	TODO: Document summary for this file
root.tsx	TODO: Document summary for this file
tailwind.css	TODO: Document summary for this file

app.styles

File	Summary
store.css	TODO: Document summary for this file
MembershipCard.css	TODO: Document summary for this file

app.utils

File	Summary
tebexjs.ts	TODO: Document summary for this file
tebex.d.ts	TTODO: Document summary for this file
steamAuth.ts	TODO: Document summary for this file
general.ts	TODO: Document summary for this file
tebex.interface.ts	TODO: Document summary for this file
tebex.server.ts	TODO: Document summary for this file
useTebexCheckout.ts	TODO: Document summary for this file

app.routes

File	Summary
store.tsx	TODO: Document summary for this file
authorize.check.steam.tsx	TTODO: Document summary for this file
register.tsx	TODO: Document summary for this file
logout.tsx	TODO: Document summary for this file
auth.check.username.tsx	TODO: Document summary for this file
store.add.tsx	TODO: Document summary for this file
auth.finalize.username.tsx	TODO: Document summary for this file
login.tsx	TODO: Document summary for this file
authorize.steam.tsx	TODO: Document summary for this file
authorize.steam.callback.tsx	TODO: Document summary for this file
store.create.tsx	TODO: Document summary for this file
_index.tsx	TODO: Document summary for this file

app.components.templates.store

File	Summary
StoreFooter.tsx	TODO: Document summary for this file
StoreFAQ.tsx	TODO: Document summary for this file
StoreContact.tsx	TODO: Document summary for this file
index.tsx	TODO: Document summary for this file.
StoreHeader.tsx	TODO: Document summary for this file
StoreStatistics.tsx	TODO: Document summary for this file
StoreEvents.tsx	TODO: Document summary for this file
StoreTiers.tsx	TODO: Document summary for this file
StoreFeatured.tsx	TODO: Document summary for this file
StoreTestimonials.tsx	TODO: Document summary for this file
StorePartnership.tsx	TODO: Document summary for this file

app.components.atoms

File	Summary
TextElement.tsx	TODO: Document summary for this file
IconElement.tsx	TODO: Document summary for this file
Text.tsx	TODO: Document summary for this file
Image.tsx	TODO: Document summary for this file

app.components.atoms.Button

File	Summary
Button.tsx	TODO: Document summary for this file
ButtonProps.tsx	TODO: Document summary for this file

app.components.atoms.PriceLabel

File	Summary
PriceLabel.tsx	TODO: Document summary for this file
PriceLabel.module.css	TODO: Document summary for this file

app.components.atoms.ToggleSwitch

File	Summary
ToggleSwitch.tsx	TODO: Document summary for this file
ToggleSwitch.module.css	TODO: Document summary for this file

app.components.atoms.Paragraph

File	Summary
Paragraph.tsx	TODO: Document summary for this file

app.components.atoms.Modal

File	Summary
Modal.tsx	TODO: Document summary for this file

app.components.atoms.Link

File	Summary
Link.tsx	TODO: Document summary for this file

app.components.atoms.Heading

File	Summary
Heading.tsx	TTODO: Document summary for this file

app.components.atoms.Input

File	Summary
Input.tsx	TODO: Document summary for this file

app.components.organism

File	Summary
FeaturedPartnership.tsx	TODO: Document summary for this file
Testimonial.tsx	TODO: Document summary for this file
MembershipTier.tsx	TODO: Document summary for this file
ContactForm.tsx	TODO: Document summary for this file
FAQSection.tsx	TODO: Document summary for this file
UnauthenticatedView.tsx	TODO: Document summary for this file
FeaturedSection.tsx	TODO: Document summary for this file
StatisticsGroup.tsx	TODO: Document summary for this file

app.components.organism.ModalWrapper

File	Summary
ModalWrapper.module.css	TODO: Document summary for this file
ModalWrapper.tsx	TODO: Document summary for this file

app.components.organism.MembershipCard

File	Summary
MembershipCard.tsx	TODO: Document summary for this file
MembershipCard.module.css	TODO: Document summary for this file

app.components.organism.AuthForms

File	Summary
AuthForms.tsx	TODO: Document summary for this file

app.components.molecules

File	Summary
UsernameForm.tsx	TODO: Document summary for this file
EventItem.tsx	TODO: Document summary for this file
FAQItem.tsx	TODO: Document summary for this file
LoginForm.tsx	TODO: Document summary for this file
FeaturedItem.tsx	TODO: Document summary for this file
SignUpForm.tsx	TODO: Document summary for this file
TitleDescription.tsx	TODO: Document summary for this file
FooterLink.tsx	TODO: Document summary for this file
StatisticItem.tsx	TODO: Document summary for this file
IconText.tsx	TODO: Document summary for this file
AuthorizeForm.tsx	TODO: Document summary for this file

app.components.molecules.ModalContent

File	Summary
ModalContent.tsx	TODO: Document summary for this file

app.components.molecules.PriceToggle

File	Summary
PriceToggle.tsx	TODO: Document summary for this file
PriceToggle.module.css	TODO: Document summary for this file

app.auth

File	Summary
user.server.ts	TODO: Document summary for this file
session.ts	TODO: Document summary for this file
storage.server.ts	TODO: Document summary for this file
steam.server.ts	TODO: Document summary for this file
authenticator.server.ts	TODO: Document summary for this file

---

🚀 Getting Started

Requirements

Ensure you have the following dependencies installed on your system:

• NPM: version >=18.x Download npm | Update npm | npm install

⚙️ Installation

To get a local copy up and running, follow these simple steps:

1. Clone the repository:

git clone https://github.com/imperfectandcompany/imperfect-gamers-site.git

3. Navigate to the project directory:

cd imperfect-gamers-site

3. Install dependencies:

npm install

🤖 Running imperfect-gamers-site

Use the following command to run imperfect-gamers-site:

npm run dev

🧪 Tests

Pending (view Project Roadmap)

---

🚀 Strategy

Phases

Phase 1: Foundation and Core Setup

• Milestone 1: Project Initialization
  • Repository setup and initial commit
  • Base tooling and framework selection
• Milestone 2: Environment Setup
  • Integration of Tailwind CSS
  • Setup of build and deployment pipelines
• Milestone 3: Developer Tooling
  • Integrate Jest and Enzyme for testing

Phase 2: Feature Development and Integration

• Milestone 4: Authentication System
  • Implement basic AuthForms and session management
  • E2E login, registration, and logout implementation
  • Secure Steam integration
• Milestone 5: Validation
  • Validate Onboarding
  • Validate Account Steam integration

Phase 3: Store Page MVP

• Milestone 6: Store Module Functionality
  • Ensure user meets all requirements before triggering store
  • Allow user to complete onboarding and steam integration within flow
  • Create webhook and perform delivery for payment event

Phase 4: User Experience Enhancement

• Milestone 7: User Interface Polish
  • Complete Atomic Design conversion for components
  • Enhance signup and login flow with UX improvements
• Milestone 8: Advanced Features Integration
  • Integrate Headless Tebex API features for behind-the-scenes product management
  • Integrate TebexJS 1.0.0 Checkout Modal for a seamless checkout experience

Phase 5: Optimization and Scaling

• Milestone 9: Performance Tuning
  • Optimize application loading times
  • Implement comprehensive caching strategies
• Milestone 10: Preparation for Scale
  • Maximize test coverage to ensure stability
  • Perform benchmark tests for future comparison
  • Review infrastructure scalability for anticipated growth

Phase 6: Store Pre-Launch and Launch

• Milestone 11: Pre-Launch Checks
  • Conduct final security audits
  • Perform user acceptance testing (UAT)
• Milestone 12: Launch
  • Go-live with the store page
  • Document real-time user feedback on Discord and from staff
  • Monitor system performance

Phase 7: Post-Launch Activities

• Milestone 13: Post-Launch Support and Maintenance
  • Address immediate post-launch feedback and issues
  • Plan and initiate the next iteration of features and improvements

Phase 8: Automated Feedback Loop

• Milestone 14: Continuous Feedback Implementation
  • E2E implementation of contact form for guests
  • E2E implementation of support tickets for users
  • E2E implementation for reviews

Phase 9: Account Permissions Utility

• Milestone 15: Role-Based Access Control
  • Map logged-in user to role
  • Create wrapper passed with expected permission for rendering

Phase 10: Admin Dashboard

• Milestone 16: Admin Tools and Reviews
  • E2E implementation of support tickets for users
  • E2E implementation for reviews (product/site/server/general)

🛠 Project Roadmap

Tasks

Completed Tasks

• Integrate Tailwind CSS for styling
• Create Store page layout
• Design and split the page into sections using the Atomic Design methodology
• Convert all components to use Atomic Design, with detailed examples in the Button folder under molecules
• Introduce default prop fallbacks, design tokens, and variants
• Setup modal for Premium Membership CTA
• Implement AuthForms with conditional rendering
  • SignUp/SignIn/LoggedInView
  • OnboardingRequiredView/SteamIntegrationRequiredView/LoggedInAndValidatedView
• Integrate remix-validated-form with Zod for form validation
• Design and set up the sign-up process
• Set up Remix session storage for state management
• Implement end-to-end login and onboarding validation
• Add live check for username availability during onboarding
• Integrate Steam validation and flow within the product flow
• Add Tebex product management API calls
• Integrate ESLint and Prettier to enforce coding style
• Setup remix-utilities for header IP fetching
• Call Tebex API with user IP and UID to create and manage user basket
  • Automatically add Premium Membership to user basket
• Implement remix-dev for easier testing
• Setup logout with user data cleanup
• Setup validation/error handling for Tebex API
• Add cookie session management for Tebex checkout API data
• Document files across the project
• Set up dev branch, rename master to production
• Integrate TebexJS 1.0.0 for e-commerce checkout popup
• Secure Steam integration
• Finalize logout functionality with token invalidation
• Finish registration process
• Enforce cookie typing for checkout process
• Setup protected dev branch for PR merges
• Setup GitHub Action for ESLint compliance checks
• Setup GitHub Action to build Docker image (remix vite:build)
• Setup webhook action for server updates

Upcoming Tasks

• Refactor other existing pages on ImperfectGamers.org
• Further enhance the integration of design tokens across components
• Expand the Tebex integration to support additional product types
• Optimize performance and loading times across all modules
• Extend authentication flows to include more third-party integrations
• Develop more comprehensive user analytics features
• Add jest / enzyme unit and integration test coverage across components

---

📄 License

/* © Imperfect and Company LLC - All Rights Reserved
 * Unauthorized copying of this file, via any medium is strictly prohibited
 * Proprietary and Read-only, April 2024
 */

---

👏 Acknowledgments

Case Study / Strategic Partnership with Tebex.

Copyright 2020 © Imperfect Gamers.

Return

---