Basic Photography Learning App With React

by React

KapturaLumina

Basic Photography Learning Mobile Applications with Gamification

Part of my Bachelor Thesis research in gamification design and implementation.

latest release

Previews

Home Page Leaderboard Profile
Learn Quiz

App Theme color inspired by Dracula Theme color palette

Tech Stacks, Dependencies

  • Framework : Ionic v5 - React
  • Database + Auth : Firebase
  • Tools, Libraries :
    • Ionic Capacitor
    • TypeScript
    • Cloudinary for image storage
    • CloudImage for image resizing, compression, (image transformer) and acceleration / optimization
  • Deployment : Vercel (Formerly Zeit) for PWA (Web App) Version
Getting Started

SettingUptheFirebase

In order for the application to run, you will need to connect it to Firebase Auth and Database.

  1. Create a firebase project
  2. Go to project settings, add a web app to acquire the API key
  3. Go to Authentication -> Sign In Method -> Enable Email/Password
  4. Go to Database -> pick Realtime Database -> import this sample database file

Getting Started

  1. Download and install node.js
  2. Install ionic CLI :
    npm install -g ionic
  3. Clone this repo
    git clone https://github.com/sozonome/kapturalumina.git
  4. Run npm i or yarn from project root
  5. Run npx cap sync android to synchronize capacitor deps / native bridges
  6. Run ionic s
Build Guide (android)

Make sure you have installed Android Studio

General Build Guide

  • npm run build-release-android or npm run build-clean-release-android

Build to APK Guide

  1. npm run build-release-android,
  2. npm run debug-android, wait until Android Studio Open and finish setting up Gradle etc
  3. Clean Project + Rebuild Project if needed
  4. Go to Build > Generate Signed Bundle / APK
  5. Put in the password of the KeyStore
  6. Done

Room for Improvements

  • [ ] Auth
    • [x] Forgot Password / Request Password Reset
    • [ ] Register / Sign In with Google Account / Twitter
  • [ ] Content (materials, discussions)
    • [ ] community generated content section
  • [ ] Admin Dashboard
    • [ ] a separate project to manage material contents
  • [ ] Internationalization / i18n

GitHub

https://github.com/sozonome/kapturalumina