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

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

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.

Previous URLs

premade.io/             Landing page
premade.io/#/new Add a new page
premade.io/#/build/:id Edit blocks of a page
premade.io/#/edit/:id Edit content of a page
premade.io/#/page/:id View a page

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

New URLs

premade.io/                 Landing page
premade.io/about About page
... Potentially more info pages
premade.io/api/themes/ Get all themes data
premade.io/api/theme/:id Get one theme data
... Same thing for types, blocks, and pages
premade.io/login Login
premade.io/logout Logout
premade.io/user User admin welcome page
premade.io/user/themes Themes list
premade.io/user/theme Add a theme
premade.io/user/theme/:id Edit / delete a theme
... Same thing for types and blocks
premade.io/new Add a new page
premade.io/build/:id Edit blocks of a page
premade.io/edit/:id Edit content of a page
premade.io/page/:id View a page

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

Christian. Help people understand data with design. Get an email when I write new articles: http://eepurl.com/g-LENj · My portfolio: http://samanthaz.me/

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

Christian. Help people understand data with design. Get an email when I write new articles: http://eepurl.com/g-LENj · My portfolio: http://samanthaz.me/

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