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

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:

Clone the repository:

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

Navigate to the project directory:

cd imperfect-gamers-site

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.

Return

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

README.md

README.md

IMPERFECT GAMERS SITE

🔗 Quick Links

External

📍 Overview

📦 Features

📂 Repository Structure

Structure overview

🧩 Files

🚀 Getting Started

⚙️ Installation

🤖 Running imperfect-gamers-site

🧪 Tests

🚀 Strategy

Phase 1: Foundation and Core Setup

Phase 2: Feature Development and Integration

Phase 3: Store Page MVP

Phase 4: User Experience Enhancement

Phase 5: Optimization and Scaling

Phase 6: Store Pre-Launch and Launch

Phase 7: Post-Launch Activities

Phase 8: Automated Feedback Loop

Phase 9: Account Permissions Utility

Phase 10: Admin Dashboard

🛠 Project Roadmap

Completed Tasks

Upcoming Tasks

📄 License

👏 Acknowledgments

Files

README.md

Latest commit

History

README.md

File metadata and controls

IMPERFECT GAMERS SITE

🔗 Quick Links

External

📍 Overview

📦 Features

📂 Repository Structure

Structure overview

🧩 Files

🚀 Getting Started

⚙️ Installation

🤖 Running imperfect-gamers-site

🧪 Tests

🚀 Strategy

Phase 1: Foundation and Core Setup

Phase 2: Feature Development and Integration

Phase 3: Store Page MVP

Phase 4: User Experience Enhancement

Phase 5: Optimization and Scaling

Phase 6: Store Pre-Launch and Launch

Phase 7: Post-Launch Activities

Phase 8: Automated Feedback Loop

Phase 9: Account Permissions Utility

Phase 10: Admin Dashboard

🛠 Project Roadmap

Completed Tasks

Upcoming Tasks

📄 License

👏 Acknowledgments