Developed with the software and tools below.
steam-integration demo (oauth implicit grant flow):
pop-up flow:
redirect flow:
july update (pricing not fixed yet, help from josh and clay :) ):
Currently living monetization model (june):
Our monetization model from two years ago (on old engine with stability):
https://cdn.imperfectgamers.org/96VFCiW.png
- π Overview
- π¦ Features
- π Repository Structure
- 𧩠Files
- π Getting Started
- π Strategy
- π Project Roadmap
- π€ Contributing
- π License
- π Acknowledgments
- Remix Documentation
- Remix Website
- Remix GitHub Repository
- Remix Discussion Forum
- Remix Guide
- Digestible Remix Guides
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.
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. |
View Structure
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
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 |
Requirements
Ensure you have the following dependencies installed on your system:
- NPM:
version >=18.x
Download npm | Update npm | npm install
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
Use the following command to run imperfect-gamers-site:
npm run dev
Pending (view Project Roadmap)
Phases
- 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
- 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
- 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
- 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
- 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
- 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
- Milestone 13: Post-Launch Support and Maintenance
- Address immediate post-launch feedback and issues
- Plan and initiate the next iteration of features and improvements
- Milestone 14: Continuous Feedback Implementation
- E2E implementation of contact form for guests
- E2E implementation of support tickets for users
- E2E implementation for reviews
- Milestone 15: Role-Based Access Control
- Map logged-in user to role
- Create wrapper passed with expected permission for rendering
- Milestone 16: Admin Tools and Reviews
- E2E implementation of support tickets for users
- E2E implementation for reviews (product/site/server/general)
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
- 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
/* Β© Imperfect and Company LLC - All Rights Reserved
* Unauthorized copying of this file, via any medium is strictly prohibited
* Proprietary and Read-only, April 2024
*/
Case Study / Strategic Partnership with Tebex.
Copyright 2020 Β© Imperfect Gamers.