A simple and efficient inventory management app built with React Native. This application allows users to track stock levels, manage items, and keep inventory organized with ease. Featuring an intuitive UI, color-coded stock indicators, built-in validation, and Redux Toolkit for state management, it provides a seamless experience for inventory management.
- Displays all inventory items in a structured list.
- Each item is shown with its name and quantity.
- Color-coded background to indicate stock levels:
- 🔴 Red: Low stock (quantity < 20)
- 🟢 Green: Sufficient stock (quantity ≥ 20)
- Filters and highlights items that are running low on stock.
- Helps users quickly identify which items need replenishment.
- Allows users to enter new inventory items with:
- Name
- Quantity
- Unit (ml, kg, pcs, etc.)
- Newly added items appear in the inventory list instantly.
- Form Validation:
- Ensures that both the name and quantity fields are not empty.
- Displays an alert when validations fail.
- Enables users to modify existing item details.
- Users can update item name and quantity as needed.
- Ensures accurate inventory tracking.
- Users can remove items from the inventory.
- Helps keep the inventory list clean and up-to-date.
- Uses Redux Toolkit to manage the application's state.
- Centralizes inventory data for consistent and scalable state handling.
- Simplifies state updates for adding, editing, and removing items.
- Simple and intuitive design with a clean interface.
- Easy navigation through a tab-based menu:
- All Items – Displays complete inventory.
- Low Stock – Filters and shows only low-stock items.
- Create Item – Allows users to add or edit items.
Ensure you have the following installed:
- Node.js
- React Native
- Android Studio / Xcode (for emulators or real device testing)
- Clone the repository:
git clone https://github.com/RevMax-creator/CrowCache.git cd CrowCache - Install dependencies:
npm install
- Start Metro Bundler:
npx react-native start
- Run the app on an emulator or real device:
- For Android:
npx react-native run-android
- For iOS:
npx react-native run-ios
- For Android:
📦 inventory-app
├── 📂 src
│ ├── 📂 components
│ │ ├── AllItems.jsx # Displays all inventory items
│ │ ├── CreateItem.jsx # Allows adding/editing items with validation
│ ├── 📂 screens
│ │ ├── HomeScreen.jsx # Main dashboard of the app
│ ├── 📂 assets # Stores app assets (icons, images, etc.)
├── 📂 redux
│ ├── store.js # Redux store configuration
│ └── 📂 features
│ └── reducer
│ └── appSlice.js # Redux Toolkit slice for inventory management
├── App.jsx # Root component wrapped in Redux Provider
├── package.json # Dependencies and scripts
└── README.md # Project documentation
- React Native – UI and functionality
- React Hooks – Component state and lifecycle management
- Redux Toolkit & React Redux – Global state management
- JavaScript (ES7+) – Core logic
- React Native Vector Icons – Icons for edit/delete buttons (if used)
-
Redux Toolkit Integration:
The application uses Redux Toolkit for state management. The inventory data is maintained in a global Redux store, making it easier to manage complex state changes like adding, editing, or removing items. -
Form Validations:
Input forms for adding or editing items include built-in validation to ensure that required fields (name and quantity) are not left empty. When a validation fails, an alert is displayed to notify the user.
Contributions are welcome! Feel free to fork the repository and submit pull requests.
- Fork the repository.
- Create a new branch:
git checkout -b feature-name
- Make your changes and commit them:
git commit -m "Added new feature" - Push to your forked repository:
git push origin feature-name
- Open a Pull Request.
This project is open-source and available under the Modified Creative Commons License.
For any queries or suggestions, feel free to reach out:
- GitHub: RevMax-creator
Happy coding! 🚀