0 / 0
The Coding Odyssey

Appearance

Ik zie je - Mobile App ​

Project Overview ​

"Ik zie je" is a mobile application I developed for IJsfontijn in 2016, designed to help young people dealing with depression. Originally planned to be built with Ionic and Angular, the project was successfully implemented using Cordova and Vue.js 1.0.21 instead, as it allowed for faster development and better developer familiarity. The entire project was completed in just 3 weeks (2 weeks for development, 1 week for testing), with a focus on providing a quiz-based support system.

A working demo of the application is available at ikzieje.harianto.dev. The demo has been modernized to work with current web technologies, though mobile development features are not available due to the lack of Apple Developer subscription and Android testing devices.

Download ​

You can download the project source code from: ikzieje-cordova.zip

Technical Stack ​

  • Framework: Vue.js 1.0.21
  • Mobile Platform: Cordova (iOS/Android)
  • UI Framework: Quasar Framework
  • State Management: Vuex
  • Routing: Vue Router
  • Build Tools:
    • Webpack
    • Babel
    • ESLint
    • Stylus
    • Less

Core Features ​

  1. Quiz System

    • Random question generation
    • Dual-panel display interface
    • Interactive answer system
    • Progress tracking

  2. Mobile-First Design

    • Responsive layout
    • Touch interactions (Hammer.js)
    • Material Design icons
    • Custom animations (GSAP)

  3. Data Management

    • JSON-based data storage
    • Vuex state management
    • Local data persistence

  4. User Interface

    • Dual-panel view
    • Touch-friendly interface
    • Material Design components
    • Custom styling with Less

Project Structure ​

ikzieje-cordova/
├── src/                    # Source code
│   ├── vue/               # Vue components
│   ├── assets/            # Static assets
│   ├── less/              # Less stylesheets
│   └── statics/           # Static files
├── cordova/               # Cordova configuration
├── build/                 # Build scripts
├── config/                # Configuration files
└── test/                  # Test files

Key Components ​

  1. Frontend Application

    • Vue.js components
    • Quasar Framework UI
    • Material Design icons
    • Custom animations

  2. Mobile Integration

    • Cordova platform
    • Touch event handling
    • Mobile-specific features
    • Cross-platform compatibility

  3. Development Tools

    • Webpack bundling
    • Babel transpilation
    • ESLint code quality
    • Stylus/Less preprocessing

  4. Testing Infrastructure

    • Karma test runner
    • Mocha testing framework
    • Nightwatch E2E testing
    • PhantomJS for headless testing

Build and Development ​

  1. Development Commands

    • npm run dev: Start development server
    • npm run build: Build for production
    • npm run ios: Run on iOS device
    • npm run android: Run on Android device
    • npm run test: Run unit and E2E tests

  2. Build Process

    • Webpack bundling
    • Babel transpilation
    • CSS preprocessing
    • Asset optimization

  3. Mobile Deployment

    • iOS simulator support
    • Android device support
    • Cross-platform compatibility
    • Device-specific optimizations

Dependencies ​

Key dependencies include:

  • vue: Frontend framework
  • quasar-framework: UI components
  • vuex: State management
  • vue-router: Routing
  • hammerjs: Touch interactions
  • gsap-promise: Animations
  • material-design-icons: UI icons
  • moment: Date handling

Development Tools ​

  • Webpack for bundling
  • Babel for transpilation
  • ESLint for code quality
  • Stylus/Less for styling
  • Karma for testing
  • Nightwatch for E2E testing

Important Notes ​

  1. Uses Vue.js 1.0.21 (specific version required)
  2. Quasar Framework 0.x version
  3. Cordova for mobile deployment
  4. JSON-based data storage
  5. Dual-panel interface design
  6. Touch-first interaction model

Testing ​

  1. Unit Testing

    • Karma test runner
    • Mocha testing framework
    • Chai assertions
    • Sinon for mocking

  2. E2E Testing

    • Nightwatch
    • Selenium WebDriver
    • ChromeDriver
    • PhantomJS

Mobile Considerations ​

  1. Platform Support

    • iOS device support
    • Android device support
    • Simulator testing
    • Device-specific features

  2. Performance

    • Touch optimization
    • Animation performance
    • Asset optimization
    • Memory management

Future Considerations ​

  1. Potential upgrade to newer Vue.js version
  2. Modernization of build tools
  3. Enhanced testing coverage
  4. Performance optimizations
  5. Additional platform support
  6. Enhanced accessibility features
  7. Offline capabilities
  8. Analytics integration