HOLDUP – React Final // Konrad Krawczyk

HOLDUP

Reactive User Interfaces final by Konrad Krawczyk

an app that predicts flight delays for domestic flights in the US

tech stack: Python, sklearn (neural network), Flask (API), React (front end)

design tools: Figma

repo: https://github.com/krawc/holdup

  1. improving the model
  2. deploying as an API
  3. designing UI wireframes
  4. developing the React front end

Step 1. improving the model

BTW: I have the documentation of our final from last semester. [HERE]

For this part, my goal was to create a function that would get my six variables and output a result – either 0 or 1, ideally with a higher accuracy than last time I used the app.

Flight delays are very complex events, almost comparably to stock exchange or weather. There are certainly patterns with delays – for example, during Christmas there are always delays, certain high-traffic or underinvested airports are having delayed flights often. I tried improving the algorithm before proceeding to “pickle” and deploy the model. This, however, did not happen because of the time constraints. I could try to tweak parameters like layer sizes, or to add totally new features like weather – but training a neural network with this amount of data takes around 40 minutes each time, and I wanted to focus on other, more front-end-oriented features of the app instead.

What took me an extraordinary amount of time was making sense of the data I had. I wrongly recalled that it is possible to input around 6-8 variables and receive anything that makes sense. But no! The data was modified to fit into the sklearn package for data modelling. This meant that I could not input strings, and instead each of the over 220 airports listed in the database had to be converted into a 0-1 variable (the so-called dummy variable). And these were unlabelled, meaning that all I could see in our data was a set of nondescript zeroes and ones. I had to regenerate this dataset with labelled data, and make sure that the accuracies in the testing phase are the same. I spend some quality time doing that, and in the meantime I looked through docs related to deploying Python apps in React. There have also been some issues with data formats – for example one of the packages I used had its own special DataFrame format, and then I had to figure out whether my model accepts it. It didn’t, and I had to convert to matrices.

step 2. deploying as an API

I found this guide on the Internet – and followed all of it: https://www.analyticsvidhya.com/blog/2017/09/machine-learning-models-as-apis-using-flask/

Halfway through, I realised I don’t know how to save a model. The answer turned out to be the pickle library. It trains and tests the model, and then returns a “pickle” file that can be used to speed up the use of the app. Generating it was fairly easy. But the input still had to be sklearn-friendly, consisting of around 250 variables. What I did was: I got the names of all airports used, put them in an array, and then looped over that array to creat the 0-1 variables based on the name from the input. (basically, If input is XYZ, is_airport_XYZ = 1.).

First, I tried to convert the code into an API by myself. But then I reminded myself that I know nothing about back end, so I reached out for a nice Flask API boilerplate. It’s here: https://github.com/smitthakkar96/flask-restful-boilerplate. It had a nice structure, where all the code responsible for specific requests was in one controller file called helloController.

My other struggle was that I worked mostly inside the Anaconda framework – which handles all the packages by itself. It only turned out after the deployment hat I had to manually install all of them.

But then, I ran into some issues when I was deploying to Heroku. Namely, the CORS error happened. I couldn’t make a request from my own IP, as it was “unsafe”. I had to edit the api.py file to add headers that would allow all domains to access. I am not sure if this is exactly safe, but there is little at stake in this case, and I really wanted to move on to the front end.

step 3. UX

For the wireframes I used a great tool I found called Figma. It’s a vector graphics editor similar to Sketch, where one can easily create layouts for specific devices, and also share them in the cloud and collaborate on them. It’s also free for individual users. Anyway. I tried to make the interface a simple set of direct questions to the user. Instead of just making one form, I decided to put each one field on a separate view. The form is simple, so in order to fill the empty space and to make the interface more interesting and informative I made a simple vector graphic that showed an airplane departing, flying and arriving. I also left some empty space to account for the mobile touch keyboards.

