Small project using React, Redux, Ionic, Capacitor, Vite and much more.
npm i -g @ionic/cli
npm install
npm run build
You can test it:
- locally with
ionic serve
orionic cap run android --livereload --external
(if you want to also check on a connected phone) - installing the apk
- ONLINE
The app is working on native devices and web. NOTE: Despide I added all the permissions necessary for iOS, I'm using Windows, so I couldn't properly test it.
It's mobile friendly and also supports light and dark themes:
![](https://private-user-images.githubusercontent.com/5629919/345642989-9257dab7-47a0-41cf-90b8-f8d8b721e75a.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MzkzNjYzODQsIm5iZiI6MTczOTM2NjA4NCwicGF0aCI6Ii81NjI5OTE5LzM0NTY0Mjk4OS05MjU3ZGFiNy00N2EwLTQxY2YtOTBiOC1mOGQ4YjcyMWU3NWEucG5nP1gtQW16LUFsZ29yaXRobT1BV1M0LUhNQUMtU0hBMjU2JlgtQW16LUNyZWRlbnRpYWw9QUtJQVZDT0RZTFNBNTNQUUs0WkElMkYyMDI1MDIxMiUyRnVzLWVhc3QtMSUyRnMzJTJGYXdzNF9yZXF1ZXN0JlgtQW16LURhdGU9MjAyNTAyMTJUMTMxNDQ0WiZYLUFtei1FeHBpcmVzPTMwMCZYLUFtei1TaWduYXR1cmU9NzI4NGU0ZTY0ODhkMGJjNmU0YTJiMzE5YmEwYmEzZjRiMDc3MjYzYjNhMzVjMzA3MGIyNGY4NTZjODQwMTE1MyZYLUFtei1TaWduZWRIZWFkZXJzPWhvc3QifQ.7U7_TCchkLbwZHvZXdEbTQp93sstRMuPM5chf4JveGg)
![](https://private-user-images.githubusercontent.com/5629919/345643011-a568338a-1e1e-4939-ab8c-7be3739341f4.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MzkzNjYzODQsIm5iZiI6MTczOTM2NjA4NCwicGF0aCI6Ii81NjI5OTE5LzM0NTY0MzAxMS1hNTY4MzM4YS0xZTFlLTQ5MzktYWI4Yy03YmUzNzM5MzQxZjQucG5nP1gtQW16LUFsZ29yaXRobT1BV1M0LUhNQUMtU0hBMjU2JlgtQW16LUNyZWRlbnRpYWw9QUtJQVZDT0RZTFNBNTNQUUs0WkElMkYyMDI1MDIxMiUyRnVzLWVhc3QtMSUyRnMzJTJGYXdzNF9yZXF1ZXN0JlgtQW16LURhdGU9MjAyNTAyMTJUMTMxNDQ0WiZYLUFtei1FeHBpcmVzPTMwMCZYLUFtei1TaWduYXR1cmU9YjY5MDhmNTg4MjEzMmFjYmJlYzA1Y2E2ODZjOWQ2ODJjZDRlYjEwOTAwN2Q0MWViOTIzNmZmMzFkNDVmMzBkNiZYLUFtei1TaWduZWRIZWFkZXJzPWhvc3QifQ.ex_2OjzOkg704wLW1JQwa7fbMImDhe2wbwiwJtijd0Q)
![](https://private-user-images.githubusercontent.com/5629919/345642633-9719fbd3-cf9d-4cb4-9398-051f01749767.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MzkzNjYzODQsIm5iZiI6MTczOTM2NjA4NCwicGF0aCI6Ii81NjI5OTE5LzM0NTY0MjYzMy05NzE5ZmJkMy1jZjlkLTRjYjQtOTM5OC0wNTFmMDE3NDk3NjcucG5nP1gtQW16LUFsZ29yaXRobT1BV1M0LUhNQUMtU0hBMjU2JlgtQW16LUNyZWRlbnRpYWw9QUtJQVZDT0RZTFNBNTNQUUs0WkElMkYyMDI1MDIxMiUyRnVzLWVhc3QtMSUyRnMzJTJGYXdzNF9yZXF1ZXN0JlgtQW16LURhdGU9MjAyNTAyMTJUMTMxNDQ0WiZYLUFtei1FeHBpcmVzPTMwMCZYLUFtei1TaWduYXR1cmU9YWJkMzYxODc5OTk4NjE2OTc2NWFjYTI0MDY1YTNhZDVhNjYxNzhkMmI2Y2UxYjJjZTBjMWUzMWEzZWI3ZTkwOCZYLUFtei1TaWduZWRIZWFkZXJzPWhvc3QifQ.kU6oDgTfiKWlL4KImH1ar4jdt4r8QZxciHNNi-H1DCo)
![](https://private-user-images.githubusercontent.com/5629919/345642669-f5c0caa3-d9c1-4676-b50a-785a54a8475f.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MzkzNjYzODQsIm5iZiI6MTczOTM2NjA4NCwicGF0aCI6Ii81NjI5OTE5LzM0NTY0MjY2OS1mNWMwY2FhMy1kOWMxLTQ2NzYtYjUwYS03ODVhNTRhODQ3NWYucG5nP1gtQW16LUFsZ29yaXRobT1BV1M0LUhNQUMtU0hBMjU2JlgtQW16LUNyZWRlbnRpYWw9QUtJQVZDT0RZTFNBNTNQUUs0WkElMkYyMDI1MDIxMiUyRnVzLWVhc3QtMSUyRnMzJTJGYXdzNF9yZXF1ZXN0JlgtQW16LURhdGU9MjAyNTAyMTJUMTMxNDQ0WiZYLUFtei1FeHBpcmVzPTMwMCZYLUFtei1TaWduYXR1cmU9NDNjMDBmZjNlMjU2YWQzNWJhY2ZmNjczNjMzMmY1MWEyZGU3NGJjMmZhNjhlNmE3ZjUwMjI4ZGU5MjBjZTY3NSZYLUFtei1TaWduZWRIZWFkZXJzPWhvc3QifQ.4Y1fCMLAmtLjhdHmRScsf5SJMJWB5tkIqyKTogeogkA)
- Animations:
- Hover payslip items
- Download button
- Routes (handled by Ionic)
- Native download button
- Added extra components such as modals, refreshers, toasts, loaders, etc.
- Inside details page, there is a camera button on the right to test this plugin
- Icon and splash screen
- Added loading/error to individual payslips and improved error handling when loading pages (search for
uncomment next line
) - CD using Netlify: