This application is an assignment project for Supersymmetry Software.
Your task is to create a React Native application featuring a data table that:
- Fetches user data from an API.
- Displays information such as name, age, date of birth, and a checkbox.
- Includes search and sorting functionality for each column.
Additionally, you should be ready to explain every line of code.
Follow these steps to set up and run the application:
Run the following command to install all required dependencies:
npm install
2. Start the Application
Start the app using Expo:
npx expo start
Options to Open the App:
• Development Build: Use for full-featured app development.
• Android Emulator: Test the app on an Android emulator.
• iOS Simulator: Test the app on an iOS simulator.
• Expo Go: A sandbox environment for previewing app development.
🌐 API Details
The app fetches user data from the JSONPlaceholder API. This provides mock data for development and testing.
🏗 Application Architecture
The project follows an Atomic Design Structure, organized into:
• Atoms: Basic UI components (e.g., buttons, checkboxes).
• Molecules: Combinations of atoms (e.g., input fields with labels).
• Organisms: Complex components composed of atoms and molecules (e.g., data table).
You can find all the components in the components/atoms, components/molecules, and components/organisms directories.
✨ Features
1. Data Table:
• Displays user data including name, age, date of birth, and a checkbox.
• Provides search functionality to filter rows.
• Allows sorting for each column in ascending or descending order.
2. Reusable Components:
• Built with modular and reusable components for scalability.
3. API Integration:
• Fetches user data dynamically using a custom hook.
Start exploring the code and customize the application as needed! Happy coding! 😊