Hi, I'm Joy Real

a graphic artist and a web designer based in Montreal.
I am also a visual storyteller helping startups raise funding.


Project #1 The Weather Dashboard

This single page application shows the current weather of Montreal.
It also shows the forecast for the next few hours.

Montreal-weather
Montreal-weather

User Story

1. User can view the current weather of Montreal and the hourly forecast in one page.

2. Weather icon will change depending on weather conditions.

Design

I want to make things simple, so I decided to show only the most important details like the temperature in celcius, date, time, wind speed, max and min temperature of the current weather.

API

Although there are many good weather API options for developers, I decided to use the OpenWeatherMap API in this project because it is easy to use, free, and stable.

Github Repo

github.com/joyreal328/weather_dashboard

Project #2 The Simple To Do List

This is a single page app that allows users to create
a list of tasks that need to be completed in a day.

Montreal-weather
Montreal-weather

User Story

1. User can type his/her tasks for the day on the input box.

2. User can edit, delete, and update the individual tasks.

3. User can also categorize and organize the list of task by clicking on the "active" and "completed" buttons.

Design

I want the page to look "minimalist" and not decluttered. The design is very easy to use and navigate. The double click function to edit each item makes it more easier for the users.

Technology

I used Vue.js framework and Unsplash API for the background image.

Github Repo

github.com/joyreal328/todolist


Project #3 Voice Driven Quotes App

This is single page app replies random quotes to users.

Montreal-weather
Montreal-weather

User Story

1. User can press a button to trigger the voice recognition capability of Google Chrome.

2. User can say words like "random" or "oprah"

Design and Challenges

The design is very easy to use and navigate. There is also an instruction at the header area.

For now, this SPA can only run using Google Chrome.

Technology Used

This a vanilla JS app. For the background image, I use the Unsplash API. For the random quotes, I used AdviceSlip.com API.

Github Repo

github.com/joyreal328/gimmequotes

Looking for UI Designs?