Egghead's State Management Portfolio Club Journey - Week 2: Napkin Sketches

Introduction

Week 2 was focussed on Wireframing and UI Sketches. On one hand I watched David Khourshid and Joel Hooks discuss state machines and XState. On the other hand I explored Figma, Wireframing and UI Design.

I also listened to an interesting Podcast between Taylor Bell and Alex Reardon on Balancing Work, Life, and Large Side Projects.

Week 2 Goals

Watch David Khourshid and Joel Hooks discuss state machines and XState
Decide features for MVP
Sketch out App Screens

Goal 1: Watch David Khourshid and Joel Hooks discuss state machines and XState

Being a Computer Engineer by education, I've been familiar with state machines and diagrams, this discussion bridged a connection in my mind between state management in web applications and state machines. I found XState's visualizer to be a potential tool I would use in future.

Goal 2: Decide features for MVP

At this point I felt was important to visit the readme and decide which features would make up a minimum viable "Find My Domain". It would also help me think about the napkin sketches that would be made this week.

I wore a Unicorn hat and came up with these features:

As a developer, I want to develop a non persistent app without authentication and authorization
As a user, I can choose between dark and light mode
As a user, I can describe my business and share its name
As a user, I can check whether a domain is available or not
As a user, I can where I can buy the said available domain

Important Note
This project focussed on understanding state management, therefore I did not focus on DDoS attack possibilities, Scalability, User history store, etc. However, It is important to note that the above-mentioned parameters are key, to any production level project.

Goal 3: Sketch out App Screens

Doing the absolute opposite of Taylor and Will's advice on focussing on 1 thing at a time (state management libraries), I started learning how to make designs on Figma.

I realized that my initial UI Design was rough because I did not define a "Design System". So I began to watch videos on Figma's YouTube channel. I found Google's Designlab on Adaptive Layout very resourceful as well.

Another resource that really helped me create my first design system and UI Design on Figma was The Beginner's Guide to Figma by Joe Previte on Egghead

Here are the results:

Design System