This is Qoom Blog, a brand new site by Qoom that's just getting started. Things will be up and running here shortly, but you can subscribe in the meantime if you'd like to stay up to date and receive emails when new content is published!

As a student who came into the Qoom Creator Group this Summer 2021 with mostly front-end experience, I wanted to challenge myself to get a little more comfortable working with the backend. I found that working with Qoom's database easy to use for account authentication, and user data and helped make my project Total Slice a reality during the course of the program.

Inspiration

Total Slice was inspired by my own personal experience trying to figure out my personal finances. For some reason, I found that my banking and bill statements, seeing plain numbers on a page, did not help me to understand where my money was going. This is perhaps due to the fact that I am more of a visual learner. So, I wanted to find a way to help those who were more visually-inclined see what is going on with their money to give better context. Thus, Total Slice was created.

Early Wireframe Prototype of Total Slice

Main Features

Total Slice is a working website that includes the following features:

1. Pie Charts generated by Plotly.js
2. An Itemized Monthly Budget Breakdown
3. Total Slice Status Bar
4. A Currency Converter using ExchangeRate-API

Once the user signs up for a free account, they can log in and go into their dashboard. Inside the dashboard houses the budgeting form where they can fill out their monthly income as well as expenses that apply to them. Once they hit the 'Calculate Results' button at the bottom of the form, pie charts are dynamically generated to help visualize their total monthly income vs expenses as well as an itemized breakdown showing the the income/expense types and their dollar figure amount. Finally, the Total Slice status bar updates to tell the user in plain terms whether their expenses outweigh their income for the month or not. The status bar also tells them to look into particular expenses that take up greater than or equal to 50% of their monthly income so they can make any necessary adjustments.

An extra feature I implemented was the currency converter to practice using APIs. It uses the ExchangeRate-API which gives reliable up-to-date currency exchange data that is easy to use.

I also included some personal finance blogs, videos, and wikis in the Resource section of the Total Slice website to help better educate my users on personal finance. It is my hope that Total Slice can be a useful tool to help people better understand the state of their money and can help people make more informed financial decisions.

Lessons Learned

During one of the Tech Talks, we learned about Regular Expressions (Regex), which could be used to help filter form data. With a bit of practice, I managed to incorporate regex into the input areas of the Total Slice's budget form to prevent the user from inputting anything other than dollar amounts and thus prevent errors from happening.

Here's a code snippet that shows regex syntax in the pattern attribute inside the input tag:

<input type="number" name="income" id="income" pattern="/^[0-9]\d*(((,\d{3}){1})?(\.\d{0,2})?)$/" step="0.01" placeholder="Enter Your Income" />

Another lesson I learned was understanding the javascript functions for Open DB, Qoom's database. I had to go to a few office hours to understand what the async functions do and the difference between GET, POST, and PATCH methods. From there, I learned how to add form data to the database using javascript as well as updating the form data within the database and having that reflected in the pie graphs, the itemized budget breakdown list, and the Total Slice status bar.

Final Thoughts

The Qoom creator group provided a great learning experience for me. Having the chance to help develop a project on the Qoom platform with the guidance of the Qoom founders and staff alongside a cohort of peers helped me improve my coding abilities, pick up new skills in design, wireframing, and using APIs, and challenged me to get out of my comfort zone and create a project in an area not familiar to me. I am definitely interested in exploring how to create more fintech-related apps in the future, and Qoom has given me confidence to do this.

Total Slice Live Site Link: https://alerthorse44.qoom.space/~/TotalSlice

Speech Detector and Analyser

The ML model that I trained and used in LearnLily can detect postures while speaking (namely, good eye contact, bad eye contact, fidgeting, slump), detect fumbles and backgrond noise while talking and also detect whether you are giving your speech with or without any aids (phone, notes, etc.) Sounds interesting? Check out how it works live here.

A little background

It was my very first time working with Machine Learning which was initially quite intimidating since I am not naturally inclined towards Python. I tend to be more of a Javascript person.

The absolute blessing moment came when I discovered the Tensorflow.js library.

Once I started reading up more on it and delved deeper, I discovered 'Google Teachable Machine, which has been rightly described by Google as "A fast, easy way to create machine learning models for your sites, apps, and more – no expertise or coding required."

As excited as I am?

Read more on Google Teachable Machine and utilize it in your own fun projects!
Please note: This is in no way an exhaustive Google Teachable Machine tutorial, just a surface coding walkthrough. For better tutorials or if you are a beginner, check out Google Teachable Machine's own tutorials or Coding Train's.

STEP 1

Train your 'Google Teachable Machine' model (or in my case, model-s).

• Pose Model:
  My Google Teachable Machine Pose Model will be able to detect four classes of posture- good eye contact, bad eye contact, fidgeting and slump (shoulder slump).
  

• Image Model:
  My Google Teachable Machine Image Model will be able to detect two classes- unassisted and external aid.
  
• Audio Model:
  My Google Teachable Machine Audio Model will be able to detect one additional class apart from 'Background noise'- which is, fumbling.
  

Once you're done adding datasets to your classes, click on Train Model and then generate the export code. Since I am using Javascript, my code here today will be as such.

STEP 2

Code. Code. Code. Wait. Code.

• First, add in your model URLs at the very top.

const POSE_URL = "https://teachablemachine.withgoogle.com/models/gCKJy2yBv/";

const AUDIO_URL = "https://teachablemachine.withgoogle.com/models/1jaFMEKV8/";

let modelimage, webcamimage, imagelabelContainer, maxPredictionsimage;
let modelpose, webcampose, ctx, poselabelContainer, maxPredictionspose;

• Next, add the audio model and create recogizer.

