Skip to content

This React Native application allows users to browse and explore information about Star Wars movies. The app fetches data from the Star Wars API (SWAPI) and presents it in an intuitive and user-friendly interface.

Notifications You must be signed in to change notification settings

martwozniak/star-wars-api-app

Repository files navigation

logo

Star Wars Movie App

This React Native application allows users to browse and explore information about Star Wars movies. The app fetches data from the Star Wars API (SWAPI) and presents it in an intuitive and user-friendly interface.

Features

  1. Movie List Screen

    • Displays a list of Star Wars movies
    • Includes a search functionality to filter movies
    • Shows loading state while fetching data
    • Handles and displays errors if they occur movie_list_screen
  2. Movie Details Screen

    • Presents detailed information about a selected movie
    • Displays grids of related entities (characters, planets, starships, vehicles, and species)
    • Shows images for entities when available
    • Implements a loading view while fetching additional details movie_list_screen_2 movie_list_screen_3 movie_list_screen_4 movie_list_screen_5
  3. Navigation

    • Utilizes React Navigation for smooth transitions between screens
    • Implements a stack navigator for easy navigation flow

Key Components

App.tsx

  • Sets up the main navigation structure using React Navigation
  • Defines the stack navigator with MovieListScreen and MovieDetailsScreen

MovieListScreen.tsx

  • Displays the list of Star Wars movies
  • Implements search functionality
  • Uses custom hooks for data fetching and navigation

MovieDetailsScreen.tsx

  • Shows detailed information about a selected movie
  • Utilizes FlatList to render different entity grids
  • Implements a custom header component for movie information

useMovieDetails.ts

  • Custom hook for fetching additional details about a movie
  • Retrieves information about characters, planets, starships, vehicles, and species

useMovieNavigation.ts

  • Custom hook for handling navigation to the movie details screen

useMovies.ts

  • Custom hook for fetching and managing the list of movies
  • Implements search functionality with debounce

EntityGrid.tsx

  • Reusable component for displaying grids of entities
  • Handles image loading and fallback to placeholder when necessary

Getting Started

  1. Clone the repository
  2. Install dependencies: npm install or yarn install
  3. Run the app: npm start or yarn start

Dependencies

  • React Native
  • React Navigation
  • Lodash (for debounce functionality)

API

This app uses the Star Wars API (SWAPI) to fetch movie and entity data. The API endpoints are handled in the services/api.ts file.

Styling

The app uses a combination of StyleSheet and a custom theme (styles/theme.ts) for consistent styling across components.

Future Improvements

  • Implement caching for API responses to reduce network requests
  • Add unit and integration tests
  • Enhance the UI with animations and transitions
  • Implement offline support using local storage

About

This React Native application allows users to browse and explore information about Star Wars movies. The app fetches data from the Star Wars API (SWAPI) and presents it in an intuitive and user-friendly interface.

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published