Stacked Deck Client is the modern, reactive frontend interface for the Stacked Deck marketplace. Built with Angular, this Single Page Application (SPA) delivers a seamless user experience for buying and collecting Pokémon TCG cards, featuring an immersive "Dark Mode" aesthetic.
It interacts with the Java Spring Boot API to manage the catalog, user authentication, and order processing.
Welcome to The Underground Marketplace. Here is a tour of the application.
The landing page immerses the user in the brand's universe, highlighting flagship products ("Vault Selection") with intuitive navigation.
Home screen featuring the Hero Banner and the "Underground Marketplace" identity.
The "Vault Selection": an interactive carousel of the most exclusive cards.
Users can quickly navigate between different product types (Single Cards, Booster Packs, ETBs, Bundles).
The catalog features powerful filtering tools (Price range, Product type, Sorting) to help collectors find specific items.
Each card has a detailed view allowing users to select the specific condition (Near Mint, Played, etc.) before adding it to the cart.
Complete cart management system with quantity adjustments, promo code application, and order summary before checkout.
Access to account features and payment requires secure authentication.
Login page: "Welcome to the Vault".
The application integrates a full, secure payment tunnel via Stripe.
| Checkout | Stripe Payment |
|---|---|
 |
 |
| Address validation and shipping | Secure credit card entry form |
- Responsive Design & Dark Mode: A polished UI tailored for collectors.
- Dynamic Filtering: Instant sorting and search capabilities within the catalog.
- State Management: Powered by RxJS for real-time synchronization of cart and authentication states.
- Stripe Integration: Secure payment processing with client-side intent handling.
- User Dashboard: Order history and profile management.
- Framework: Angular (Latest Stable)
- Language: TypeScript
- Styling: SCSS (Sass) / HTML5
- Http Client: RxJS (Observables)
- Payment: Stripe.js / Ngx-Stripe
This project requires Node.js and Angular CLI.
-
Clone the repository:
git clone [https://github.com/0xAdafang/Stacked_Deck_Client.git](https://github.com/0xAdafang/Stacked_Deck_Client.git) cd Stacked_Deck_Client -
Install dependencies:
npm install
-
Start the development server:
ng serve
The application will be available at
http://localhost:4200/.
Environment variables (API URL, Stripe Public Key) are managed in the src/environments/ folder.
environment.ts(Development)environment.prod.ts(Production)
Example:
export const environment = {
production: false,
apiUrl: 'http://localhost:8080/api',
stripePublicKey: 'pk_test_...'
};
<hr>
<p><em>Made by <a href="https://github.com/0xAdafang">0xAdafang</a></em></p>