async function createModel() { // for audio model
    const checkpointURL = AUDIO_URL + "model.json"; // model topology
    const metadataURL = AUDIO_URL + "metadata.json"; // model metadata

    const recognizer = speechCommands.create(
        "BROWSER_FFT", // fourier transform type, not useful to change
        undefined, // speech commands vocabulary feature, not useful for your models
        checkpointURL,
        metadataURL
    );

    // check that model and metadata are loaded via HTTPS requests.
    await recognizer.ensureModelLoaded();

    return recognizer;
}

• Next, load the image and pose models and set up the web cam. Note that the init() function gets triggered when you hit the 'Start Recording' button.

  async function init() {
    
    // Changing the button text
    document.querySelector("#record-btn").innerHTML = "Starting the magic...";
    
    // Changing final report visibility
    document.querySelector("#speech-final-rep").style.display = "none";
  
    const modelURLimage = IMAGE_URL + "model.json";
    const metadataURLimage = IMAGE_URL + "metadata.json";
  
    const modelURLpose = POSE_URL + "model.json";
    const metadataURLpose = POSE_URL + "metadata.json";
  
    // load the model and metadata
    modelimage = await tmImage.load(modelURLimage, metadataURLimage);
    maxPredictionsimage = modelimage.getTotalClasses();
    // load the model and metadata
    modelpose = await tmPose.load(modelURLpose, metadataURLpose);
    maxPredictionspose = modelpose.getTotalClasses();
  
    // Convenience function to setup a webcam
    const height = 350;
    const width = 350;
    const flip = true; // whether to flip the webcam
        
    webcamimage = new tmImage.Webcam(width, height, flip); // width, height, flip
    webcampose = new tmPose.Webcam(width, height, flip); // width, height, flip
  
    // Change button text
    document.querySelector("#record-btn").innerHTML = "Loading the model...";
  
    await webcampose.setup(); // request access to the webcam
    //await webcamimage.setup();
    await webcampose.play();
    //await webcamimage.play();
    window.requestAnimationFrame(loop);
    }
  
  
  

• Next, create a canvas where your webcam can be rendered for recording your speech. Also, add subsequents <div>s according to the number of classes that you have used. Keep adding the following code to init(), the main function unless I give you a heads up!

// Change button text
    document.querySelector("#record-btn").innerHTML = "Loading the model...";

    await webcampose.setup(); // request access to the webcam
    //await webcamimage.setup();
    await webcampose.play();
    //await webcamimage.play();
    window.requestAnimationFrame(loop);

    // Change button text
    document.querySelector("#record-btn").innerHTML = "Please Be patient...";

    // append elements to the DOM
    const canvas = document.getElementById("canvas");
    
    canvas.width = width; canvas.height = height;
    ctx = canvas.getContext("2d");
        
    poselabelContainer = document.getElementById("pose_label-container");
    for (let i = 0; i < maxPredictionspose; i++) { // and class labels
        poselabelContainer.appendChild(document.createElement("div"));
    }

    imagelabelContainer = document.getElementById("image_label-container");
    for (let i = 0; i < maxPredictionsimage; i++) { // and class labels
        imagelabelContainer.appendChild(document.createElement("div"));
    }

    // audio recogniser
    window.recognizer = await createModel();
    const classLabels = recognizer.wordLabels(); // get class labels
    const audiolabelContainer = document.getElementById("audio_label-container");
    for (let i = 0; i < classLabels.length; i++) {
        audiolabelContainer.appendChild(document.createElement("div"));
    }

• With me so far? Now, we are getting to the pointy and more interesting bits. In the following code, I have pushed the result.scores[i].toFixed(2)*100 class values as live feedback on the html page. Feel free to ignore storing the data in arrays, array graph data and sum of the data unless you need them to manipulate any part of your project. In my case, I used them- so I am still keeping them here for your reference.

        // declare the arrays empty
        const scores = result.scores; // probability of prediction for each class
        // render the probability scores per class
        for (let i = 0; i < classLabels.length; i++) {
            const classPrediction = classLabels[i] + ": " + result.scores[i].toFixed(2)*100 + "%";
            audiolabelContainer.childNodes[i].innerHTML = classPrediction;
        }
    		
    	// Store data in arrays
        audio1arr.push(result.scores[0].toFixed(2)*100);
        audio2arr.push(result.scores[1].toFixed(2)*100);
        
        // Store audio graph data
        audiogr.push(Math.round(100 - ((result.scores[0].toFixed(2)*100) + (result.scores[1].toFixed(2)*100))));
        
        // Store array sum
        sumaudioarr1 += result.scores[0].toFixed(2)*100;
        sumaudioarr2 += result.scores[1].toFixed(2)*100;}, {
            includeSpectrogram: true, // in case listen should return result.spectrogram
            probabilityThreshold: 0.75,
            invokeCallbackOnNoiseAndUnknown: true,
            overlapFactor: 0.50 // probably want between 0.5 and 0.75. More info in README
        });
  

• That's a wrap for our init() function. Next, let's head on to our loop().

    webcampose.update(); // update the webcam frame
    webcamimage.update();
    await predict();
    window.requestAnimationFrame(loop);
    }
    
  

Feeling confused? Been there too. Feel free to check out Google Teachable Machine official repository for better instructions on what each function doe here.
Next, we run our model through the pose and image models. Stay with me, this is easier than it's shorter. The predict() function here does the same as the audio model above. Once again, feel free to ignore the arrays and sum variables if they aren't use to you.

