How to Plan Your Project
Tags: react, webdev, tutorial, typescript
Published: 2022-04-12 18:58:02

## Welcome Back!
**Where we left off** - [GitHub](https://github.com/samp-reston/my-website/tree/aee5220d27a6f18303e6b62ad5e83affa158ea5b)

**What we're doing today**:
- System Design

---

## Breaking a Design into a Component Tree
Like I said in part 1 of this series, I created the design for the website using Figma:

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

We can develop a diagram using [Draw.io](https://app.diagrams.net/) a free Google developed tool for diagrams, similar to LucidBoard and MS Visio.

Knowing the UI design of what we're trying to make allows us to visually translate the page into components. To do this we'll work from the higher level components down to bodies of text.

For my design we'll start with the whole App:
![App](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3nfpramwks8mawxiui6a.png)

Within the App we can see that there is a vertical main body. We can call this the Body component:
![Body](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5uqkxmmma3g4rgib0mpb.png)

Within the Body there are multiple sections:

- Header
- About Me
- My Skills
- Portfolio
- Blog
- Footer

We can then create components named after these sections:
![Body Components](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/tsdkj0eg7ppfydc05bjx.png)

The Header, About Me, My Skills, and Footer components are all non-complex and only contain bodies of text or simple buttons therefore require no further detail. However, the Portfolio, and Blog components have further detailing we can achieve.

Let's start with the Portfolio component. Within the portfolio we will have multiple projects, so we'll create a Project components. Within each Project it will have an thumbnail, a title, and a description, these can be included within the component and so will not need further detailing.

![Portfolio](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/o0cjek5qlmzqls93ae6x.png)

Similar to the Portfolio component the Blog component will contain posts, so we'll create a Post component. The Post component will contain a thumbnail and a title.
![Blog](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/yww2j83mhc6uxh6cq9oi.png)

Before we finish up there's one detail we missed. There's a little burger menu in the top left of the page. Let's find this on the design and take a look:
![Menu](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/640xq31vzto7bd65v1mf.png)

How can we split this into multiple components? Well we can start by identifying that it's not in the Body component so we'll put it under the App component. With a few touches the new component diagram looks promising:
![Menu Diagram](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1cm9sz7nts1caeev97qy.png)

However, the Menu component will contain some lower level components. We can see from the design there is are Navigation and a Social component, so we'll add this to the diagram:
![Navigation & Socials](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xkenha9hskmap7xm1psv.png)

---

## The Final Diagram
![Final Component Diagram](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/sg25i8gvqz0p8s9g7uwt.png)

---

Thanks for reading, please leave feedback or any questions in the comments. Next time we'll be building the project to match the component diagram and we'll start filling out the application.