About

Movie Hub is a react native (0.73) app which can be used for browsing and searching for movies found in the TMdb database.

Setup

Note: Make sure you have completed the React Native - Environment Setup instructions till "Creating a new application" step, before proceeding.

Step 1: Install dependencies

Use npm install or yarn install to install all dependencies before running

Step 2: Start the Metro Server

First, you will need to start Metro, the JavaScript bundler that ships with React Native.

To start Metro, run the following command from the root of your React Native project:

# using npm
npm start

# OR using Yarn
yarn start

Step 3: Start your Application

Let Metro Bundler run in its own terminal. Open a new terminal from the root of your React Native project. Run the following command to start your Android or iOS app:

For Android

# using npm
npm run android

# OR using Yarn
yarn android

For iOS

# using npm
npm run ios

# OR using Yarn
yarn ios

If everything is set up correctly, you should see your new app running in your Android Emulator or iOS Simulator shortly provided you have set up your emulator/simulator correctly.

Design

Since the number of features are low, the project has separate screens and components partitions.

Project hierarchy:

src
├── navigation
├── theme
├── config
├── api
│   └── slices
├── types
├── contexts
├── store
│   └── slices
├── assets
│   └── images
├── components
│   ├── template
│   ├── movies
│   │   └── MovieList
│   ├── movieDetails
│   │   ├── CastList
│   │   └── MovieOverview
│   └── common
│       ├── AsyncImage
│       └── NotFound
└── screens
    ├── MovieCatalog
    └── MovieDetails
__dummy_data__

• src: Root directory of the application source code.

• navigation: Contains code related to application navigation, such as navigation stacks, routes, and navigation helpers.

• theme: Holds theme-related configuration and styling constants, such as colors and typography settings.

• config: Houses configuration files for the application, such as API endpoints.

• api: Directory containing code for interacting with APIs. The slices subdirectory organizes API-related code by feature slices, using RTK query library.

• types: Holds TypeScript type definitions ordered by feature.

• contexts: Contains React context providers, currently only housing the redux provider.

• store: Directory containing Redux store-related logic. The slices subdirectory organizes reducers by feature slices.

• assets: Stores static assets like images.

• components: Contains reusable UI components organized into subdirectories based on functionality.

• screens: Holds the main screens or pages of the application, corresponding to specific user interfaces or features.

• dummy_data: Directory containing dummy data used for testing or development purposes.

Current Progress

• Navigation, color scheme setup
• Landing page UI
• Movie details page UI
• Redux state management
• Landing page api integration
• Movie details page api integration
• Infinite Scroll on landing page
• Eslint Airbnb rule usage
• Error handling (Basic)
• Loading States
• Search functionality
• Error handling (Complete)
• Unit tests