Modular Architecture with React Native

Modular architecture is a way of organizing code that divides an application into independent modules or “features”, each with its own logic, screens, state, and components.

This project teaches you how to structure a React Native app in a scalable, maintainable, and professional way. The goal is not to start from scratch, but to learn how to properly organize a real app while implementing two key features:

• Movies by category
• Favorites

📝 Instructions

1. Explore the architecture and review the existing files: src/features/movies/, src/features/categories/, src/shared/lib/movies.ts, src/navigation/StackNavigator.tsx, src/navigation/feature-registry.ts.

   Ask yourself these questions:

   • What belongs in features and what belongs in shared?
   • Which screens are ready and which are not?
   • Where are the routes for each feature registered?

2. Create the movies by category screen at src/features/categories/screens/CategoryMoviesScreen.tsx. The idea is that when the user taps a category in CategoriesScreen, they should navigate to CategoryMoviesScreen and see only the movies from that category.

3. Manage favorites with Zustand in src/features/movies/store/movies.store.ts. You should allow the user to mark or unmark movies as favorites. Check the store file, which already has some pre-written code.

   • The idea is to connect it in MovieDetailScreen. Getting the id:

     1const { id } = route.params;

   • The store state:

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

   • And creating a favorites button:

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

4. Manage the categories store in src/features/categories/store/categories.store.ts. The idea is to implement a simple state:

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

   You can use it to visually highlight the active category.

💡 Tips

• Navigation from CategoriesScreen already sends you the parameter:

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

• In CategoryMoviesScreen, get the category:

  1const { category } = route.params;

• Use the helper from @shared/lib/movies:

  1const filtered = getMoviesByCategory(category);

• Render a list using FlatList, reusing MovieCard so that when a movie is tapped, it should navigate to the detail screen.

✅ Checklist

• I can navigate from Categories → CategoryMovies.
• I see only the movies from that category.
• I can open the detail from CategoryMovies.
• Favorites working with Zustand.
• isFavorite and toggleFavorite integrated.
• No cross-imports between features.
• All shared logic is in @shared/*.