// run the webcam image through the image model
async function predict() {
  const { pose, posenetOutput } = await modelpose.estimatePose(webcampose.canvas);

  const predictionpose = await modelpose.predict(posenetOutput);
  // predict can take in an image, video or canvas html element
  const predictionimage = await modelimage.predict(webcampose.canvas);

  // Image model texts
  imagelabelContainer.childNodes[0].innerHTML = predictionimage[0].className + ": " + predictionimage[0].probability.toFixed(2)*100 + "%";
  imagelabelContainer.childNodes[0].style.color = "#0dd840";
  imagelabelContainer.childNodes[1].innerHTML = predictionimage[1].className + ": " + predictionimage[1].probability.toFixed(2)*100 + "%";
  imagelabelContainer.childNodes[1].style.color = "#ee0a0a";

  // Store image data in array
  image1arr.push(predictionimage[0].probability.toFixed(2)*100);
  image2arr.push(predictionimage[1].probability.toFixed(2)*100);
  
  // Store image graph data
  imagegr.push(Math.round(predictionimage[1].probability.toFixed(2)*100));
  
  // Store data array sum
  sumimagearr1 += predictionimage[0].probability.toFixed(2)*100;
  sumimagearr2 += predictionimage[1].probability.toFixed(2)*100
  
  // Pose model texts        
  poselabelContainer.childNodes[0].innerHTML = predictionpose[0].className + ": " + predictionpose[0].probability.toFixed(2)*100 + "%";
  poselabelContainer.childNodes[0].style.color = "#0dd840"; //good eye contact
  poselabelContainer.childNodes[1].innerHTML = predictionpose[1].className + ": " + predictionpose[1].probability.toFixed(2)*100 + "%";
  poselabelContainer.childNodes[1].style.color = "#ee0a0a"; //bad eye contact
  poselabelContainer.childNodes[2].innerHTML = predictionpose[2].className + ": " + predictionpose[2].probability.toFixed(2)*100 + "%";
  poselabelContainer.childNodes[2].style.color = "#ee0a0a"; //fidgeting
  poselabelContainer.childNodes[3].innerHTML = predictionpose[3].className + ": " + predictionpose[3].probability.toFixed(3)*100 + "%";
  poselabelContainer.childNodes[3].style.color = "#ee0a0a"; //slump
  
  // Store pose data in array
  pose1arr.push(predictionpose[0].probability.toFixed(2)*100);
  pose2arr.push(predictionpose[1].probability.toFixed(2)*100);
  pose3arr.push(predictionpose[2].probability.toFixed(2)*100);
  pose4arr.push(predictionpose[3].probability.toFixed(2)*100);
  
  // Store pose graph data
  posegr.push(Math.round((predictionpose[0].probability.toFixed(2)*100) - ((predictionpose[1].probability.toFixed(2)*100)+(predictionpose[2].probability.toFixed(2)*100)+(predictionpose[3].probability.toFixed(2)*100))));
  
  // Store data sum
  sumposearr1 += predictionpose[0].probability.toFixed(2)*100;
  sumposearr2 += predictionpose[1].probability.toFixed(2)*100;
  sumposearr3 += predictionpose[2].probability.toFixed(2)*100;
  sumposearr4 += predictionpose[3].probability.toFixed(2)*100;

  // finally draw the poses
  drawPose(pose);
  }

• In the next step, you have to update the webcam frame with the drawn pose keypoints which the model returns. One interesting thing to note here will be minPartConfidence parameter.

  function drawPose(pose) {
    if (webcampose.canvas) {
        ctx.drawImage(webcampose.canvas, 0, 0);
        // draw the keypoints and skeleton
        if (pose) {
            const minPartConfidence = 0.5;
            tmPose.drawKeypoints(pose.keypoints, minPartConfidence, ctx);
            tmPose.drawSkeleton(pose.keypoints, minPartConfidence, ctx);
            }
        }
    }
  

• To wrap up, add a 'Stop Recording' trigger button that will stop the ML model and you can do all your data calculatons here. (Here is where my sum variables and arrays come into play). Again, explore those only if you need them.

    {
    await webcampose.stop();
    recognizer.stopListening();
    endtime = Date.now();
    timeslot = (endtime - starttime)/1000;
    if(timeslot < 60)
    {
    	window.timeprint = timeslot + " seconds";
    }
    else
    {
    	minutes = Math.floor(timeslot/60);
    	seconds = Math.floor(timeslot - minutes * 60);
    	window.timeprint = minutes + " minutes and " + seconds + " seconds";
    }
    sumaudioarr1 /= audio1arr.length;
    sumaudioarr2 /= audio2arr.length;
    sumimagearr1 /= image1arr.length;
    sumimagearr2 /= image2arr.length;
    sumposearr1 /= pose1arr.length;
    sumposearr2 /= pose2arr.length;
    sumposearr3 /= pose3arr.length;
    sumposearr4 /= pose4arr.length;
  
    window.posesc = Math.round(sumposearr1- (sumposearr2+sumposearr3+sumposearr4));
    window.audiosc = Math.round(100 - (sumaudioarr1+sumaudioarr2)/2);
    window.imagesc = Math.round(sumimagearr1 - sumimagearr2);
   
    document.querySelector("#speech-report-div").style.display = "none";
    document.querySelector("#pose-rep").innerHTML = posesc + "% near perfect";
    document.querySelector("#audio-rep").innerHTML = audiosc + "% confident voice";
    document.querySelector("#image-rep").innerHTML = imagesc + "% unassisted";
    document.querySelector("#time-rep").innerHTML = timeprint;
    
    speechgraph(window.posesc,window.audiosc,window.imagesc,window.timeprint);
    document.querySelector("#speech-final-rep").style.display = "block";
    document.querySelector("#record-btn").innerHTML = "Start Recording";
    document.querySelector("#stop-record-btn").style.display = "none";
    }
  
  