At the last stage, I prepared an infographic that would show if the user was curious about our model. I thought that since we know our model is far from perfect, there needs to at least be an indication of that if we are to be honest with our users.  I thought: what if one day people start using this model, and they rely on it, and it gets some airlines in trouble even though they shouldn’t be? I think a big part of the problem with the models right now is that their authors are embarrassed to acknowledge that they might be really wrong.

step 4. React

First, I made a basic HTML form that would simply grab the data and return a result. This was really easy.

Then I tried to put each input into a separate view. I really wanted to avoid making the entire form one component, as it would mean putting four different screens on one entity. Following Rune’s advice, I split it into different components and played with the background-position parameter to move the sag background into the right position.

One of the big parts of the design was autosuggestion in the airport and airline fields. For the airports, it turned out that I have to manually make a list of every single airport I am using and the city or town it’s located in. This list is saved as this.state.airports. Took a bit of time, but that was necessary.

Another thing I wanted to implement was automatic suggestion in the input field itself. I accomplished that only by creating a separate text element that showed up underneath the input, which showed the already typed-in letters in black, and the rest of the suggestion in grey. This way, the input field itself is invisible.

On componentDidMount, I also added an autofocus to the input field. This was made much easier since I separated the input fields into components.

Finally, I realised that I don’t even need a form at all. Instead of sending the onSubmit form results, I passed the state (manipulated with onChange) to the API call. The rest was pretty straightforward – the API call was working, and on a specific state a result screen would show up.

Possible improvements:

I have a short list of things to improve:

  • When working with CSS transitions, the screens would often stack on top of one another, causing the layout to overflow. I solved it with a nasty hack that translates the previous slide to the top of the screen, therefore preventing it from wrapping to the next “line”. I have no idea how this would work if, for example, I added the option to move backwards.
  • Moving backwards, as well as restarting the whole process, is also something I need to implement. People will make mistakes, and they might want to use the app more than once without restarting it. For that I would need to add a restart function that would change all states to their default values.
  • Design details, especially after the app responds with a result. I wanted to make a little animation that would play along with the response, but it ended up being just one yellow screen. I agree with Kilian’s suggestion to make the “How do we know” button an actual button, or at least a link. And, the result screen is set as position: absolute, because I wanted it to be a fade-in, instead of slide from the right. Position absolute has no place here.

Otherwise, building an app that stands on its own was a really exhausting, but rewarding task. I might even try and make this thing in React Native, and release a version for Android.

R-UI Final

For the finals, I decided to make a personal blog for my brother. He actually approached me to ask if I could make a mock-up of a blog for him. I then thought, well, perhaps this could be my final’s project.

The main design inspiration came from looking at his class notes. I’m in several classes with him (surprise, he goes to NYU SH, too!) and he wouldn’t go to school without his yellow highlighter or a pen to highlight and underline his notes, so I figured I’d use highlighted texts as a part of the blog.

I think the biggest challenge of working on this is knowing not to make the page, especially the article page feel cluttered, but also not too bland or cold. I don’t think I’ve achieved that nice balance but I think I did okay in making it feel not as cluttered.

The link to the github page is:

https://github.com/tirzatirza14/Reactive-User-Interfaces/tree/master/finals-2%20

REACTIVE UI | Final Documentation | Habitree

Project Title: Habitree

Link to my Competitor Research: http://ima.nyu.sh/documentation/2018/04/10/final-project-competitor-research-user-stories-renewed/ 

Habitree is a mobile habit tracker app with a clear and useful categorization of habits and a creative stimulation system, realized by a combination of p5 and React. The main reason why I would like to build this app is that I found the lack of considerations for habit classification in existing habit tracker apps. Also, there’s a lack of stimulation system that can motivate the user to go on. Therefore, my app has two unique features to solve these problems. First, it divides habits into two categories, “daily seeds” and “long-term goals”. The user can even further specify their needs and target for different habits. Second, I embedded trees that visualize the progress of each habit. Every habit has its own tree!

For the design aspect, I chose a clean and clear layout, thinking that’s what productivity app should be like, efficiency 🙂

 

 

 

