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

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

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:

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.

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:

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.