Close

June 27, 2017

Zaha: a visual note taking app

Demo: https://tamg.github.io/zaha/

Github: https://github.com/tamg/zaha

What:

  • Zaha is a simple visual note taker / mood board made with React.
  • You create your visual notes by adding a mix of text or image notes on to the board. You can drag each text/image note around the board or edit it’s color highlight for more organizing within the board.
  • This project is mostly based on how I come up with ideas for projects or crystalize concepts in my head. I usually collect inspiration images and texts (mostly quotes) to get me started with an idea. My sketchbook is full of bits and pieces of ideas in the form of nuggets of texts and images.
  • This is v1 and you can’t save your notes yet! ( coming soon 🙂 )
  • This project is made at the Recurse Center , where I am currently learning programming.
  • I called the project Zaha – after one of my favorite architect! Zaha Hadid

Why:

  • This is my first React project and I learned a ton about the framework.
  • It was really frustrating to get started with the React development environment but once I was setup it got fairly easier to add features, debug and iterate.
  • Learned a lot about: the concept of Components, JSX, Inline styles, State vs Props, default Props, Lifecycle methods, Stateless Components, ReactDOM, ES6 spread operators & classes, binding methods, passing methods via props…

Screenshots:

Next:

  • I’m going to work on unit testing components.
  • Add local storage for data persistence.
  • Add routing.
  • Try out Redux store…