Skip to content

Latest commit

 

History

History
85 lines (65 loc) · 2.7 KB

File metadata and controls

85 lines (65 loc) · 2.7 KB

Sentient Matters

A tiktok-like news application focused on AI and technology developments, featuring a beautiful dark-themed UI designed for optimal readability and user experience.

UI Features

Screenshots

IMG_0215-2

IMG_0216-2

IMG_0217-2

Home Screen (News Display)

  • Immersive Full-Screen Cards: Each news article is presented as a full-screen card with a beautiful background image
  • Gradient Overlay: Sophisticated gradient overlays ensure text readability while preserving image aesthetics
  • Smart Text Layout:
    • Large, bold headlines
    • Concise article previews with 4-line limit
    • Category tags with subtle background
    • Clear "Read More" calls-to-action

Navigation & Header

  • Minimal Header: Clean, unobtrusive header with:
    • Burger menu for category access
    • Centered logo
    • Settings icon for app preferences
  • Safe Area Aware: Properly positioned for all device notches and system bars

Categories Screen

  • Grid Layout: Visual grid of category cards including:
    • Regulation
    • Tools
    • Breakthrough
    • Funding
    • Startup Spotlight
    • Legal
    • Quantum
  • Category Cards: Each featuring:
    • Thematic background image
    • Category title with gradient overlay
    • Touch feedback for interaction

Settings Screen

  • Dark Mode Optimized: Designed with a dark theme for comfortable reading
  • Preferences Section:
    • Theme toggle (Dark/Light mode)
  • Legal Section:
    • Privacy Policy
    • Terms & Conditions

UI Design Principles

  • Consistent Dark Theme: Deep blacks and careful use of white text for optimal contrast
  • Typography Hierarchy:
    • Headlines: 28px bold
    • Body text: 16px with optimal line height
    • Meta information: 14px with reduced opacity
  • Gesture-Based Navigation: Smooth swipe interactions for browsing articles
  • Responsive Layout: Adapts to different screen sizes while maintaining visual integrity

Technical Features

  • Built with React Native and Expo
  • Implements react-native-gesture-handler for smooth interactions
  • Uses expo-linear-gradient for sophisticated visual effects
  • Safe area handling for modern iOS and Android devices
  • Optimized image loading and caching

Getting Started

  1. Install dependencies:

    npm install
  2. Start the development server:

    npx expo start
  3. Use Expo Go app to scan the QR code and run on your device