As a software developer i see improvements, bad legacy UI, bad UX you name it (as a beginner i make/made the same mistakes) no shaming! mistakes make us grow!

One of these ideas sprouted inside the hospital from one of the nurse i talked to, he was interested in my studies and he was interested in the website he build for mindfulness to help people, so i decided to help him and make such an app free to use for all the patients, young, old, all kinds of different people and smartphones.

How i work (more or less)

Idea

The idea was an easy to use app so people could use it and follow all the steps to learn and master mindfulness (its not a fix it all, but it can help). I jumped in joy, wanted to work together with him for an app! he already had a website so i knew what he meant and could use some text and element styles he used with a modern twist.

MOSCOW principle

(deliver the least viable application that can do all it has to no less no more, expanding can be done so use GIT!)

Must haves:

PAGES

• Menu balk, header with picture and a Call To Action button.
• intro page
• workouts page
• citations page
• contact form page
• A easy to use UI/UX

Easy to follow all the steps intro -> workouts, click on workout do the workout (error free and straightforward)

PLATFORMS

I saw a great variety in devices, saw alot of mixed smarthpohones but also laptops and websites / web apps, young folks preferred their phone older folks their laptop. I am considering creating a PWA or hybrid app. I will make a blog post about this and the differences. Alternatively, follow the PWA app setup posts!

Boost Your Web App with PWABuilder and Hosting your app on firebase hosting

so Hybrid app it was.

• iOS
• Android
• MacOS
• WIndows

Should have’s

• User progress (8 themes 1 week per theme)
• Store and retrieve the data (small data, non user exposure data, no need for databases for now)

Could have“s

• More exercises and more diverse
• all nurses and specialists can make an exercise (non personal)
• have: user login, statistics

Wont have’s (for now, expansions will be kept in mind when building, always keep it in mind!)

• More exercises and more diverse
• all nurses and specialists can make an exercise (non personal)
• have: user login, statistics, a secured nurse/specialists login option to make these exercises
• have documentation on how these exercises should be made by the nurses/specialists

Stack

Ionic/Capacitor and VueJS looked like a good idea, also the mern stack but for now i decided we do not need a fullu fledged stack with MariaDB and all the whistles.so Ionic/Capacitor VueJS it was! (backend can also be done later if we keep expansions in mind, so keep it KISS or Keep It Stupid Simple and DRY Dont Repeat Yourself. write code with loops instead of copy pasting hundreds of code.. ) More on the topics MOSCOW, KISS and DRY will come.

Drawing and Diagrams

Drawing skills do not matter! just do em they help you so much! whether you use a tablet or paper bullet point books to napkins it does not matter, as long as you do it.

User Diagrams and app flow

User diagrams and app flow are critical for designing effective applications because they help you understand and visualize how users interact with your product. Here’s why you should consider them:

1. Clarity in User Experience (UX): They provide a clear picture of the user’s journey, helping you identify potential friction points and optimize the app for better usability.
2. Efficient Communication: Diagrams and flows are a universal language for teams, ensuring that designers, developers, and stakeholders share a common understanding of the app’s structure and behavior.
3. Problem Identification: By mapping out user actions and decision points, you can uncover inconsistencies, unnecessary steps, or missing features early in the design process.
4. Improved Planning: They guide development by defining key components, interactions, and data flows, reducing the risk of rework and ensuring alignment with user needs.
5. User-Centric Design: Focusing on user diagrams ensures that the app is built with the end-user in mind, leading to a more intuitive and engaging experience.

See? no fancy things just plain diagrams and user flows drawn by hand

APP setup, STAY TUNED!

Well.. local storage is up and running, took me some days to figure that out!

import {ref, onMpun} from 'vue';
import { Preferences } from '@capacitor/preferences';

// JSON "set" example
const setObject = async () => {
  await Preferences.set({
    key: 'progressie',
    value: JSON.stringify([
      'Thema',
      'Week: 1',
      'Sessies| 2/4',
      'Zelfreflectie',
      ])
  });
}

// JSON "get" example
const getObject = async () => {
  const ret = await Preferences.get({ key: 'progressie' });
  const user = ret.value;
  console.log(user)

  return user
}

setObject()
getObject()
const labelsNumber = 4;
const labels = ref<string[]>([]);
getObject().then((data) => {
  if (data) {
    labels.value = JSON.parse(data);
  }
});

console.log(labels)
const selectedIndex = ref(0);
const appPages = [
  {
    title: 'Home',
    url: '/Home',
    iosIcon: homeOutline,
    mdIcon: homeSharp,
  },
  {
    title: 'Oefeningen',
    url: '/Oefeningen',
    iosIcon: manOutline,
    mdIcon: manSharp,
  },
  {
    title: 'Citaten',
    url: '/Citaten',
    iosIcon: documentOutline,
    mdIcon: documentSharp,
  },
  {
    title: 'Contact',
    url: '/Contact',
    iosIcon: mailOutline,
    mdIcon: mailSharp,
  },
];

// FUNCTIONS


const path = window.location.pathname.split('/')[1];
if (path !== undefined) {
  selectedIndex.value = appPages.findIndex((page) => page.title.toLowerCase() === path.toLowerCase());
}

This code is not KISS (keep it stupid simple) and DRY (don’t repeat yourself), i think now is a good idea to refactor! we have something working but some elements are used multiple times. refactoring early instead of waiting till all the code is written for the app. It will save you a lot of headaches later on

TO COME: REFACTORING, STAY TUNED!