Premade.io: OOUX, URL Structure, and Basic Functions in Redux

Samantha Zhang
Jun 9, 2016 · 3 min read

Slowly making progress in re-thinking and re-writing Premade.io in React / Redux framework.

Image for post
Image for post
Photo by Sebastian Molinares via https://unsplash.com/photos/VcRbMldAFU8

This is the 5th project update on my journey developing Premade.io and taking the One Side Project challenge. You can find my previous posts here.


Don’t be confused by the title, it’s still a slow month. I felt I was moving incredibly slow in React / Redux things. But with a little bit self discipline, I did make some progress this month.

Reorganizing the App Functions using Object-Oriented UX Framework

Not long ago, I went across OOUX: A Foundation for Interaction Design on A List Apart. It’s one of the cleanest ways to organize models and core functions of an app I know.

So I spent some time and reorganized the Premade.io models in that framework:

Image for post
Image for post
Created on http://listhings.com/

As expected, it worked pretty well as a quick reference doc through out the development process.

URL Structure

Similarly, I put a little thought into the URL structure, too. Now that I’m adding a whole user admin page to the project, the URLs become a little bit more complex.

Notice that I wasn’t even using static URL in the previous structure.

Basic Functions

Moving on, I implemented the basic functions (add, edit, delete, get) of theme, type, and block model. I also made the relationship amongst those models work:

Image for post
Image for post
Image for post
Image for post
Image for post
Image for post

It’s bare minimum functions for now. I haven’t made any changes to the CSS yet, but it’s working.

Next Steps

In June, the goal will be to re-create the drag and drop interface, add back the CSS, and hopefully finally launch to public. Finger crossed!


Give this article a 💚recommend if you enjoy it. Follow One Side Project Challenge for my future updates and other inspiring side projects.

One Side Project Challenge

50+ Maker-writers each making one side project in the year…

Samantha Zhang

Written by

Design Lead @GraphiqHQ. Writer @alistapart and @TutsPlusCode. Product maker. Data nerd. Side project ninja. More at http://samanthaz.me and @moyicat.

One Side Project Challenge

50+ Maker-writers each making one side project in the year 2016 and give monthly updates to share their process and experiences.

Samantha Zhang

Written by

Design Lead @GraphiqHQ. Writer @alistapart and @TutsPlusCode. Product maker. Data nerd. Side project ninja. More at http://samanthaz.me and @moyicat.

One Side Project Challenge

50+ Maker-writers each making one side project in the year 2016 and give monthly updates to share their process and experiences.

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store