• No, you have been great enough. So, no more code. :D

• And that being said, there WAS a lot more code that I added after this to render the readings as a graph and stuff, but that's rambling for another day. Feel free to check all the code for LearnLily on my Github repo if you are interested.

STEP 3

Finally, with all the code written, you can take a few minutes to relax just like I did after completing 10 weeks of hard work during the Qoom Creator Group. It was such an amazing experience for me and my mentors were so darn amazing and supportive!
Also, just in case, my final product looked like this:

I couldn't show you the fidgeting score haha because I was taking the screenshot and was feeling lazy to set a timer. :(

Feel free to mail me at swatilekha.roy4@gmail.com for any doubts or for feedback! I'll try my best to help you out.

Also, find my entire project LearnLily [here](https://swatilekharoy.qoom.space/~/LearnLily). This Speech detection model is just a part of it.

(and some shameless self promotion, but if you want to check out my portfolio, I would love to know your thoughts!)

Stay tuned and do not miss the next Qoom Creator Group cohort! It's a really unique learning experience.

A third of the world's food supply ends up being wasted - and 30% to 50% of this waste comes from our own kitchens. Landfills teeming with abandoned fruit, grass clippings, and vegetables are a common sight in today’s world.

A solution? Composting. It’s the process of using decomposing food or yard waste to create fertile, rich soil. It’s also a viable way to prevent household food scraps and yard waste from heading to landfills, where they often contribute to rising global temperatures.

The problem is that many people don't know how to compost or don't know what food/yard waste items can be composted, leading to increased waste that could easily be repurposed.

Compostify, a web app I created using Qoom, aims to address this issue by simplifying the process of composting at home.

Compostability Estimate Tool

One of the main features of Compostify is its Compostability Estimate Tool. The tool helps clarify which items can be composted and which can’t be. It can be handy for figuring out what food items can and can’t be composted, especially since many people don’t know that foods like meat, dairy, and garlic are not recommended for compost.

To use the Estimation Tool, the user simply needs to activate it through the website and turn on their webcam.

The user would hold up an item (like a sticky note or banana peel) directly in front of their webcam. The tool would then provide an estimate of how compostable and how non-compostable that item is, on a scale of 0.0-1.0. These estimates could help the user make informed decisions about which items they want to put in their compost, versus which items they should put in the trash.

To create the Estimation tool, I trained an image model using Google's Teachable Machine (GTM). I used the GTM to assign various images of food and household items to two categories - “Compostable” and “Non-compostable”. This included images of compostable items like an apple core, a leftover red pepper piece, garden weeds, an unused kitchen paper towel; and images of non-compostable items like meat, a piece of cheese, a garlic bulb, and a piece of plastic wrap.

The GTM then generated JavaScript and JSON files containing the image model data, which I transferred over to my Qoom project.

In the future, I hope to make my GTM image model more accurate by training it with more varied images of compostable and non-compostable items. Including images with different backgrounds (i.e. some with neutral black/white backgrounds, others with natural backgrounds) & allowing the user to upload images to the tool are also changes I hope to work on.

Progress Tracker

Another Compostify feature is the Progress Tracker, which serves as a simple diary for users to keep track of their composting progress. It provides input fields and corresponding prompts such as “what food waste have you collected so far” and “how much of your compost has decomposed so far”. Users can submit entries to the Tracker, which will then show up on the page. They can also easily delete any of the entries they’ve submitted.

Through the process of creating this feature, I expand on my knowledge of JavaScript basics such as the async/await function pattern, arrays, and for-each loops. I also learned about Mustache Templating for the first time and how it is used to dynamically generate information onto a website page.

To improve the Progress Tracker feature, I plan to add a functionality that allows users to edit entries they’ve already submitted. Additionally, I hope to add timestamps to the page that inform the user of when they last added an entry to the Progress Tracker.

Resources Page

The last core feature of Compostify is its Resource Page, which includes links to informative videos, articles, infographics, and a Garden Hotline number. Collectively, these resources explain various aspects of the composting process, such as how to set up composting systems or bins and how to use compost to enrich garden soil.

Although my Resource Page is static at the moment, I aim to make it more dynamic by allowing the user to filter out what resources they’re looking for, through a CTRL-F-like search functionality.

I hope this article inspired you to check out Compostify and start improving your composting game at home. Remember: it’s never too late to start composting your food and yard waste and creating a little bit of impact each day. The planet will thank you for your efforts!

I had the idea for FlixFam in my head for a while now. I took inspiration from GoodReads, which is a platform where you can keep track of books you've read, share them with friends, and also discover new titles. I wanted to create something similar but for movies and tv shows.

Before I started this project, I was already familiar with HTML and CSS. I did not know how to use a database to keep our users' data. For FlixFam, I chose to use the Qoom database, which was such a relief for me as it was simple to use. I had to learn how to integrate my new knowledge with my previous skills.

FlixFam is definitely still in the works. Even though the Creator Group is completed, FlixFam is a part of my future works. There is still much to be done, but I'm glad I took the step in creating a platform I truly believe in.

You can try FlixFam here.

Thank you for this amazing experience.

Supasinee.

Hello, my name is Reeva Khokhar and for the Summer 2021 Cohort I worked with Cyra Alesha to create a web application called Intera.

What was the inspiration behind Intera?

Due to the Coronavirus Pandemic the job market had become very competitive which made it necessary for all candidates applying to jobs to be on the top of their game in their interviews. Keeping in mind, the competition in the job industry I did some research to find out what exactly made the difference when candidates gave their interviews. During my research I discovered that nearly 50% of applicants do not do well in their interview because of their lack of preparation. This inspired me to create Intera to provide a platform for people to easily prepare for their interviews.

What is Intera?

Intera is a cost-free solution to landing your dream job. It revolutionizes the job & internship preparation process through its various sets of interview questions and live interview feedback feature.

How we made Intera:

We built Intera's website using HTML, CSS, and JS and we made Intera's live interview features using machine learning, speech-to-text, and text-to-speech recognition.

How Qoom helped me make Intera:

Qoom was a great help while creating Intera! Using Qoom, I was easily able to collaborate with my partner on the same editor even though we were in two different countries. Additionally, Qoom's editor made it extremely for us to create our web application by keeping everything on the same web page. I hope to further develop Intera in the near future and I strongly recommend using Qoom for your web development projects.

Here is a link to Intera's website: https://alertwhale94.qoom.space/edit/Intera/index.html

Qoom's new database update comes with full tutorials and code snippets that open up way more awesome possibilities for coding projects! Perhaps an "editing information" section? That's exactly what we did with our project,  using Qoom's user authentication database system.

The HTML

First, we formatted the information using HTML and curly brackets to get and the data (username, email, and password) from the database. We also created a default profile picture and an option to upload a new profile picture. We used local storage to make and save changes to the profile pictures, and in the future we hope to integrate this feature into Qoom's authentication database as well!

Using the Javascript Snippets

Qoom recently added Javascript and HTML code to the database features, making it easier than ever for Qoom users to navigate the database in their projects.

async function editEmail() {
	//getting input value
	const username = document.getElementById("edit-email")
		.value;
	const data = { username };
	if (!username) {
		alert("Please enter a new email to change.");
	} else {
		const resp = await fetch('/~/spring2021/cranial-check/account/profile', {
			method: 'PATCH',
			headers: { 'Content-Type': 'application/json' },
			body: JSON.stringify(data)
		})

		const ans = await resp.json();
		window.location.reload();
	}
}

}

