Basic Photography Learning App With React

Aug 29, 2021
Basic Photography Learning App With React


Basic Photography Learning Mobile Applications with Gamification

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

latest release



Home PageLeaderboardProfile

App Theme color inspired by Dracula Theme color palette

Tech Stacks, Dependencies

codefactor badge

  • 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


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
  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