Simple React Native/React.JS Project with REST API
Budget: $250 – $750 USD
I am learning React.JS and React Native for my own projects. I would like to have an existing project as a sample for my learning.
Thus, I would like someone to create a mixed React JS/React Native project for me.
Technical requirements:
1. Project must be Typescript for both React.JS and React Native.
2. Use latest version of React.JS and React Native.
3. Use Starwars API as the backend. (https://swapi.dev)
4. Single project for both React.JS and React Native. Use different "npm run ..." to start either web, iOS or Android app.
5. Use tabbar navigation for React Native (iOS and Android). Each tabbar would contain additional navigation for the content.
6. React.JS web app should use a very normal top bar navigation on desktop, and a hamburger menu on mobile web.
7. The retrieved data from the API should be cached. Meaning, if the data already exists in local storage, it should display the cached data immediately, and refresh again after the REST call returns, and the remote data differs from cached data.
8. Must have clear instructions on how to build and run for each target, including web, iOS and Android.
9. Must have clear instructions on how to build and run on both simulator/emulator, and real device.
10. Must have clear instructions on how to make a build to push to Apple App Store and Google Play to release.
UI Requirements:
1. See attached file for a rough design. The implementation doesn't have to be exact, but the navigation should be clear.
2. I only need two items for top navigation: "People" and "Starships"
2.1. The top navigation is a tabbar for iOS and Android.
2.2. The top navigation should be a section of a list on the left side panel for React Native app running on iPadOS
2.3. The top navigation should be top navigation for React.JS running on desktop web.
2.4. The top navigation should be a hamburger menu with a popup menu, with "People" and "Starships" menu item, for mobile web (React.JS running on mobile web)
3. The secondary navigation (when either People, or Starships is selected) should be a list.
3.1 You must retrieve data from API to build the secondary navigation list, either a list of People, or a list of Starships.
3.2 On iOS, Android, and mobile web, it is a list occupying the content area.
3.3 Each item should contain at least a Title, but may also contain a subtitle 1, and subtitle 2. If subtitle 1 is present, Title and subtitle 1 are stacked, and aligned to the left of the row. If subtitle 2 is present it is displayed as secondary text on the right.
3.3.1 For People, "name" is the title, "gender" is subtitle_1, "birth_year" is subtitle_2. If data is "n/a", treat it as null and do not display it.
3.3.2 For Starship, only display "name" as title.
3.4 On iPadOS, secondary navigation is displayed as a child list under the primary navigation. For example, when "People" is selected, all the people retrieved from API are displayed as child list under "People".
3.5 On desktop web, secondary navigation is displayed as a list on the left navigation. For example, when "People" is selected, all the people retrieved from API are displayed as a list on the left nav panel.
4. Display simple details screens.
4.1 See attached design file. Only a couple of items are displayed.
4.2. "People" detail screen is shown with push navigation.
4.3 "Starship" detail screen is shown with modal dialog.
5, Both React.JS and React Native should respect system Light and Dark themes, and switch automatically when system theme changes.
Thus, I would like someone to create a mixed React JS/React Native project for me.
Technical requirements:
1. Project must be Typescript for both React.JS and React Native.
2. Use latest version of React.JS and React Native.
3. Use Starwars API as the backend. (https://swapi.dev)
4. Single project for both React.JS and React Native. Use different "npm run ..." to start either web, iOS or Android app.
5. Use tabbar navigation for React Native (iOS and Android). Each tabbar would contain additional navigation for the content.
6. React.JS web app should use a very normal top bar navigation on desktop, and a hamburger menu on mobile web.
7. The retrieved data from the API should be cached. Meaning, if the data already exists in local storage, it should display the cached data immediately, and refresh again after the REST call returns, and the remote data differs from cached data.
8. Must have clear instructions on how to build and run for each target, including web, iOS and Android.
9. Must have clear instructions on how to build and run on both simulator/emulator, and real device.
10. Must have clear instructions on how to make a build to push to Apple App Store and Google Play to release.
UI Requirements:
1. See attached file for a rough design. The implementation doesn't have to be exact, but the navigation should be clear.
2. I only need two items for top navigation: "People" and "Starships"
2.1. The top navigation is a tabbar for iOS and Android.
2.2. The top navigation should be a section of a list on the left side panel for React Native app running on iPadOS
2.3. The top navigation should be top navigation for React.JS running on desktop web.
2.4. The top navigation should be a hamburger menu with a popup menu, with "People" and "Starships" menu item, for mobile web (React.JS running on mobile web)
3. The secondary navigation (when either People, or Starships is selected) should be a list.
3.1 You must retrieve data from API to build the secondary navigation list, either a list of People, or a list of Starships.
3.2 On iOS, Android, and mobile web, it is a list occupying the content area.
3.3 Each item should contain at least a Title, but may also contain a subtitle 1, and subtitle 2. If subtitle 1 is present, Title and subtitle 1 are stacked, and aligned to the left of the row. If subtitle 2 is present it is displayed as secondary text on the right.
3.3.1 For People, "name" is the title, "gender" is subtitle_1, "birth_year" is subtitle_2. If data is "n/a", treat it as null and do not display it.
3.3.2 For Starship, only display "name" as title.
3.4 On iPadOS, secondary navigation is displayed as a child list under the primary navigation. For example, when "People" is selected, all the people retrieved from API are displayed as child list under "People".
3.5 On desktop web, secondary navigation is displayed as a list on the left navigation. For example, when "People" is selected, all the people retrieved from API are displayed as a list on the left nav panel.
4. Display simple details screens.
4.1 See attached design file. Only a couple of items are displayed.
4.2. "People" detail screen is shown with push navigation.
4.3 "Starship" detail screen is shown with modal dialog.
5, Both React.JS and React Native should respect system Light and Dark themes, and switch automatically when system theme changes.