An nextjs and react native app which shows the movie and character listings of Star Wars using the swapi Graphql api.
The React Native Project(swapi-mobile) is part of git submodules. So when trying to clone the repo use the --recursive flag
Example
git@github.com:ganes1410/swapi-next.git --recursive
yarn install
yarn dev
yarn build
The React Native Project project is built with Expo. The code for it is under swapi-mobile submodule.
cd swapi-mobile
yarn install
yarn start
Live Demo deployed on Netlify
- Listing Pages for Movies and People section separated by tabs.
- Details Pages for individual Movies and People.
- All the pages are cached with
DocumentCache, so the api calls do not happen on subsequent page visits. - Pagination of Planets Listing to fetch only 12 items at a time.
- The above features are also completed on the mobile app except the pagination part.
- The Cached Pagination data of Planets Listing does not persist across mutliple routes. This happens because the react state does not know about the cached data on initial load. Could not find a solution for this in time.
- Could not add tests for the app.
- NextJS for building the react app.
- Expo for building the react native app.
- Urql as the graphl client.
- Chakra UI for styling in the react app.
- Graphql Code Gen for generating graphql types and hooks needed for the project.