This project builds a versatile mobile application using React Native on Expo CLI to fetch and filter JSON data from a remote source, presenting it in an organized and user-friendly manner.
Description: Fetch List Viewer is a versatile mobile application built using React Native on Expo CLI. This app fetches and filters JSON data from a remote source, presenting it in an organized and user-friendly manner. It provides a seamless user experience for viewing and interacting with categorized data. Key features include data fetching, filtering, sorting, and modal pop-up for detailed item information. The main functionality and code is in ./app/index.js
Technologies Used:
- React Native
- JavaScript
- RESTful API
- JSON Data Handling
- Modal Components
- Styling with CSS-in-JS
Features:
- Fetches data from a remote JSON source.
- Filters out items with blank or null names.
- Groups items by "listId" and sorts them within each group.
- Presents data in an easy-to-navigate format.
- Allows users to select a group for more detailed information using a modal.
- Utilizes responsive design for Android and iOS devices.
Usage:
- Clone the repository to your local machine. (git clone https://github.com/hanielalva/fetch-list-viewer-app.git)
- Navigate to the project directory (cd Fetch-List-Viewer-App)
- Install dependencies using npm or yarn. (npm install expo-cli)
- Start the expo server (expo start)
- Run the app on your preferred Android or iOS emulator, the web, or your own phone by scanning the QR code!
- Explore, filter, and view the fetched data effortlessly :D
Screenshots of the app running on an iPhone 15 Pro:
Screenshots of the app running on a Google Pixel 3a:
