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.

The goal of this project is for you to learn how to structure a React Native CLI app with TypeScript following this approach, making it more scalable, maintainable, and easier to understand.

1cd react-native-movie-catalogue
2npm install  

1cd ios && pod install && cd ..

1npm run android
2npm run ios  

📝 Instructions

The goal is to modularize the movie catalog app, migrating the Movies and Categories sections.

1. Create the features and shared structure:

   1src/
   2  features/
   3     movies/{screens,components,store}
   4     categories/{screens,store}
   5  shared/{ui,lib,types}
   6  navigation/{StackNavigator.tsx, feature-registry.ts}

2. Move the screens to their corresponding feature:
   • HomeScreen → features/movies/screens/MoviesListScreen.tsx
   • MovieDetailScreen → features/movies/screens/MovieDetailScreen.tsx
   • CategoriesScreen → features/categories/screens/CategoriesScreen.tsx
   • CategoryMoviesScreen → features/categories/screens/CategoryMoviesScreen.tsx
3. Place generic data and UI in @shared:
   • shared/lib/movies.ts with an array movies and helper getMoviesByCategory.
   • shared/ui/Grid.tsx for spacing content.
   • shared/types/index.ts with the Movie type.
4. Create a store per feature (Zustand):
   • features/movies/store/movies.store.ts with favorites, toggle, isFav.
   • features/categories/store/categories.store.ts with active, setActive.
5. Create an index.ts file in each feature as an entry point (features/<x>/index.ts) and define routes: moviesRoutes and categoriesRoutes.

This file will act as the module's entry point, re-exporting screens, stores, or components that should be accessible from outside and grouping the feature's routes. Everything else inside the folder is considered internal to the module.

1. Register the routes in navigation/feature-registry.ts and mount them in StackNavigator.tsx.
2. Set up import aliases in tsconfig.json and babel.config.js for @/*, @features/*, @shared/*.
3. Avoid cross-feature imports: you can only import from @shared/*.

Strategy

1. Structure first, logic later: create features/ and shared/.
2. Move screens and data to the correct place.
3. Connect navigation from the feature routes.
4. Add minimal stores per feature.
5. Test the complete flow: list → detail, categories → filtered list.