Envision. Design. Code.

My planner

Creating a tool to plan my life and learn ReactJS

Role:
UX designer & web developer
Team:
of 1
Skills:
UX/UI Design
Tools:
HTML5, CSS3, ReactJS, JSX

About my planner

The number of tools coming to the market with the promise to improve our lives by solving a specific problem in a new or better way has boomed. I use multiple tools for specific goals but have found it hard to create a seamless workflow that integrate them all. If I could create one app, that would be the master of all, what would be its main goals?

  1. Be able to focus and plan for now but easily switch to the big picture.
  2. Keep track of my time, money and relationships with people.
  3. Have a visual representation of now, the future and how they affect each other.

I had learning ReactJS on my backlog and like working on a project while learning a new language/framework/library so building my ideal planner in ReactJS was the perfect project.

Design and development approach

A list of organized features, my experience in HTML5, CSS3, JS and the ReactJs.org website were my starting point. As I am building the planner, I am prioritizing features that will allow me to learn/explore ReactJS as well as achieve my goals as a user.

Since I want to focus on the UX and front-end side of things, I am designing on the fly and working with tools mainly on the client side.

The project is live and updated as new features are implemented.

Lessons learned so far

After researching ReactJS lessons online, I eventually decided to go back to the source, the ReactJS.org website, use ReactJS with JSX as well as HTML5 to store content. Passing props to components through multiple levels has been a learning experience so I will write a few more features before deciding to use Redux or not.

This is an on-going project and progress will be updated as necessary.