Arquitectura Modular con React Native

La arquitectura modular es una forma de organizar el código que divide una aplicación en módulos independientes o “features”, cada uno con su propia lógica, pantallas, estado y componentes.

Este proyecto te enseña a estructurar una app de React Native, de manera escalable, mantenible y profesional. El objetivo no es empezar desde cero, sino aprender a ordenar correctamente una app real mientras implementas dos features clave:

• Películas por categoría
• Favoritos

📝 Instrucciones

1. Explora la arquitectura y revisa los archivos existentes: src/features/movies/, src/features/categories/, src/shared/lib/movies.ts, src/navigation/StackNavigator.tsx, src/navigation/feature-registry.ts.

   Hazte estas preguntas:

   • ¿Qué va en features y qué va en shared?
   • ¿Qué pantallas están listas y cuáles no?
   • ¿Dónde se registran las rutas de cada feature?

2. Crea la pantalla de películas por categoría src/features/categories/screens/CategoryMoviesScreen.tsx. La idea es que cuando el usuario toque una categoría en CategoriesScreen, debe navegar a CategoryMoviesScreen y ver solo las películas de esa categoría.

3. Gestionar favoritos con Zustand src/features/movies/store/movies.store.ts. Debes permitir que el usuario marque o desmarque películas como favoritas. Fijate en el archivo store que ya tienes un codigo pre-hecho.

   • La idea es que lo conectes en MovieDetailScreen. Obteniendo el id:

     1const { id } = route.params;

   • El estado del store:

     1const { toggleFavorite, isFavorite } = useMoviesStore();

   • Y creando un botón para favoritos:

     1<Button
     2title={isFavorite(id) ? 'Remove from favorites' : 'Add to favorites'}
     3onPress={() => toggleFavorite(id)}
     4/>

4. Gestiona el store de categorías src/features/categories/store/categories.store.ts. La idea es que implementes un estado simple:

   1activeCategory: string | null;
   2setActiveCategory: (category: string) => void;

   Puedes usarlo para resaltar visualmente la categoría activa.

💡 Pistas

• La navegación desde CategoriesScreen ya te manda el parámetro:

  1navigation.navigate('CategoryMovies', { category: 'Sci-Fi' });

• En CategoryMoviesScreen, obtén la categoría:

  1const { category } = route.params;

• Usa el helper de @shared/lib/movies:

  1const filtered = getMoviesByCategory(category);

• Renderiza un listado con FlatList reutilizando MovieCard de forma que al tocar una película, debe navegar al detalle.

✅ Checklist

• Navego desde Categories → CategoryMovies.
• Veo solo las películas de esa categoría.
• Puedo abrir el detalle desde CategoryMovies.
• Favoritos funcionando con Zustand.
• isFavorite y toggleFavorite integrados.
• No hay imports cruzados entre features.
• Toda lógica compartida está en @shared/*.