Feature: Trend Explorer

The Trend Explorer is a feature designed to provide users with insights into current and upcoming fashion trends. It presents a curated view of popular styles, colors, patterns, and materials, allowing users to stay informed about the fashion landscape. The screen is composed of several dynamic sections, including ranked trends, seasonal filters, trend insights, and a fashion forecast.

Currently, the Trend Explorer is implemented as a standalone screen with static, hardcoded data, serving as a UI prototype. It is accessible from the HomeScreen via a "Trends" quick action button and a "See All" link in the "Trending Now" section. Future development will involve integrating this screen with backend services to display live data.

Sources: src/screens/TrendExplorerScreen.js, src/features/home/screens/HomeScreen.js:453-456, 552-555, src/config/constants.js:100-104

Navigation and Access

The TrendExplorerScreen is registered within the root StackNavigator of the application. It is not part of the main bottom tab navigation but is intended to be accessed from other screens.

Sources: App.js:31, 319-323

Users can navigate to the Trend Explorer screen from two primary locations on the HomeScreen:

1. Quick Action Button: A "Trends" button in the "Quick Actions" horizontal scroll view.
2. "Trending Now" Section: A "See All" text button next to the "Trending Now" section title.

Sources: src/features/home/screens/HomeScreen.js:453-456, 552-555

The following diagram illustrates the user flow to access the Trend Explorer.

This diagram shows the two entry points from the Home Screen that lead to the Trend Explorer screen.

Screen Architecture and Components

The TrendExplorerScreen is built as a ScrollView containing multiple distinct components. The screen's state is managed locally using React's useState hook for filters like selectedCategory, selectedSeason, and selectedRegion.

Sources: src/screens/TrendExplorerScreen.js:179-182

The component hierarchy is structured as follows:

This diagram shows the layout of the TrendExplorerScreen, composed of a main scrollable view containing various informational sections.

Key Components

Data Model and State

The Trend Explorer currently operates with mock data defined directly within TrendExplorerScreen.js. This includes lists for trends, categories, seasons, insights, and color palettes.

State Management

The screen's interactive state is managed by three useState variables:

• selectedCategory: Tracks the active category tab (e.g., 'all', 'colors').
• selectedSeason: Tracks the selected season (e.g., 'spring2024').
• selectedRegion: Tracks the selected region, defaulting to 'global'.

Sources: src/screens/TrendExplorerScreen.js:179-182

Trend Data Structure

The primary data structure is an array of trend objects. Each object contains detailed information about a specific trend.

Sources: src/screens/TrendExplorerScreen.js:203-247

The following ER diagram visualizes the Trend entity.

UI and Animations

The screen utilizes several animation and styling techniques to create a visually engaging experience.

Parallax Scroll Effect

The TrendCard component implements a parallax effect. As the user scrolls, the card's scale and opacity are interpolated based on the main ScrollView's scrollY position. This makes the cards appear to move at a different speed than the scroll, creating a sense of depth.

// src/screens/TrendExplorerScreen.js:24-34
const scale = scrollY.interpolate({
  inputRange,
  outputRange: [0.9, 1, 0.9],
  extrapolate: 'clamp',
});

const opacity = scrollY.interpolate({
  inputRange,
  outputRange: [0.5, 1, 0.5],
  extrapolate: 'clamp',
});

Sources: src/screens/TrendExplorerScreen.js:24-34

Entry Animation

The TrendInsight cards use an Animated.spring animation on mount, causing them to scale into view with a subtle bounce effect.

// src/screens/TrendExplorerScreen.js:114-120
useEffect(() => {
  Animated.spring(scaleAnim, {
    toValue: 1,
    friction: 4,
    tension: 40,
    useNativeDriver: true,
  }).start();
}, []);

Sources: src/screens/TrendExplorerScreen.js:114-120

Future Backend Integration

The Trend Explorer is designed to eventually fetch data from a backend API. The src/config/constants.js file defines placeholder endpoints for this purpose.

// src/config/constants.js:100-104
export const API_ENDPOINTS = {
  // ...
  TRENDS: {
    LIST: '/trends',
    FORECAST: '/trends/forecast',
  },
  // ...
};

The TRENDS.LIST endpoint will be used to fetch the list of trends, replacing the hardcoded trends array. The TRENDS.FORECAST endpoint will supply data for the "Fashion Forecast" section.

Sources: src/config/constants.js:100-104

The following sequence diagram illustrates the intended future data flow.

This diagram shows the future interaction where the screen fetches live trend data from the backend upon loading.