Egghead's State Management Portfolio Club Journey - Week 2: Napkin Sketches
Published: 2021-06-29 05:41:48

##Introduction

Week 2 was focussed on Wireframing and UI Sketches. On one hand I watched [David Khourshid](https://davidk.dev/) and [Joel Hooks](https://joelhooks.com/) discuss state machines and [XState](https://xstate.js.org/). On the other hand I explored [Figma](https://www.figma.com/), 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](https://egghead.io/podcasts/alex-reardon-on-balancing-work-life-and-large-side-projects).

##Week 2 Goals

- Watch [David Khourshid and Joel Hooks discuss state machines and XState](https://egghead.io/lessons/react-xstate-for-state-management-in-react-apps-with-david-khourshid)
- 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](https://www.youtube.com/c/Figmadesign/videos). I found [Google's Designlab on Adaptive Layout](https://codelabs.developers.google.com/codelabs/adaptive-material-guidance#0) 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](https://egghead.io/courses/the-beginner-s-guide-to-figma) by Joe Previte on [Egghead](Egghead.io)

Here are the results:

Design System
![Design System](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0qhufha3h3embft2zv2z.png)

Dark Mode
![Dark Mode](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/jmxchq1hapc25hhly8p8.png)

Light Mode
![Light Mode](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/somdn72dr7symfe43va3.png)

##Resources Referred/Studied/Watched
-[David Khourshid and Joel Hooks discuss state machines and XState](https://egghead.io/lessons/react-xstate-for-state-management-in-react-apps-with-david-khourshid)
-[XState Tutorial based on 7GUIs](https://xstate.js.org/docs/tutorials/7guis/counter.html#modeling)
-[Figma's YouTube channel](https://www.youtube.com/c/Figmadesign/videos)
-[Egghead course by Dan Abramov on Fundamentals of Redux](https://egghead.io/courses/fundamentals-of-redux-course-from-dan-abramov-bd5cc867)
-[Google's Designlab on Adaptive Layout](https://codelabs.developers.google.com/codelabs/adaptive-material-guidance#0)
-[The Beginner's Guide to Figma by Joe Previte](https://egghead.io/courses/the-beginner-s-guide-to-figma) on [Egghead](Egghead.io)
-[Let's Design a Landing Page UI in Figma by Pierluigi Giglio](https://www.youtube.com/watch?v=tNp7EA73Y2A)
-[How To Make Responsive Design In Figma by Essential Web Apps](https://www.youtube.com/watch?v=FQXi15Ihoqw)
-[Create an interactive toggle switch by UX&D](https://www.youtube.com/watch?v=TKaecvutJq4)
-[Taylor Bell and Alex Reardon on Balancing Work, Life, and Large Side Projects](https://egghead.io/podcasts/alex-reardon-on-balancing-work-life-and-large-side-projects)

**I did not decide my Tech stack at this point and again took advice from the club at the next meetup*