For example, this function was from Qoom's code snippets, it was altered from the template to change the value in the email input to whatever the user wants to edit it to, and save it to name="email" in the authentication database. While this function has some additions to it, like input verification, most of it was easily created to make editing email information easy for the user. The functions to change the name and password also look similar.

Using Local Storage

Getting a value from file inputs in order to edit the profile picture section was proving to be a bit difficult, so we decided to find an alternative and use local storage to save and change images. Though that means that profile pictures depend on computers rather than Cranial Check accounts, it was still a good learning experience.

function showImg(input) {
	if (input.files && input.files[0]) {
		var reader = new FileReader();

		reader.onload = function (e) {
			$('#pfp')
				.attr('src', e.target.result);
		};

		reader.readAsDataURL(input.files[0]);
	}
}
//saving image to local storage
function saveImg() {
	const picture = document.querySelector("#picture")
		.files[0]
	console.log(picture); //shows files list in console --> mmust convert into data url to use in local storage
	const reader = new FileReader(); //instance that will actually convert the file into a data url string
	//wait for load event to retrieve result (data url as a string)
	reader.addEventListener("load", () => {
		console.log(reader.result); //result belongs to File Reader instance
		//there's a limit on data url size from image so we use try and catch in case it's too big
		try {
			localStorage.setItem("recent-profile", reader.result); //key:value stored on local storage (go to dev tools --> applications --> local storage)
			window.location.reload();
		} catch (e) {
			alert("Image is too big, upload a new one");
		}
	});
	reader.readAsDataURL(picture);
}

We used the above code to create separate functions to take a file input and create a data url string that can be saved in an object in local storage (key = "recent-profile", value = data url). We then got this value and displayed it onto the profile element (if there was no item in local storage yet it showed a default icon). To change and save a new image, we created separate functions to change the src of the profile image into the uploaded image string and tested for size before saving it to the object in local storage.

Final Look

This is the second cohort we are working on our project, and we made many small feature improvements like this one that made our product more consistent and user-friendly. Thanks to Qoom's easy tutorials, we learned more about how databases work and easily further integrated the authentication system into our project.

There are times when you want to bike around in your city but don’t have someone you can go with. However, staying fit is super essential especially considering the sedentary lifestyle we have all been living. In such times, we thought of creating a web app that would help people meet in their city with whom they could cycle with. The customer base would be everyone above the age of 16.

Pedal Mates lets you select the city you live in. Then, select the route and time you wish to go cycling. (Some common routes are shown as available for each city).

Pedal Mates then connects you to a person with a similar route and time and lets you chat and discuss any other little details you wish to. That’s it! Meet the person and cycle ahead!

The first step was using Figma to create the design. In around a week, the design of the whole web app was ready. Collaborating on Figma was very easy and went smoothly. The next step was to convert it into HTML, CSS, JavaScript. Figma’s inbuilt tools helped a lot in which.

For the database, we employed Qoom Database and Qoom Login System. Collaborating online was good; however, discussing ideas was a bit of a task as done remotely. However, time passed, and we kept working on it.

We came across problems we Googled or took help in office hours, while others we knew, we took the support of each other. So, although we could not wholly deliver what we intended, we learned a lot by employing different things and connecting them.

One drawback of Pedal Mates, though, is that there are fixed routes for each city. Employing live location would have been trade with battery life to our users, and there are rarely times when our app users would switch on site all the time to detect other riders nearby. Therefore, we have kept it as a planned cycle trips finder to make it smoother for the development and the user side. Also, keeping fixed routes make it more designed rather than on the spot finding people.

For the future, we are planning to create a request page, where people can request other routes which they feel are used in the city. Other updates in our minds include selecting the gender of the rider you are looking for, age, etc. Chatting with riders you have already ridden is another pursuit.

