Build That Component Tree! a.k.a. The Frontend Block Of My Bootcamp
Tags: javascript, react, wecoded, codenewbie
Published: 2020-04-09 17:19:37

## The Beginning

After fundamentals and backend comes the frontend block to smash.

The first two days are painful. Working with the DOM directly with no helper frameworks is unpleasant to say the least but is necessary. We work on trying to implement a working To Do List then make a form with data validation. Arrrggghh, just take me back to backend!

## React
On day three we learn some React and the magic starts again. For someone who's only been coding properly for 6 weeks at this point - the concept is difficult. But once you get it, you can make some pretty cool stuff! I start off pair-coding a calculator and also learn about how to fetch data from an API. It starts getting together in my head how everything we learnt in backend actually relates to what we're doing at the frontend.

## My Hangman Game
Over the first weekend I make a working [hangman game] (https://hangman-iwd2020.netlify.com/) for International Women's Day, in two languages just to make sure my mum can play it too. This is the first little game I ever make so it fills me with joy and hope that I will enjoy working in the field and that I can actually do it. The creativity in software development is also clearer to me than ever before, the endless possibilities of an app you might want to create is amazing - at least for someone like me who's coming from an accounting background where there isn't much room for creativity (unless you're a bit dodgy. :))

![Hangman Game](https://dev-to-uploads.s3.amazonaws.com/i/pgfecdcil52ss4o7b51l.png)

## Some More
On week two we explore a few libraries for data visualisation and make an app that gets you the weather information of any chosen cities in the UK and compares the current temperature on some fancy graphs.
We then have a three-days sprint to build a Student Tracker app for Northcoders, my bootcamp. Have four blocks, have the students of said blocks show, be able to graduate them to the next block or make them resit a block. Be able to enroll a new student. And make the thing look pretty!

Prettying things up is hard when you're not confident with your CSS skills so I would really recommend going through Dave Geddes' [Flexbox Zombies](https://geddski.teachable.com/p/flexbox-zombies) for anyone who wants to learn more about flexbox, it really is an amazing tool to learn it.

## Planning
Given that we are all new to software development we need to be taught the basics too, such as planning. Planning ahead is really hard when it's not that you just don't know how to use some technologies, you also don't know _what_ technologies you'll use. But you can get creative, have a plan and change the plan if really necessary when you get to know more or realise something will not work the way you imagined but don't be scared to imagine.
We get into the habit of drawing a wireframe of our app first (nice time off the screens), all the possible pages/screens our app would have then think through the Component Tree. What links to where, what levels you need to have your states otherwise you'll just end up having to rewrite big chunks of your code.

## My News Site
The review of the Frontend block is a week long and the task is to build a frontend to the database and server we built at the Backend block. 
Unfortunately this is when coronavirus hits us so the tasks is also to be done remotely.
After a week [The Daily News](https://press-jl.netlify.com/) is looking good (but still needs some more work to do). This is my first full stack application that has been built from bottom to top by me alone and the feel of achievement is great!

![The Daily News](https://dev-to-uploads.s3.amazonaws.com/i/z9ibj782eo95ef60sroi.png)



Cover Photo Credit: [Kelly Sikkema](https://unsplash.com/@kellysikkema)