This is a simplified Gift Card Wallet app built in React Native for the Everup technical test.
- ✅ Gift card list screen (FlatList with proper styling and performance optimization)
- ✅ Gift card details screen with typed route navigation
- ✅ Add gift card screen with local form state and validation
- ✅ Remove gift card functionality via Redux
- ✅ Redux Toolkit + redux-persist for offline state
- ✅ Modular, scalable folder structure
- ✅ Full TypeScript coverage with typed navigation and Redux
- ✅ Reusable UI components (Card, HeaderBackButton, Input fields)
- ✅ Error handling for invalid form data and edge cases
⚠️ Note: This version is intentionally scoped to demonstrate structure, architecture, and development discipline. The project is not built to be production-ready or complete by design.
- State Management: Redux Toolkit
- Persistence: AsyncStorage via redux-persist
- Navigation: React Navigation v6 with typed stack routes
- UI Composition: Reusable components with theme integration
- Type Safety: Fully written in TypeScript (no
anyused)
If expanded further, this app could include the following professional features:
| Feature | Description |
|---|---|
| 🖼️ Image Picker | Let users upload a photo for each gift card via react-native-image-picker |
| 📅 Date Picker | Replace raw text input with a native date picker for expiration dates |
| ⏳ Skeleton Loaders | Show animated placeholders while loading the persisted gift cards |
| 🔍 Search & Filter | Add search functionality by brand, amount range, or soon-to-expire |
| 🛠️ Edit Gift Cards | Allow editing an existing card (pre-fill form + dispatch update) |
| 📤 API Fetching Logic | If backend is added, support async fetching/saving via RTK Query or thunks |
| ✅ Input Validation Schema | Replace inline validation with zod or yup for consistency |
| 💬 Toasts & Feedback | Use react-native-toast-message or similar for user feedback |
| 🧪 E2E Testing with Detox | Add end-to-end testing coverage (optional but pro) |
| 🌙 Dark Mode | Add support for dynamic theme switching via context or native Appearance API |
| 🔄 Pull-to-Refresh | Implement refreshing with onRefresh in FlatList to allow user-initiated reloads |
| ♾️ Infinite Scroll | Use onEndReached to lazy-load more gift cards (if remote source is added) |
| ⚡ Initial Render Tuning | Use initialNumToRender, maxToRenderPerBatch, and windowSize to optimize list performance |
Each of these is within scope for production work and can be layered in cleanly without disrupting the current architecture.
You’ll find a sample reducer test in src/tests/giftCardsSlice.test.ts, validating giftCardsList addGiftCard and removeGiftCard logic.
Screenshots of the app are included in the src/assets/screenshots folder or as a PDF.
git clone https://github.com/anxheloo/Gift-Card-Wallet-App.git
cd Gift-Card-Wallet-App
npm install
cd ios && pod install && cd ..
npm run iosThis project demonstrates my approach to building scalable, maintainable mobile apps using modern React Native tooling. The current implementation is intentionally scoped to showcase architecture, not to deliver a full solution.
Let me know if you'd like a walkthrough or to explore further implementation ideas.