Here is the link to the website Pedal Mates.
https://isha.qoom.space/~/Pedal_Mates

In this cohort, I continued working on Diarywise again. Since I worked on the website again, I got to improve many things on the website. Such as the user interface, adding new features, adding more themes, and making everything look more sophisticated and beautiful. When you keep working on a project again, you can improve your prototype and make it look and function more efficiently. Diarywise was not fully functional or looked beautiful when I first created it in the last cohort. But after I worked on it again I improved plenty of things. I applied everything I learned in the last cohort to my project. That gave out a great result and now Diarywise looks nice and it also has some new cool features to it.

A challenge that I ran into in the last cohort was that I couldn’t make the diary entries to be there permanently. That made the diary entries disappear after the user refreshed the page. But, in this cohort, I learned a lot about making the user's work to be saved permanently even if the user refreshed the page. They can always come back and look at their entries and even edit them if the user wants to. Additionally, when the user saves their diary entry, they are not just saving what they wrote but also saving the styles that they added while writing the diary entry. For example, if the user wants the text color to be yellow, font size to be 35, and the font family to be Georgia and then saves their work. It will automatically save. One challenge that I overcame this cohort was making the diary entry and its styles to be saved permanently.

Therefore, I learned many new things and applied my old skills to make Diarywise look even better than before. It is now fully functioning and also looks beautiful. I worked on Diarywise again for this cohort which made the website look more improved and complete. Even though I ran into some challenges while making Diarywise I learned a lot from my challenges and eventually solved them too. Diarywise is even better than before because I worked on it and made it look and work better than before.

Diarywise Website Link:

https://www.enviremadstar.com/~/DiaryCreatorGroupProject/index

Introduction:

Welcome back! We’re Maya and Gavneet AKA Mayneet. We first joined the Qoom Creator Club back in April of 2021 for the spring cohort. We had such a great time creating our first project, we came back for the summer cohort to create our second project together, Mood-E. We returned to the summer cohort with more experience in HTML, CSS and JS, therefore allowing us to focus more on our UI design using Figma while learning and implementing the Qoom database.

Check Mood-E here! https://grandkiwi77.qoom.space/~/moode

Our Inspiration:

Like AREA (our previous project), we wanted to create something which we personally could use on a daily basis. We also wanted to create something that could benefit our users and support them during this pandemic.

We drew inspiration from apps/websites that let you do the separate things that our webpage offers! We thought that by putting these features all on the same website, it’d make for a very beneficial and user friendly website.

A Brief Look At The Process:

Week 1:

• creating our design using Figma (for the first time!)
• creating our tabs, logo, and using CSS to design our pages
  

Week 2:

• implemented login and signup pages using the QOOM database
• designed the boxes, links and buttons
  

Week 3-5:

• made all of our pages with widgets
• styling each page specific to the widget that is on it

Week 6-8:

• implementing the QOOM database to store and redisplay the users input using save buttons with the help of our mentors at QOOM
• published our webpage!
  

Qoom Database

Using the database was the most challenging but easily the most rewarding aspect of our project. We were able to save each journal entry, mood of the day, water intake for each day and habits for each month using the Qoom user account database. Our journal + mood is saved together on one database, which is something we want to make a future improvement on - where we want to separate all the future journal entries under the date (Aug 27, 28, 29, etc). Our water tracker is saved each day, this is a super neat feature as when the clock strikes 12, the tracker resets and a new database is created simply by pressing the save button. Next the database for our habit tracker saves the habit + the number of days the habit has been maintained each month! We had no experience using databases up until this project so we’re glad we got to learn about it through creating Mood-E!

Final Thoughts

Just like our first time, our experience during this cohort was amazing! We met new creators and our mentors were so patient and helpful. We truly couldn’t have done it without them. As for the future, both of us hope to work together on some projects in University, outside of the Qoom Creator Group, while still, of course, using the Qoom software.

MaskUp is a web app that features both live and group mask detection, along with statistics describing daily detection rate. Here are some of MaskUp's features:

Live Mask Detection

MaskUp features live mask detection powered by Google's Teachable Machine. This ML model was trained with 938 images from Kaggle.

Live Detection Statistics

Live detection statistics allows users to see a visualization of mask / no mask trends over time. Hovering over a data point shows you the exact value for that point.

Live Covid-19 Cases

Using the Covid-19 API, the homepage of MaskUp automatically fetches the lastest number of cases and deaths, keeping people both informed and healthy!

Vaccine Locator

MaskUp's vaccine locator allows individuals to find a vaccine near them, allowing everyone to stay safe!

Group Mask Detection

Upload multiple pictures (with as many people in each), and you will be provided with a summary of each of their mask status. Users are also able to export group mask detection stats to a .csv file, for further analysis.

Handwashing reminders

Constantly forgetting to wash your hands? Sign up for texts to wash your hands every two hours!

Symptom Tracker

Simply fill out a form, checking for which symptoms you are feeling, and MaskUp will tell you the percentage of being dangerous to others!

Symptom Results

Check the results page to see a visualization of your past symptom responses, and which symptoms are affecting you the most. Users ca also export this to a .csv file for further analysis.

Why this project is useful 📈

187 million: the number of Covid-19 cases thus far. With Covid cases spiking because of the delta variant, masks are still essential for helping all of us stay safe, regardless of vaccination status.

As a result, MaskUp was created. With live and group mask detection, MaskUp could be used in public spaces worldwide in order to only allow entry to those who are wearing a face mask.

Whenever MaskUp detects that a user has a mask on, a webhook is sent to a custom URL, which could be used to open a door or gate.

This not only keeps us safe, but also helps flatten the novel coronavirus curve.

