919afe56f2
React Native mobile application for SAPIENS news platform. Consolidated all previous history into single commit. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
41 lines
4.0 KiB
Markdown
41 lines
4.0 KiB
Markdown
# Sapiens Mobile News Platform
|
|
|
|
## Overview
|
|
|
|
This is a mobile-first news application that provides specialized media outlets under the "Sapiens" brand. The platform features 11 distinct outlets categorized by People (Jacob Robert Steeves, Ala Shaabana, Joseph Jacks, Robert Myers), Topics (Alt coin, Stable coin, Bittensor), and Companies (xTAO, YUMA, TAOX, Oblong). Each outlet has expandable 3-bullet-point profiles (first bullet always visible, click to expand remaining 2), 20 scrollable articles per outlet, and uses real uploaded images for branding and thumbnails.
|
|
|
|
## User Preferences
|
|
|
|
Preferred communication style: Simple, everyday language.
|
|
|
|
## System Architecture
|
|
|
|
**Frontend Architecture**: React-based single-page application using Vite as the build tool and TypeScript for type safety. The application follows a mobile-first responsive design approach using Tailwind CSS for styling and shadcn/ui for component library. Navigation is handled by Wouter for client-side routing, with pages for home, outlet details, and individual articles.
|
|
|
|
**Component Structure**: Modular component architecture with reusable UI components including ArticleCard, OutletCard, MobileHeader, SearchOverlay, SwipeableCarousel, and CategoryTabs. Components are organized with clear separation between UI components, page components, and business logic.
|
|
|
|
**State Management**: Uses TanStack Query (React Query) for server state management, API calls, and caching. Local state is managed through React hooks for UI interactions like search overlay, language selection, and carousel navigation.
|
|
|
|
**Backend Architecture**: Express.js server providing RESTful API endpoints for outlets, articles, and search functionality. Uses in-memory storage implementation (MemStorage class) as the data layer with interfaces designed for easy migration to database storage later.
|
|
|
|
**Data Schema**: Drizzle ORM schema definitions for Users, MediaOutlets, and Articles with PostgreSQL as the intended database. Schema includes support for categories (people/topics/companies), focus subjects, article metadata, and user preferences.
|
|
|
|
**Mobile-Optimized Design**: Design system based on modern news apps like Apple News and Google News, featuring clean typography with Inter font, consistent spacing using Tailwind's 4-unit grid system, and mobile-specific UI patterns like swipeable carousels and sticky headers.
|
|
|
|
**Content Management**: Real data implementation provides sample articles and outlets with professional images and real profile photos. Content includes detailed profiles with expandable 3-bullet-point biographies for Jacob Robert Steeves, Ala Shaabana, Joseph Jacks, Robert Myers, and 7 other outlets covering alt coins, stable coins, Bittensor, and companies like xTAO, YUMA, TAOX, and Oblong. Each outlet has 20 identical articles for scrolling functionality. All placeholder images have been replaced with actual uploaded photos and branded thumbnails.
|
|
|
|
## External Dependencies
|
|
|
|
**UI Framework**: Radix UI primitives for accessible component foundations, shadcn/ui component library for pre-built components, Tailwind CSS for utility-first styling, and class-variance-authority for component variants.
|
|
|
|
**State & API Management**: TanStack Query for data fetching and caching, Wouter for lightweight client-side routing.
|
|
|
|
**Development Tools**: Vite for fast development and building, TypeScript for type safety, PostCSS with Autoprefixer for CSS processing.
|
|
|
|
**Backend Dependencies**: Express.js for server framework, Drizzle ORM for database schema and migrations, Neon Database (@neondatabase/serverless) for PostgreSQL hosting.
|
|
|
|
**Potential Integrations**: OpenAI API configured for AI-generated content and thumbnails, though not actively used in current implementation. Google Fonts (Inter) for typography consistency.
|
|
|
|
**Form Handling**: React Hook Form with Hookform Resolvers for form validation, Zod for schema validation integrated with Drizzle.
|
|
|
|
**Date Utilities**: date-fns for date formatting and manipulation throughout the application. |