ionic-team / ionifits

Human Resources demo app (Zenefits clone) serving as a reference for enterprise app developers on the Ionic stack.

Ionifits is a Zenefits-inspired human resources demo app. It's a showcase of Ionic App Platform technologies, including Ionic Framework, Capacitor, Appflow, and Ionic Enterprise solutions.

Try the App

Ionifits runs on the web, iOS, and Android all from a single codebase. See for yourself:

• iOS: Public TestFlight Link
• Android: Public Beta link
• Web: https://ionifits.ionic.io

To log into Ionifits, use username [email protected] and password: ionic. Optionally, tap the "Skip" button to bypass the login.

An 8 minute overview video of the app's key features is also available. See the app running on an iPhone alongside explanations of the real code in use.

Features

"Vanilla" Ionic Framework: Show off the power and performance of Ionic UI components by using them as-is (out-of-the-box as much as possible).

Login page, powered by Auth Connect and Identity Vault: After login, the Auth0-powered user access token is securely stored in the mobile device keychain using Ionic Identity Vault. When the app is placed into the background, the screen is obscured to protect Ionifits data. Log out from the Settings page.

Employee Management page: Display a list of all "employees", demonstrating high performance infinite scrolling containing hundreds of items. Tap on an employee to see their details (note the built-in Ionic Framework native-feeling animations).

Expense Management page, powered by Ionic Secure Storage: Complete expense management implementation (similar to how Abacus works), featuring full CRUD (create-read-update-delete) for expenses. Add a new expense's merchant name, cost, date, and more, and capture a photo of the receipt using your device's camera. Once saved, tap on the expense to make changes. Slide an expense item in the list of Completed Expenses to the left to delete it. All expenses are encrypted on device using Ionic Secure Storage.

Company Store page: Fictional Ionic swag store demonstrating more Ionic Framework capabilities as well as Ionic Payments solution (Google Pay and Apple Pay on the web and mobile).

Settings page: Simple page showing off other Ionic Framework UI components. If user has logged in, user name is displayed and Log Out button appears.

Implementation Details buttons: Tap the "i" icon in the upper-right hand corner to view details about the technologies used, including Ionic Framework UI components and Ionic Native Enterprise features.

Appflow Live Updates: Update the UI and business logic of your app remotely, in real-time. Push HTML, JS, and CSS updates directly to your users without going through the app store to instantly fix bugs and ship new features. Purposely disabled by default but can be re-enabled easily to test in your own Appflow account. Free to get started on the Appflow mobile CI/CD platform.

Tech Details

• Native runtime: Capacitor 5
• Frameworks: Ionic Framework 7 and Angular 17
• Capacitor Core plugins: Camera, Filesystem
• Appflow features: Live Updates SDK
• Ionic Enterprise solutions: Auth Connect, Identity Vault, Secure Storage, and Ionic Payments.

How to Run

Note: Installing and running this app requires a subscription to Ionic Enterprise. For details, pricing info, and a live demo, please reach out here.

Want to try Ionic's native solutions in your app? Sign up for a free trial.

• Install the Ionic CLI: npm install -g @ionic/cli
• Clone this repository: git clone https://github.com/ionic-team/ionifits.git
• Navigate to repo in a terminal: cd ionifits
• Add an Ionic Enterprise Native key into your .bash_profile file or as an Environment Variable on Windows: export ENT_NATIVE_KEY="key_4e9d5..."
• Install dependencies (this will fail if you don't have an Ionic Native key): npm i
• Run locally in a browser: ionic serve
• Deploy to a mobile device: See details here.

ionifits's Issues

iOS deployment strategy

Identity ways to deploy the app to iOS, pick one, and deploy.

Options include:

• iOS App Store (Will Apple allow a demo app? What about public ratings giving a poor impression?)
• TestFlight public links (Easy to hand out link, but TF builds expire over time)
• ???

PWA deployment strategy

Deploy the app as a PWA.

• Suggested to use same Firebase account as other Ionic apps (conference app, etc.) in order to keep it simple

Implement Maestro UI tests

Update to Angular 9

Android deployment strategy

Identity ways to deploy the app to Android, pick one, and deploy.

Options include:

• Google Play Store (Google should allow app. What about public ratings giving a poor impression?)
• Internal distribution like TestFlight?

People Detail Screen

Use Zenefits as a base design. Show name, photo, contact info

Expenses tab: Implement

Add functionality to use the Camera plugin:

• Take a picture to capture an expense "receipt".
• CRUD actions
• List of all open expenses (parent/child views)
• Support: iOS and Android

Remove Messages tab

No need for it. We will focus on implementing the other tabs with the goal of a "complete" app from a visual standpoint.

Offline Storage: Fix scrolling issue

1. Load the app on an iOS device - this branch.

2. I'm now loading the same Employee data from data/EmployeeData.ts into a Couchbase Lite database, then the app does searching/filtering from CBL.

3. Issue is with scrolling: I've hacked the search results a bit to display results from CBL. Only 200 results currently, since trying to load all the Emp data (thousands of records) crashes the app (the native team likely needs to implement database Batching - i've informed them).

4. when you apply filters, search etc then scroll up, eventually the data reverts back to the original Employee data. Goal is to keep the new data.

If this is an issue only because i'm using 200 records instead of the full amount, then that's fine - we'll hold off on changing anything and just not ship the PR right now.

Settings screen

Implement basic settings screen.

Time Off screen

Implement basic screen.

People List Screen