Reactive User Interfaces Final Documentation: Games Portfolio

Live Site: http://marinet.net

Github Repo: https://github.com/themaskedtaquito/themaskedtaquito.github.io/tree/master/portfolio

In general, I wanted to use this project, one that I will present to the world beyond the NYUSH community, to think harder about design than I have in the past, as it has always been one of my weaknesses. The two aspects that I focused in on were the presentation of information in relation to my target audience and the text styling and color. After doing research in online game development communities, I came to the conclusion that my number one goal should be to get the information that employers want to see in front of them as quickly and cleanly as possible. I believe this comes through best on the individual project page. The specs column clearly lays out an overview of the production, including what technologies I’m capable of using and my place within a team.

Additionally, I originally planned to only have my projects under the Games and Multimedia sections and the Home page reserved for my bio. However, I realized that would require extra clicks before my audience would actually be able to see my work and decided

My color choice was mostly inspired by trying to make the website more personal to me. While sleek black, grey, and blue designs look really nice, I think that green is a fun color that also pairs well with the colorful nature of my projects. On the pages themselves, I used the green mainly to differentiate titles vs details. Although I don’t know too much about different typefaces, I also tried to use sans-serif for the titles and serif for body text to further delineate and group information. I think that I’ve also improved upon lining up the margins of different divs, but I still need to work on how I limit and organize the white space on my site.

Another component to my project that I would like to mention is the process of getting my portfolio onto the web.

This was entirely new to me and I went through tons of tutorials on how to use A records, installing Node and other tech to my VPS, and setting up Nginx and config files. The only part of deploying a website that I was familiar with already was using Cyberduck to get the files from my computer to the server. It took me a few days to finally get everything set up, but it felt amazing once my website was actually online! Now that I know everything involved in deploying a website, I feel much more prepared for any web based project I do in the future. In fact, I would rank this knowledge as the most valuable thing I’ve learned during this course besides React itself.

Credits:

Image slider component: https://www.npmjs.com/package/react-responsive-carousel

Virtual Private Server: Digital Ocean

RUI – Final Documentation by Bruce

Main Menu

Filtered Category

Detailed view

Print Layout

Presentation

Repo

Online Demo

IMA is a unique major, and every IMA student is unique. As graduation is approaching, every senior is preparing their portfolio so that they could show their best to the world. However, the examples found on the Internet are usually more specific in one area.

For IMA students like me who are not sure what to do, but capable of doing a few different kinds of jobs, the portfolio design faces challenges similar to full-service advertising agencies that provide a large variety of works. This portfolio is also a React remake of my previous Vue.js version in order to compare what’s good and what’s bad of both frameworks.

Reactive User Interfaces | Final Project Documentation

 

Github Link

As I have talked about in my previous blog posts. I used React to make a blog that is catered to a personal project I’ve been working on. I design the layout of the site specifically basing on the mediums and content that I have created and the ones that I want to incorporate into the blog.

Leon’s paper prototyping workshop was really helpful in helping me figure out which contents that I want to put in and how I want to group these information.

Since I already have a visual style defined in my visual content, I want to reflect and amplify that in the entire site. A lot of my work are collages and I often feel frustrated with the template that most social media platforms provide, so in my own website I want to have the collages to be offset at the beginning and have my visitors drag things around and experience the process of putting the pieces into a whole. This process replicates my process of making the collages and emphasize the role of composition plays in my works.

Here is the sketch that I follow through my entire process of making the site. Not all of the features were accomplished due to the time constrain. I also tried to clean up the way I load draggable elements and make a component, however, I seems like the transform function of these functions would stop working if I do that. Also I want to spend more time on figuring out what is the best way to load data for my blog. I want to make sure that I can easily create and load new data into the blog while having the ability to customize animation, style and interaction. I will be looking into contentful shortly after the finals craziness.