• Symptom reports are able to be exported and sent to medical providers.
• Covid data visualizations help data scientists see the progress of Covid-19.

How we built this 🔨

• NodeJS
• NPM Packages (Jimp, Twilio)
• Google Teachable Machine
• Qoom database
• Covid-19 API
• Web Dev (HTML, CSS, Vanilla JS, Bootstrap)

Key lesssons that we learned 📚

• Doing what we are good at: MaskUp was our first time working together with a teammate to create a web application. This helped us both learn how to allow each person to complete the part of the project that they were stronger in. For example, Ganning is a better backend developer, so he focused on the NodeJS and Vanilla JS part of the project, while Elise helped design and prototype MaskUp on Figma.
• Login Systems: Using Qoom's account database to create MaskUp's login system showed us the true power of databases: the ability to store multi-session data about a user.
• NodeJS: MaskUp's group detection was created using NodeJS and Azure functions. Since I was completely new to JavaScript in general a few months ago, I've learned a ton by using NodeJS in a real web app.
• Writing maintainable code: During one of the creator meetings, Jared said that writing readable and maintainable code is one of the most important aspects of coding. This way, other programmers can easily read your code and contribute to it!

Accomplishments that we are proud of ⭐

• Getting the group mask detection working using NodeJS, Azure functions, and Jimp (npm package).
• Being able to show data visualizations. This was my first time working with charts and graphs outside of Google Sheets and Microsoft Excel.
• Using the Qoom login system. I've never used a database storage system prior to this, and I implemented MaskUp's login system using Qoom's Account Database.
• Doing live mask detection with Google Teachable Machine. Though it may seem simple, I never knew that machine learning could be done without knowing complex ml libraries such as tensorflow or keras. Google Teachable Machine will definitely be a resource that I will use in the future.

What is next for this project 📱

In the future, MaskUp could be turned into a mobile app. A MaskUp app not only makes mask detection more convenient, but also eliminates techincal differences between computers. For example, some computers don't have a webcam, preventing users from utilizing MaskUp's live detection feature.

The journey of creating QoomBoard, as being a part of the Qoom Creator Group with Leyna and Liya.

                                            ______________________

The time I had joined a new group with entirely new people I’ve never met before. We had no high expectations for each other except for sharing one goal: finishing the project before the deadline. The project consisted of many parts that had to be split among the group, so we started with a shared Google document. Time was short and it was the most efficient answer at the moment. We spent hours planning, coding, and reviewing the project for straight hours and barely getting the rest we needed. Thus, inspired our project Qoomboard.

Qoomboard is inspired by the combination of Kanban Boards (Trello) and various productivity platforms. Qoombaord is a collaborative productivity platform for a team of developers to optimize their time spent on coding. Many developers go through the struggle of working straight hours, without taking a break, which does more harm than good. Qoomboard has two key features: the collaborative Kanban Board to keep track of tasks assigned to each member in a more organized way and a pomodoro timer that helps keep an individual stay on track, maximizing their focus during pomodoro mode and providing a break, when necessary.

One of the biggest struggles we encountered while working with our project was working with the kanban board and being able to add cards, while being able to save it within the user’s account. For weeks, the cards would show up in the wrong category or they would disappear after the page was refreshed. Only the board and editing the cards was functioning at the moment and we would have to adjust small changes each week. After the introduction of Qoom’s databases during the tech talk, we found the solution to our problem.

The Account Database system, provided by Qoom, was the everything we needed to have our kanban board to start functioning fully. The combination of using the database and JavaScript Plugin that interfaced with the database (plus the help of Qoom office hours!), allowed the kanban function the way we wanted with the interchangeable cards to assign each member and which category it belonged to. In addition, the data was able to be saved to its assigned account the user has logged into, allowing them or their teammates to continue their progress anytime.

Check out Qoomboard!:

Introduction: Hello! Our names are John and Evan and we have now completed two sessions of the Qoom creator group. During our first session in the winter we created our first game 'Space Race' and an account system using Javascript, HTML5 and CSS. During our second session this summer we expanded our original project to include two additional games 'HOT!' and 'Zapped', as well as creating a shop page where users can purchase cosmetics using a currency earned through playing our games called 'Space Dollars'.

Our Inspiration: The inspiration for our original game 'Space Race' came from the classic Atari arcade game with the same name. Our other games 'HOT!' and 'Zapped' however, are completely original ideas for which we had no inspiration for.

Notable Features: There are several features of our arcade that we think makes it stand out and different from other web based games.

The first of which being a 'News' page, which is basically a page on the start screen where we updated players on the progress of the development of our project through the summer. What made us do this was that whenever we played other games, we always thought it was a nice touch when the developers would keep the players in the loop in terms of development or upcoming new features. This 'News' page also served as a record of our progression which helped for giving our weekly update at our Qoom Creator Group meetings.

Another feature of our arcade that we think will make players want to keep on returning to our game is the 'Shop' page. Having a currency that players can earn through playing and then spend on a shop is a sure-fire way to make sure people will keep playing your game because they are incentivized by the items in the shop.

Finally, a feature that we think makes the games themselves more fun is how it gets progressively more difficult the higher your score. The code for this can be seen below. In our 'Space Race' game for example, the higher your score, the higher the number of space debris will spawn and the faster these debris will be moving. We think this makes the games more exciting and that it adds an increasing amount of intensity as your score gets higher.

Final Thoughts:

We've both always been really into video games, so the chance to create one was a really fun experience that gave us a new sense of respect for game developers.

Check out our project here:

https://easytrain70.qoom.space/~/projects/Space_Arcade

