Frontend Architecture¶
The Socon-MKT user interface is built as a highly responsive, single-page web application (SPA). Currently operating exclusively as a web platform, the frontend is engineered to handle both heavy e-commerce interactions (like the negotiation tracker) and dynamic social media feeds without sacrificing performance.
Core Technology Stack¶
We chose a modern, type-safe React stack to ensure the codebase remains scalable and maintainable as the community and marketplace features grow.
| Technology | Role in Socon-MKT | Why We Use It |
|---|---|---|
| React (v18+) | UI Framework | Provides a component-based architecture perfect for building reusable UI elements like product cards, chat bubbles, and feed posts. |
| TypeScript | Language & Tooling | Adds static typing to JavaScript, catching errors at compile-time and strictly defining our API response payloads (e.g., Product, User, Message interfaces). |
| Tailwind CSS | Primary Styling | Utility-first CSS framework used for rapid, responsive UI development without leaving the JSX files. |
| Zustand | Global Client State | A small, fast, and scalable bearbones state-management solution used for UI state (e.g., toggling dark mode, opening modals, managing active chat windows) without the boilerplate of Redux. |
| React Query | Data Fetching & Server State | Handles fetching, caching, synchronizing, and updating server state. It eliminates the need to store API responses in global state and handles loading/error states automatically. |
| Standard CSS | Custom Styling | Used sparingly for complex keyframe animations, global CSS variables, or styling exceptions that Tailwind's utility classes cannot easily handle. |
Future Mobile Expansion
While Socon-MKT is currently a web-only platform, all API calls and global state mechanisms have been abstracted. This ensures that when the platform eventually expands to mobile (e.g., via React Native), the core business logic (Zustand stores and React Query hooks) can be easily reused.
Component Architecture Flow¶
The frontend follows a modern separation of concerns, clearly dividing Client State (UI toggles, themes) managed by Zustand, and Server State (database records, API responses) managed by React Query.
Below is a high-level view of how a user interaction (like sending a chat in the negotiation tracker) moves through the frontend system.