I highly value the feedbacks that I get from the class. I am seriously considering Leon’s suggestion of putting the draggable mood board as the focus and concept of the entire site and I will consider adding P5 input into the mood board as well.

Amber//Reactive User Interfaces//Final – Digital Polaroid Storyboard

Project Codes can be found here!

Demo

User Story

1,  As a user, you can create different albums to collect different series of Polaroid pictures

2, As a user, you can rename these albums as the event/time/location and it will be saved as the uploading page

3,As a user, you are able to upload your digital copy of your Polaroid pictures from your local storage

4, As a user, you can drag and drop any of the pictures from your albums to create your preferred way to present your Polaroid pictures

Concept

I am personally a huge fan of Polaroid pictures, I have tons of them as my precious documentation of memory and experience. However, I suffer from bad Polaroid management. And I regretted so much once I lost one of my favorite Polaroid pictures. The same story happened to my friends as well. Polaroid as a specific type of photograph, due to its size, texture, and portability, it is highly likely to be lost.

Also, it is difficult to well-characterized them unless you intend to do so. Meanwhile, the digital albums do a great job in organizing imageries.

So my primary goal is to create a platform dedicated to keeping and organizing Polaroid pictures for myself to secure my special moments and also allow more creations within the platform.

Design Choices and Implementation Process

 

The original sketches from Adobe XD:

I revised my design a couple of times to make it consistent, I chose a cartoonish and hand-writing style to go with finally. It was meant to be more personal and colorful to myself. To be consistent involves concerns about fonts, font size, typography, visual assets…I realized my original version is mixing up a lot of styles. Also my midterm as well…

I think I got a little sense about the meaning of “say less about more” in UI design. And I wish to learn more about the design principles in the future.

I also learned using global CSS in index.js to initialize CSS properties and reusable components, which saves me a lot of time!

Reflection

I think the digital and analog photography does have a difference in terms of the tangibility and visual features of them.

And today’s critique really helped to extend my point of view on a digital platform of an analog photography. I wish to further incorporate the physicality of some of the key features of Polaroid pictures, including the special visual taste of Polaroid pictures, the aging color in time…to open up potentially more possibility and functionalities of my little lovely web application.

Finally!!!!! It was a great class!!!!! Thanks, Rune!!!!!

Mohos – Final Project Documentation

GitHub: https://github.com/mohosm/ReactiveUI/tree/master/Final%20Project

My final project is a react-based data visulaization/interactive documentary on the topic of Hungarian politics, that uses 28 years of parliamentary records to assess and inform about the career of the current Hungarian prime minister.

If I wanted to focus on barely the React.js part of my capstone (that I am submitting as my final), I’d say that I successfully took advantage of the basic react structure taught in the first half of this class, as well as many of the optional material from the second half.

The whole structure of the website is based on react router, and each page sources data from a json file. It also loads additional databases into the App, that it passes down to the appropriate Page. The underlying structure, as well as the additional components I used for visualizations have been in place from the beginning, although they have been modified and refined through the process in order to fit more with the data and the design and to be able to accomodate additional information without making the interactions harder.

To sum up, content and componentwise it has been a smooth sailing. I kept in mind my influiences, such as NYT’s High Rise documentary, but I strived to achieve an original, eclectic format that best suits my message and data. In that, I believe I was successful. Most of my user-testing was centered around design (funcionality-wise, for the most part I received assurance in most of my intial ideas, and only a little tweaking was needed), since in the beginning I did not have any clear ideas as for how to use colors and shapes in order to best fit my content. After rounds and rounds of tests and asking for opinions, I believe that I have managed to implement if not the best possible, but an adequate and passable design to my project.

Most of my possible next steps concern expansion of content, videos and visualization types. As far as strictly the react part, I am planning to revise and polish the list of contents, and tweak the typefaces in a non-significant way. Refining my CSS-transitions is also a considerable possibility.

Hopefully some of those steps will have been made by the time I submit my capstone documentation, but I believe that the project in its current form satisfies every requirement for the assignment for this class.