Finding a problem is similar to what songwriters feel when writing a song.  Songwriters tend to write what they're passionate about either from personal experience or from what they think others' perspective is. The same goes for finding a problem, think about anything you have struggled with or seen people struggle with. Make a list of all those struggles you have seen. After listing you should research each problem. See if the problem is already being addressed and how. Look for the people who will be impacted by your project.

Brainstorming a solution -

When brainstorming solutions, think of what you would like to have if you had that problem. You can also ask people who have that problem what kind of solution would help them. However, make sure that your idea is unique and if it isn’t, what additional features would make it unique. For example, there are many to-do list apps out there, but you might decide to make a to-do list app that also has a feature for assigning tasks to teammates. This will help it stand out from other apps and be more useful.

To help students keep track of their volunteer hours, we brainstormed a volunteer hours tracker so students can easily add their volunteer hours to a table. We decided that students would need to input the organization, tasks completed, date, entrance hour, and departure hour. We also decided to include a spot for uploading a signature and a canvas for an organizer to sign off on the volunteer hours. Originally, we also wanted to add features for finding volunteer opportunities and communicating with other volunteers, but we ended up deciding to simplify it to just the volunteer hours tracker since that is the most useful and unique feature.

Designing a Wireframe-

Wireframes are commonly used to lay out the content and functionality of the website. It gives you a clear idea of what you or your team is looking for. They’re immensely essential in the early development process since they serve as a guide when you start coding your project. Some popular websites that can help you create a wireframe are using Figma, Canva, and Invision Studio.

A big issue you should consider is not overdoing your wireframe. What we mean by that is to cut down to only 1 or 2 features. Doing wireframes is way easier than coding the project. For example, if you’re competing on a hackathon and overdid your wireframe, there’s a high chance you will not be able to complete everything. This concept is known as identifying your MVP (Minimum Viable Product). MVP is a development technique in which a product is introduced with basic features, but enough to get the attention of the consumers. You can identify your MVP by reanalyzing your problem and thinking about what feature will best solve your problem.

Using Qoom’s Database system -

A database is a structure that holds, you guessed it, data. Qoom has both an account database that you have to log in to use and an open database that anyone can access. Since volunteer hours belong to only one person, we used an account database to connect the volunteer hours to the user. In our database, we stored the organization, tasks completed, date, entrance hour, departure hour, signature, and certificate from the form that the user would fill out. We displayed the user’s data in a table and added buttons for editing and deleting hours. There were some difficulties in displaying thumbnails for the signature and certificate as well as editing and deleting hours since we were unfamiliar with Qoom’s database system but we were able to solve them with help. When using a database system or other framework that you are not familiar with, try to ask others for help or research online for solutions to your problem.

Amelia and Grace built a volunteer hour management system, Volunteerly. Check this link! https://shrillcalf71.qoom.space/~/Volunteerly/index

Do you ever want to implement speech to text? This cool feature holds an unlimited possibility. From voice commands, quick writing tool, to helping people who struggle with writing. You can implement this feature in your next Qoom website with just  3 simple steps! Ready? Here we go:

Create a new HTML, CSS, Javascript Project

Open your Qoom Coding Space and select "New Project", this will automatically create a new HTML, CSS, and JS project all in your browser!

Write the HTML Code for the buttons and result

<main>
	   <!-- Result is the output of the speech to text -->
       <div id="result"></div>
       
       <!-- To set up the start recording button -->
       <div class="buttons">
       <button id="button" class="startbutton">Start Recording</button
       </div>
       
       <!-- Error Message -->
       <p id="message" hidden aria-hidden="true">
        Your browser doesn't support Speech Recognition. Sorry.
       </p>
       </div>
</main>

Enter the following code in your HTML File. The div "result" is the container for the output of the speech to text, the button to start the recording, and lastly an error message for browsers that don't support Speech Recognition!

Use Webkit Speech Recognizer

This is one of the easiest speech to text to implement, and its 100% free! All you need to do is add this set of codes in your javascript file, or in your HTML file in between <script></script>.

window.addEventListener("DOMContentLoaded", () => {
        const button = document.getElementById("button");
        const result = document.getElementById("result");
        const main = document.getElementsByTagName("main")[0];
        let listening = false;
        const SpeechRecognition =
          window.SpeechRecognition || window.webkitSpeechRecognition;
        if (typeof SpeechRecognition !== "undefined") {
          const recognition = new SpeechRecognition();

          const stop = () => {
            main.classList.remove("speaking");
            recognition.stop();
            button.textContent = "Start listening";
            clearInterval(countWpm);
          };

          const start = () => {
            main.classList.add("speaking");
            recognition.start();
            button.textContent = "Stop listening";
            setInterval(countWpm, 10000);
          };

          const onResult = event => {
            result.innerHTML = "";
            for (const res of event.results) {
              const text = document.createTextNode(res[0].transcript);
              const p = document.createElement("p");
              p.id = 'speechResult'
              if (res.isFinal) {
                p.classList.add("final");
              }
              p.appendChild(text);
              result.appendChild(p);
            }
          };
          recognition.continuous = true;
          recognition.interimResults = true;
          recognition.addEventListener("result", onResult);
          button.addEventListener("click", event => {
            listening ? stop() : start();
            listening = !listening;
          });
        } else {
          button.remove();
          const message = document.getElementById("message");
          message.removeAttribute("hidden");
          message.setAttribute("aria-hidden", "false");
        }
      });

Its pretty self explanatory, so feel free to read the code to understand about the webkit more and improve it by adding your own twist!

(Optional) Style your buttons and Output

If you haven't style your buttons it might look something like this.

Boring right, and its extremely small. So emerge your creativity and style it up! For example this is one of the projects you can do with text to speech.

Hopefully this short tutorial can help you to include a fun feature in your next project!