100 Days Of Code Diary / School of Code Bootcamp Diary

A diary documenting my 100 Days of Code learning Journey and my journey on the School of Code Bootcamp.

Day 0

Prior to beginning my 100 Days of Code journey I had been an ESL teacher for 8 years. Last year I began to teach myself HTML and CSS whilst working full time. I used Codecademy as my main learning resource.

In preparation for the School of Code Bootcamp I left my job and spent the 7 weeks beforehand trying to prepare myself as much as possible. I completed the JS Fundamental sections of Jonas Schmedtmann's Complete JavaScript course on Udemy, as well as the Fundamentals section of his NodeJS course. I also had a brief introduction into using PostgresSQL. After that I managed to work my way through most of the Learn React for Free course on Scrimba and also had some time to refresh my Flexbox and Grid knowledge. I also reviewed my CSS and HTML knowledge as well as UI/UX design fundamentals.

As part of the SOC pre-course task I was introduced to git and github. I also completed another course on Udacity where I learned the fundamentals of the command line and git.

Day 1

My first day at School of Code. Lots of nervous excitement but met some wonderful people.

What we covered

Introduction to computational thinking, and the importance of breaking problems down into smaller chunks.
Chris (our Teacher) talked about Imposter Syndrome; how we need to learn to just deal with it and how it will never really leave us.
High level overview of agile vs waterfall development and also MVP's (Minimum Viable Products).
Chris also talked about how the aim of the bootcamp was to mold us into a sort of MVP, so that employers could add to our training and we could develop ourselves further in areas we are interested in.
Importance of using online resources to our advantage e.g. Google, Stack Overflow etc.
Introduction to pair programming. We will do every activity/challenge in pairs. Taking turns to be the driver and navigator. Helping and learning from each other.
CSS selectors game in pairs. My first experience with pair programming.

Day 2

A deeper dive into computational thinking
Lots of practice using git and github; using clone, add, commit, push , pull, status etc.
Chris talked to us about the usefulness of having a baby/child like mentality towards learning how to code: play with the tools, try to break things and then put them back together, see how it works.
Some more practice with CSS. We made an koala bear cartoon image.
Refresher on semantic HTML.

Day 3

The first day of Javascript. Covered so much in one day! Feel glad I covered the basics of JS in my personal course prep, or it could have been very overwhelming. Today we covered:

Data types and variables
If statements
While loops
Functions
We then made a basic password checker algorithm with our pair programming partners.

Day 4

In the morning we had a workshop about the importance of mindset and The Heroes Journey. We also discussed productive ways of giving and recieving feedback.

Afterwards we immediately dove right back into JavaScript, covering;
Objects
Arrays
More practice with for and while loops.

Day 5 - Hackathon Friday

So every Friday is Hackathon friday, where we spend the day completing a project in our pairs. Its a great opportunity to practice and cement the concepts we learned during the week. We then give a 2 minute presentation of our project to other groups at the end of the day.

Today's challenge was to make a rock scissor paper game. We managed to complete the challenge using functions, arrays, if statements and while loops. The game generated a random move for the computer and also kept track of total games, wins, loses and draws.

My coding partner and I were quite happy with the outcome of the task, given the limited time and knowledge we have. I'm looking forward to refactoring the code and adding DOM interactivity in my free time.

Day 6 and 7 (Sunday and Bank Holiday Monday)

Spent some time working through some classes on Scrimba's 'Learn JS for free' course. Reviewing, practicing and cementing some concepts we learned during the week.
Introduction to Code Wars. Watched some videos about breaking code wars tasks down and completed a few challenges/ katas. Reached 7 Kyu level.

Reflections after week 1 of the School of Code.

Things I've been reflecting on at the end of the week:

Taking a few baby steps everyday will soon add up. Consistency is the key.
Once I got used to pair-programming I can really see the benefits if it. We were catching each other's errors as we went and often we solved problems by just talking it through with each other.
The importance of celebrating the little wins and learning from failures. It was especially nice to be be able to share the wins with my coding partner and also to support each other when failing.
'Compare yourself to your past self and not to others'. This is also something our teachers have reiterated several times.
But also, in relation to the previous point, the reality that Imposter Syndrome is something that will come and go, and how it's basically something I will just have to learn to live with.
The importance of taking breaks. Applying the mental approach I use in physical excercice such as, 'push forward' and 'dig deeper', seems to actually be a hindrance when trying to solve coding problems. I realised that taking a short break or coming back to the problem later can actually be far more effective.

Day 8

Every week we are paired with a new partner, so we spend a little bit of time breaking the ice and getting to know each others working/communication styles before cracking on with the day.

A very intense day, covered a LOT. Didn't have time to finish everything.

Had a nice talk with some ex-bootcampers this morning. They weree sharing their experience, tips and advice with us.
Introduction to the DOM.
Practised selecting and manipulating elements.
Lots of practice with event Listeners and Event Handlers.

Day 9

Before class I reviewed and finished the tasks from yesterday and now feel more confident with the material.
Introduction to asynchronous functions, promises and Fetch requests.
We used Fetch to retrieve data from a Kanye West quote api and then displayed the quotes on a webpage. We then created a button that stored the quotes into a list on the webpage and also excluded any repeated quotes from the list.

Day 10

More practice and workshops using Asynch functions and Fetch; making GET and POST requests.
Weekly mindset talk , this time focusing on different personality types, the strengths and weaknesses of them.
Spent some time refactoring my hackathon challenge from the previous week.

Day 11 - Hackathon Friday

We pair programmed a simple but effective dad joke site using async functions, fetch requests, and event handlers/listeners.
We spent 30 minutes breaking the problem down and making a plan. We decided to make a high level overview plan which broke the problem up into multiple parts. Once we finished one part we would then zoom in on the next part and make a more detailed plan before completing it. We felt this way of planning/working was more fluid and veratile. It allowed us to respond to possible changes and also was more time effective.
We managed to reach our key goals before lunch and were able to focus on our strecth goals, which was to add CSS styling to the site.
We then gave a two minute presentation of our project to some of our peers at the end of the day.
I enjoyed using the tools we had learned in a more free-form environment. I.e. Make a plan and solve this problem.
When I have some freetime (hopefully over the weekend) I plan to refactor the code, add and input function that lets the user write and add their own joke to either list and clean up the CSS a little bit.

Day 12

Completed the SoC recap activites, which included;

Manipulating arrays, searching filtering for specific info.
Event handlers/listeners review.
Using setInterval and clearInterval.
DOM manipulation.
Adding input vals to list.

Week 2 reflections

Things I've been reflecting on at the end of the week:

This week felt like a real trial by fire, especially as we had lost a day of study to make up for due to the Bank Holiday.
I'm getting used to being out of my comfort zone and somewhat comfortable with feeling confused a lot of the time. These moments of confusion are usually followed by brief, shining moments of clarity, before we move on to the next topic and more confusion begins to surround me. But hey, you can't enjoy the sunshine without experiencing the storms.
Again with the cliches, but the old analogy of the boy falling of his horse, brushing himself off and climbing right back on came to my mind a lot this week. Every day my brain was like fried chicken by end of it, but I would decrompress, workout, relax then return to the materials before class in the mornings to find my understanding deepening and things becoming clearer. Thus, I am beginning to really trust in the learning process described by my teachers last week.
I'm starting to see the benefits of the SoC slack channel. There is a really supportive and kind community there and I wish to get more involved in it.
I'm also getting better at debugging. I've come to realise that the error log is often a source of helpful advice and not a cause for panic.

Notes on weekend homework tasks

Honestly this took longer than I expected. Once I completed the tasks I realized that I approached the tasks with the wrong mindset which hindered me greatly. I was just focused on trying to get them done as quickly as possible so that I could attend to some other commitments. I didn't break the problem down, didnt check the code properly as I was writing it and therefore made some silly errors that cost me a lot of time to find and correct. When I got stuck I used the wrong approach of just plowing forward instead of taking a step back and/or a short break, resulting in me just getting stuck further down the rabbit hole.

Thus, I realised that I needed to approach these problems the same way I would any other SoC challenge given during the weekdays: Break the problem down, make a plan and approach it methodically. Use the console.log and read error messages carefully. Make use of resources such as mdn, w3schools and stackoverflow when neccessary.

Day 13

We looked at the importance of UI/UX design. The difference between the two and the roles/importance of each.
We then learned about Agile Development and the 12 principles of Agile software Development.
Waterfall Development vs Agile Development. Advantages and disadvantages of each.
Played the Can't Unsee game which was a good intro into the power of good design.
Some self reflection activities at the end of the day.

Day 14

We took a deep dive into the 5 stages of Design Thinking:
- Emphathise
- Define
- Ideate
- Prototype
- Test
We discussed how this can often be an iterative process and we also practiced working through the stages in our own imaginary projects.
We also had time for a CSS workshop where we practised using CSS variables and we were able to implement a dark-mode feature on a simple website.
Solved a couple of Code Wars challenges in our pairs

Day 15

Deeper dive into UI, and the elements and principles of design.
Color theory and accessibility.
We also looked at the LightHouse feature in Devtools.
Introduction to wire-framing and practised making a mock-up wireframe using miro and figma.
workshop on organising and maintaining CSS code. We also covered specificity.

Day 16

Workshop on perspectives and ideas, listening to and communicating ideas effectively.
We talked about importance of not get getting too attached to our ideas.
CSS flexbox, using vh and vw for sizing. Also looked at how to select elements in the most efficient and sustainable ways.
In the afternoon we worked in groups of 4 to complete a UX challenge. The challenge was to create some wireframes for a competitor to Google Maps. We managed to complete some medium fidelity wireframes and then presented them to our peers.

Day 17

Followed the Design Thinking Process and UI/UX planning principles we learned this week to design a personal portfolio website.
I created user personas and stories, then made a first draft and final version of my low-fidelity wireframe on Miro.
I actually really enjoyed the process and was surprised by this. I spent a good chunk of my Saturday night creating the wireframes whilst listening to music and have no regrets. It was fun to put myself in the user’s shoes and try to design something that would meet their needs and expectations.
I also cleaned up my Linkedin profile and began to upload my daily progress on LinkedIn instead of Twitter.

Day 18

-This morning I created the high fidelity wire-frame for my portfolio website on Figma. I’m pretty happy with it, all in all. There are a few things that need tweaking, but I’ll let it sit in my mind for a while and have another look at it in a couple of days.

I’ll begin planning and building it in HTML and CSS in the morning.

Reflections after the Week 3 of School of Code

UI/UX week was an interesting change of direction. After some initial trepidation I ended up really enjoying it.

This was my first experience making wireframes digitally rather than just sketching things on paper. Miro was easy to pick up but I found Figma hard to grasp and was initially put off by it. I watched a couple of tutorials and had a play around and began to feel much more comfortable with it. There is still a LOT for me to learn about Figma but I’m inspired by the possibilities it offers. Increased complexity comes with a steeper learning curve so I just need to spend more time with it.

I really enjoyed the Hackathon challenge on Friday and was happy with what we created in a short period of time. My partner and I got along well and were able to communicate effectively which helped move the project along immensely. This changed my perspective on the whole 5 stage design process as I had a less satisfactory experience the day prior working in a team that didn’t gel/communicate as well.

This also made we reflect on the workshop we had on Thursday morning about the importance of listening and not getting attached to our ideas. After Fridays Hackathon I also really saw the benefits of cognitive diversity in teams, as my coding partner and I really had fun bouncing ideas off one another and coming up with things that we would not of thought of by ourselves.

I spent the weekend planning and designing my prospective portfolio page leading to a high fidelity wireframe that I am pretty happy with, although a few tweaks still need to be made. I enjoyed the process much more than I expected and really lost myself in it for most of the weekend.

I’ll see how the rest of the bootcamp goes but I might look more into UI/UX design as a potential career path.

As a side note, I also discovered Trello, which was a real game changer in terms of organizing my to-do-lists and resource lists

Day 19

Introduction to Node and npm.
A quick overview of the Event Loop.
Pair programming workshop activity where we practised importing and exporting modules and importing npm packages.
We were also introduced to and practised using the .gitignore file.
I had to wrestle with Node version manager for a good portion of the afternoon workshop and so completed the tasks in the evening.
Also, in the morning we completed some HTML, CSS and JS review quizzes. I was pleasantly surprised by my scores :)

Day 20

Review of the topics from yesterday.
Importing and exporting using ES6 syntax and default JS syntax.
Intro to Express and created some simple servers and a very simple API.
There was a lot of info to take in today. This is my first experience with the back-end, -and things aren’t fully clicking yet, but I’m ok with that. I’m becoming more comfortable with being uncomfortable.
Also attended an after class workshop hosted by some of the great coaches, which helped clarify a few things for me.

Day 21

Routing API’s and separation of concerns into different modules.
Practiced handling and routing queries.
Not sure if all the above terminology is correct as I’m still learning and getting my head around the concepts.
I’m feeling a bit more comfortable with the logic and syntax of Express after some more practice today. Breaking things down really helped.
Also talking things through with my coding partner helped me to gain more understanding of some concepts, especially in regards to handling queries from the client side.
In the afternoon we were also introduced to REST API and CRUD operations.

Day 22

Great mindset workshop in the morning about our Inner Critic and building resilience.
We each gave a two minute presentation about something we had learned recently and had ten minutes to prepare for it. I presented a quick presentation demonstrating the layout grid system in Figma.
In the afternoon we were split into groups of four, given a random topic and had just over an hour to prepare a four minute presentation on it. We were asked to give a presentation on CORS which I had no prior knowledge of. To be frank I don’t think I presented very well as I was still struggling to grasp the concepts of CORS by the time we presented, but it’s all part of the learning journey.
We were also introduced to middleware in Express, and performed basic POST requests using postman. We will have more time to play around with this and cement our knowledge further during Friday’s Hackathon challenge :)

Day 23

Our challenge this week was to build the backend of a recipe website.

We set up a router and server that listened for requests from the client. The requests included:
GET request that listed all the recipes available.
GET request that displayed a particular recipe requested by the user(requested by inputting the id number of the recipe.)
POST request that created a new recipe.
PUT request that updated a recipe.
DELETE request that deleted a recipe.
We also had time to complete one of the bonus tasks which was to create models that allowed us to export/import some of the logic from the requests and store them elsewhere; leading to more reusable and cleaner code.

I would like to thank the fantastic coaches at School of Code for offering a guiding hand when we got stuck on a task. :)

Day 24

I completed the School of Code weekend recap tasks, which reviewed and cemented the things we learned during the week. Ie. Making GET,POST,PUT and DELETE requests. Importing and exporting modules etc.
I also reviewed our code from the Hackathon challenge to review the concepts and ensure I understood how everything works.
Watched ‘Keep betting on JavaScript video’ in preparation for a guest talk from Kyle Simpson on Monday
I updated my #100DaysofCode diary on my Github Readme repository.

Reflections after week 4 of School of Code

This week we were introduced to Node and Express. This was my first experience with the back-end and there was a lot of information and new concepts to absorb. There were times when I felt overwhelmed, and some negative talk crept into my mind, but I reminded myself that Rome wasn’t built in a day. I also remembered how I felt the same way during the middle of weeks 2 and 3, but ended those weeks feeling much more comfortable with the concepts after I stuck with it.

My coding partner took to the back-end like a fish to water. At first, this unnerved me a bit, to be honest. But I also realized that it was a great opportunity for me to learn from her. She was very patient and talked through the concepts with me.

This week I also learned to fully appreciate the benefits of adding comments to my code. Taking that time to comment properly really helps to gain a deeper understanding when writing and reviewing code. it also saves a lot of confusion when revisiting old code a few days after writing it.

This week I was also blown away by the kindness I found in the Tech Community. I worked on improving my LinkedIn profile, as last week I only had two connections (one of which was my girlfriend. haha). I reached out to past School of Code graduates and current students and was amazed by the number of well wishes and support I got from people I had never met before. A few people even messaged me saying that I was welcome to approach them with questions or for advice. The kindness shown to me melted my heart, and I hope to pass on this kindness to others as I walk further down this path into the world of Tech.

Day 25

Today we were introduced to databases. We looked at the difference between relational and non-relational databases.
We looked at using CRUD operations in PostgresSQL and had some time to play around with Creating, updating, reading and deleting data using db-fiddle.com
We had an interesting talk from Kyle Simpson who talked to us about Imposter Syndrome and the importance of accessibility.
In the morning I managed to complete a couple of the bonus tasks from our weekend tasks and Friday Hackathon challenge.

Day 26

We took a deep dive into SQL. We created tables and then were introduced to and practised using the WHERE clause as well as some new queries including; AND, OR, BETWEEN, NOT BETWEEN, IN, NOT IN, LIKE, NOT LIKE, %, and DISTINCT.
We also looked at the ORDER BY keyword and ASC/DESC.
In the afternoon we experimented with joining tables and looked at the various types of JOIN.
We then worked through some exercises on SQLbolt and pgexcercises.com

Day 27

We were introduced to Heroku, environment variables, the express application generator and the pg package which allows us to connect to a Postgres database.
There was a LOT of information to take in and I’m still unsure how all the new concepts we learned yesterday fit together, but we’ll have more time to play around with it tomorrow and during the Hackathon, I’m sure.
Hamza’s evening workshop really helped to clarify the mindset needed to approach coding problems. Basically, to stay calm under pressure, explore the problem, use google as a coding partner and not let anxiety/Imposter syndrome take the driving seat in our minds.

Day 28

We spent most of the day breaking down the task from yesterday piece by piece and then sticking it all back together. This was extremely useful and helped to place a few of the jigsaw pieces together in my mental model. I’m still not all the way there, but I’m making progress and hopefully the Hackathon tomorrow will help clear things up further. Big thanks to the wonderful coaches at School Of Code for today!

Day 29(Hackathon Friday) and 30

Our challenge this week was to create an API with Node.js, Express and PostgresSQL.
We made a simple animal information API, and hosted the data on Heroku. We managed to create various routes that managed the requests and server responses, and we used the models pattern to allow for easy interaction with our database.
We also used environment variables to store our credentials.
On Saturday I completed the weekend recap tasks which helped to solidify the concepts I learned during the week.

Thoughts after week 5 of School of Code

Regarding the number of new concepts and information being introduced to us, week 5 was the toughest week for me. However, I noticed that I didn’t really get overly anxious and feel overwhelmed the way I did in the first or second weeks when I was in this situation. I’m becoming more comfortable with being uncomfortable and gaining confidence in breaking problems down and attacking them step by step.
Also, when I felt a bit overwhelmed with the new info, I remembered how I pretty much felt the same way at some point every week since the start of the Bootcamp and things always became clearer with time and practice.
I also had some lovely feedback from my enablement coach in regards to my progress in the Bootcamp and it was really heart-warming to hear that my former coding partners enjoyed working with me as much as I enjoyed working with them.

Day 31

Today we were introduced to Testing and Test Drive Development. We looked at different types of testing, such as unit testing, integration UI and acceptance tests.
We then went on to write some of our own tests in Jest using the Arrange, Act and Assert method for testing.
It was actually very satisfying to see all those green ticks after testing a function we wrote/writing a test. Haha.

Day 32

Today we took a deep- dive into TDD and the Red/Green/Refactor cycle. We also had more practice with Jest and played around with some new concepts.
In the afternoon we had a guest lecture from the team at cypress who gave us a demonstration of their testing software. It seemed very intuitive and well designed. Looking forward to playing around with it soon.
We also had time to solve a few katas on Codewars today and I feel like my coding skills have levelled up a bit. Those little baby steps I've been taking every day are starting to add up :)

Day 33

Completed a couple of Codewars challenges in the morning to help get my brain back in gear again after the Jubilee holidays.
We were introduced to React today. We had a little play around and will be diving deeper into it during the next two weeks.
Completed a couple of unfinished tasks from some of the previous workshops.
Took it a bit easy on myself today, as I am feeling a bit unwell and need to rest.

Day 34

More React today. We were introduced to JSX and Props, and then completed more practice tasks.
Happy to be working on the Front-end again!
We had a great guest talk from Nick Truby who shared some excellent insights into the life of a front-end developer
We used React Create app for the first time and played around with importing and exporting simple components.
I attended another great workshop led by Hamza Ibrahim which helped cement some of the testing concepts we learned last week.
In the morning I also began coding along with The Net Ninja React tutorials on Youtube.

Day 35

In the morning we delved further into State and lifting State. We also looked at the difference between ‘smart’ and ‘dumb’ components. We then completed a workshop where we created a simple name generator using React.
I was feeling pretty confident with React until we reached the afternoon workshop and I got my ass kicked by props. I’m still struggling to fully grasp the concept but will have another crack at it tomorrow.

Day 36

I spent a couple of hours before class coding along with NetNinjas React tutorials. After some sleep and more practice I feel that I have a deeper understanding of State, Hooks and Props in React.
We were introduced to a number of JS operators that allow us to edit arrays and objects immutably, including the spread operator, slice, map, filter, some, sort and every. We practiced solving a few codewars style challenges using some of these operators.

Day 37 - Hackathon Friday

We practiced using all the concepts we learned during the week to make a simple to-do list app in React. Putting all the pieces together was much more challenging than I expected, but we managed to complete the task and I am pretty happy with the outcome given the limited amount of time we had. We managed to create a user input field that added text to a list upon clicking a button. We were also able to buttons that removed a particular item from the list.
We also had time to add a button that would display a random motivational quote on the screen, which would hopefully help to motivate the user into doing some of their tasks.
Given more time we would have improved the CSS styling, as the page is very ugly at the moment. We also would have liked to add different types of lists based on priority levels. e.g. a high-priority to-do list and a low-priority to-do list. I feel that this would not be too difficult as it’s just a case of reusing and repurposing the existing component we created, but I might be wrong.
I’m looking forward to improving the project soon.
We also had to present our project to our peers and I am starting to feel a bit more comfortable doing this. My presentation still wasn’t great, but it was better than last time. We have to celebrate the small wins, haha.

Day 38 and 39

I spent a lot of time working on the Weekend Recap Tasks which helped to practice and cement the knowledge we learned during the week.
I also managed to complete the bonus tasks activity which consisted of solving various code wars style challenges using a wide variety of JS methods.
In preparation for next week I watched a number of Net Ninjas React tutorials; introducing myself to various new concepts including the useEffect hook, conditional rendering, error catching/handling and also custom hooks. I plan to watch the videos again tomorrow morning before class, code along with the tutorials, and then try and really break down the code to see what’s going on. But for now, time to enjoy the weekend! :)

Day 40

Spent a few hours in the morning working through Scrimba’s React course, getting more practice with props, conditional rendering , destructuring props etc.
In the afternoon we learned about the importance of keeping components Pure in React. We were introduced to UseEffect and completed a workshop where we used it to fetch data from an API.

Day 41

Spent an hour before class working through a few more React classes on Scrimba.
We were introduced to the Finite State Model today and then spent a lot of time learning about the useReducer hook, then worked through a workshop and practised using it. I found it tricky to get my head around but will have another crack at it tomorrow.
Spent a couple of hours after class making a simple React App that fetched and displays information about Star Wars Characters from an API. Created functionality to display a random character and info about them by clicking a button. Will try and add more functionality to it tomorrow.

Day 42

Worked through a few more Scrimba React classes before class.
We took a deep dive into React testing today using the Arrange, Act and Assert method.
After class, I managed to get the search functionality working on my Pokemon/Star Wars app and added some basic styling. It still looks horrendous but the functionality is there, so I’m happy with the results so far. Will try to add some decent CSS over the weekend.
The mini-project helped me gain more confidence with props, state, useEffect and component layout in general.

Day 43

-Another great Mindset class with a focus on Team Dynamics this week.

-We had a quick but very useful workshop on Git branching.

A great quest talk form the team at Trello, about RESTful API’s.
In the afternoon we had two hours to prepare and record a 4 minute presentation in groups of 4. We recorded a presentation on Agile Project Management tools such as Trello and Jira. It went well and feeling a bit more confident with presenting the more practice I get.

Day 44 – Hackathon Friday

We were given 5 hours to make an MVP of an app using React.
We spent some time researching and testing API’s; focusing on finding one that seemed reliable and offered easy-to-access, useful data. We chose a music API which offered info on bands and artists.
We then used Disney ideation and worked through the Dreamer, Realist and Critic stages in order to come up with an idea of what we wanted to build. We decided upon some basic goals and stretch goals. We then made a low-fidelity wire-frame and component tree of our site on Miro. We made a plan; breaking the app down into tasks/tickets for each feature.
We spent the rest of the day implementing our plan and coding. We then gave a two-minute presentation to our coaches and peers at the end of the day. I am very happy with the results, especially given the short amount of time we had. We were able to implement a search feature which returned info on a band/artist, including; a picture, logo, genre info, biography of the band and a link that directs the user to the Last.fm page for the band/artist.
We also had time to implement two of our stretch goals which were to add a ‘Discover a new band button’, which displays info on a random band and to add CSS styling.

Day 45

Today we started project week. We were given a project brief and put into our new groups of four and to work.
We created a manifesto, brainstormed ideas, created a survey, made some user stories, worked through the Disney Ideation process, defined our final idea, created a flowchart breaking down our app into its component parts and then made a low-fidelity wireframe.

Day 46-49 The rest of Project Week

What a wild ride!
The team and I worked like dogs in order to make our MVP. It was such a wonderful experience with a team of great people. Lots of shared laughs, frustrations and triumphs were had as we worked towards our goals. My biggest fear at the start of the week was that I wouldn’t gel with the random teammates we were assigned to, but we all got along like a house on fire and quickly became fast friends.
We created a full-stack web application that allows bootcampers to post workshops/lessons they wish to host on any topic of their choosing. We wanted to reward boot campers for their hard work and give them recognition for the help they give to others. Thus, bootcampers receive badges based on the number of sessions they have given, feedback from fellow bootcampers etc.
We managed to achieve all our MVP goals. The user can post info on their study session to our database, and the user can also view all the current study sessions saved on the db. We were able to deploy our databse to Heroku, add some routes to the navbar and apply some CSS styling. If given another week we would have been able to fully implement our badge system, and create the admin dashboard; where the admin can delete entries, see the attendee list etc. The team and I plan to continue working on this as a side project, which I am excited about.
We encountered some roadblocks that cost us a lot of time, and I still feel a bit frustrated that we could have done more, but hindsight is 20/20 and these mistakes are part of the learning journey.
It was great to be able to consolidate all the learning we have done in the last 8 weeks and put all the jigsaw pieces together. It was very beneficial to practice using the Agile methodology, with daily standups, retrospectives, tickets etc. I think this week has really helped set us up for the final 4 week project.
It was also very useful to have some presentation practice, as nerve-wracking as it is.
Again big thanks to my fellow teammates Fabian Deckmann, Jaden Joel, Cambridge CELTA and Sam Safari! Love you all.

“Sometimes you’re ahead, sometimes you’re behind, the race is long and in the end it’s only with yourself.” - Mary Schmich.

Day 50:

I spent a couple of hours before class working through a few of NetNinjas’s React classes and also thinking about how I could incorporate some of the concepts covered into last week’s project.
We remained in our groups from last week’s project and spent the first part of the day doing a Retrospective together. We reflected on what went well, what didn’t go well and why. We then made an action plan on how we could improve these issues next time.
In the afternoon we were introduced to Code Reviews and gave feedback on a peer's project. We focused on giving feedback in a positive way, asking good questions and for clarification where necessary. I found it very interesting to see how another group tackled similar problems and I also enjoyed just reading, understanding and making a mental visual model of another group's app.

Day 51:

We started off with a workshop on writing effective documentation. We learned about the importance of writing concise, user-friendly, clear documentation that respects the user’s time.
We then set about writing documentation for our week 9 projects. It was an interesting experience to be in the shoes of the person writing documentation rather than consuming it. We tried our best to put ourselves in our user’s shoes, focusing on offering clear and user-friendly docs.
I also spent another hour or so working through a few more of NetNinja’s React classes.

Day 52:

We Finished writing documentation for our project.
Watched a few tutorials on React Testing Library and managed to incorporate a few simple tests into our app.
Played around and experimented with git branching a bit more, so as to try and avoid any merging conflicts etc on our next SoC project.

-Worked through some more of NetNinja’s React course on Udemy.

Day 53:

Before class, I improved the functionality of our form from last week’s project. I also added some error handling and a loading message for the site's initial fetch request.
We were introduced to Auth0 and discussed the difference between Authentication and Authorisation. We then began a workshop where we practised implementing Auth0 into the front-end and back-end of an empty project.
Had a little play around with some CSS animations in the evening.

Day 54 and 55:

We spent most of Friday continuing the workshop on Auth0. Implementing it on the front-end was relatively pain-free but the back-end implementation was very difficult and I will need to look at this further.
In preparation for the final 4-week project I began learning NextJs, as I saw that many teams from previous SoC bootcamps used it in their final project. I completed Net Ninjas Next js course and managed to deploy the app with Vercel. It was surprisingly easy to deploy! Although I’m just scratching the surface at the moment, I can see why Nextjs is so popular. Looking forward to diving deeper into it next week.

Day 56

We were introduced to Netlify and deployed a Single Page Application. We also looked into more features offered by Netlify such as Netlify forms, continuous deployment, plugins, edge function etc.
Spent a couple of hours working on a React project.

Day 57:

I learned about and practised using React Fragments, modal components, children, portals and functions as props. I also learned about styling React Apps using global stylesheets, component stylesheets, CSS modules, and dynamic and conditional inline styles.
We delved deeper into deployment and managed to deploy and link a simple front-end and back-end app with Heroku and Netlify.
Also learned a bit about Headless CMS and watched a tutorial on Strapi. Strapi looks like it could make back-end life a whole lot easier!

Day 58:

Before class, I began a NetNinja course on Nextjs and Contentful. So far Contentful seems to be an extremely useful tool that can really help to simplify back-end development. Looking forward to learning more!
in the morning we were introduced to the Context hook and wrote an article with the aim of explaining state, props and Context to our peers.
In the afternoon we were introduced to React Hooks and completed a workshop where we practised using them. I can see how they can very useful in abstracting away code and making reusable functions.

Day 59 and 60:

We had a workshop about the interview process and began working on our 10-second Intro/Elevator pitches.
On Friday we were introduced to AWS and Amplify. AWS is incredibly deep and offers a crazy amount of features. I can understand now why there are so many types of AWS certificates available. We then went on to create a very simple full-stack app using Amplify.
I practised a bit more with React and brainstormed ideas for my portfolio content.
Watched a few tutorials on Firebase and played around with it a bit. Seems like a great back-end tool that I can implement in some personal projects going forward. I also quickly reviewed Node js basics and CRUD operations.

Day 61:

Reviewed some React fundamentals such as fetching data using the UseEffect hook, making a custom fetch hook, adding loading/pending states, error handling, user inputs and events, submitting forms etc.
Also looked and practiced some new concepts such as the useRef hook, useCallback and cleanup functions.
Had a play and mess around with TailwindCSS. Seems very useful and time-saving so far and has easy to read documentation. The trade-off seems to be that it can lead to messy code.
Started working on my portfolio site. Got the responsive Navbar sorted :)

Day 62:

We had an excellent guest talk from guest speaker and former boot camper Valerio Cipolla. He gave us some great advice for our upcoming project and life post Bootcamp.
We were introduced to UI libraries. Each group was assigned a different library to play around with. We then joined with other groups to discuss and compare our experiences.
After class I fell into the youtube rabbit hole, looking at different UI libraries. I got a bit overwhelmed with all the different UI library options as they all seem to come with their own set of pros and cons.
Before class, I did a bit of work on creating a matching pairs game with React. I also began writing the Readme to accompany it

Day 63:

Another great guest speaker today. Daniel Newns gave us an excellent insight into life in tech and what he looks for when hiring junior developers.
We had some time to work on our portfolio websites in the afternoon. I dug up the wireframes we made back in week 3 and tried to iterate and improve upon it. I also started to code the site with mobile first responsive design in mind.

Day 64 and 65:

We looked at Precedence and implicit coercion in JS. We then explored JS and all its interesting/infuriating quirks.
We were introduced to TypeScript. We researched, and then discussed the purpose of TypeScript and the pros and cons it brings to the table. Following this, we worked through a couple of projects where we learned the basics of TypeScript, and implemented it into a Rock, Scissors Paper app and a React To-Do app.
Had a great workshop going over interview tips and advice. We then conducted some mock tech interview coding challenges with our partners, where I discovered that I make a better interviewer than interviewee. 😅
Another great guest talk from the team at Talis, where they went over their agile method of working, which was very helpful in preparation for the final four week project!

Day 66:

For the last hackathon we were asked to create a simple weather app using TypeScript that retrieved weather info from an API, and we were encouraged to play around with some new tools. We took advantage of this opportunity as we felt that some of these tools could be very useful during our four-week projects. So after we completed a barebones MVP we played around with React Router and Material UI. Although we weren’t able to incorporate them into our project as we would have liked, we learned a lot and became more comfortable with TypeScript along the way.
After class, I played around some more with React Router and gained a deeper understanding of how it works. I also explored the docs and sandbox features of Framer Motion and React Hook Form.

Day 67 and 68:

In preparation for Project month (deep breath) I took a deep dive into React over the weekend. I worked through Net Ninjas Udemy React Course. I practised and became more comfortable with ReactRouter6; creating links, routes, redirecting users, using the useParams hook and also created a functional search bar. I created a useFetch hook for GET requests and then adapted it so it can also handle POST requests. I also got a lot of practice using the map method to iterate over data.
I deployed a few projects with Vercel, most of which are not finished/presentable yet, but I just wanted to get a bit of practice in.
I also played around with CSS Grid a bit.

Day 69 and 70:

Project month was delayed until Wednesday due to the heatwave. I used this time to work on some portfolio projects. I added dark-mode functionality to my cooking site using useContext and useReducer, which helped me to gain a deeper understanding of the basics of how these hooks worked; as I had struggled with them previously.
I deployed the front end to Vercel then used Firebase to create a backend instead of using JSON server. This was my first time using Firebase in a project and I learned a lot. I have GET and POST routes sorted and plan on adding DELETE and PATCH functionality soon.
I also spent some time working through NetNinja’s CSS Grid course and created some very clean and simple responsive layouts using Grid.
After this, we had a power cut and I spent the rest of the day reading/napping/melting in the heat.

Days 71 to 73:

We began project Month!

On Wednesday we were put into our teams, where we got to know each other and then created a project manifesto. We were then presented with the brief and set about brainstorming ideas, and ideating. We selected some of our favourite ideas, split into pairs and developed them further, then gave feedback to each other. We then used dot voting to decide on the final project concept. Finally, we used the MoSCoW method to discuss and decide upon our MVP features.
On Thursday we created some user personas and sent out a research questionnaire. We were able to get over 70 responses! (Big thanks to anyone who completed our questionnaire!) We analyzed the feedback we received from the questionnaire to adjust our planned MVP features accordingly. We then created our low-fidelity wire-frames using miro.
On Friday, we split into two teams where we each made a high-fidelity mock-up of our main page using Figma. We got together, discussed our ideas and merged the best parts of each wireframe together into one super wireframe! 🦾 Once we had a design theme sorted we split off again into two teams. One team created the rest of the High Fidelity wireframes for the MVP and the other worked on the component tree for our App. Finally, we gave a 4-minute presentation to our peers at the end of the day.
We still have some more planning to do but we're really happy with the progress we’ve made and am genuinely excited to start making this app with the team!

Days 74 and 75:

I spent some time working on my Portfolio website MVP using Nextjs. I wrestled with and learned a lot about CSS Grid. It was also fun to play around with CSS again, but I forgot how easy it is to get lost in the tiny details. For my next portfolio session, I will have to use an egg-timer to help with styling decisions. lol. The page still needs some work but it’s coming together nicely

Day 76:

Today we finished and finalized our high-fidelity wireframes as well as our component tree. We decided upon and explicitly defined our database structure and naming conventions. We also finalized our MVP features and made sure we are all on the same page before we start coding tomorrow.
We discussed and decided upon a tech stack to use, with final voting on a couple of items to be held in the morning standup tomorrow; which gives us time to do research and sleep on things before making a final decision.
We also discussed our Git flow strategy, as we felt it was very important to all be on the same page with this in order to avoid any git merging nightmares.
Finally, we read through the Project Guidelines document one more time to make sure that we had covered all of the key steps.
Some nervous excitement right now as we hopefully start to build and code our project tomorrow!

Day 77 and 78:

On Tuesday morning we voted and decided upon our tech stack. We then decided to take 90mins to go and read documentation or watch tutorials on Nextjs in order to re-familiarize ourselves with it before we begin to code.
After Lunch, we began to code! We began work on the form component using React Hook Form, map integration with Mapbox, navbars, footers, component cards, filter bars etc.
During Thursday's standup we clarified the tasks for the day, tweaked a few things and got back to work. We created a simple back-end for our website and deployed it with Heroku. We also merged some of the front-end branches and deployed the development branch with Netlify. We decided to merge the branches as a group as a few of us (myself included) were unsure as to how to merge branches efficiently in a way that mitigates the risk of high blood pressure.
Although there is still a lot of work to do, it was great to see all the little jigsaw pieces starting to come together after we deployed.

Day 79 to 81:

Some struggles, some frustrations, and a huge dose of imposter syndrome, followed by some small wins and a couple of nice dopamine hits.

-We progressed beautifully as a team and made great steps towards achieving our MVP. We managed to integrate Mapbox and Cloudinary image uploads into our Nextjs app, as well as a form using React Hook Form. Our form submits data to the database and we are able to fetch and display that data on the home page. We also have the routing and fetching set up for each of our location cards, although some fixes still need to be made.

Personally, on Friday I fell into the black hole of comparing myself to others, which never leads anywhere good. I had to remind myself to compare myself to my past self and remember how far I’ve travelled in the last 3 months. I tried to remember that during this project we are being exposed to a lot of new technologies and it’s foolish to expect myself to be able to pick them up and run with them straight away.
On Saturday I attempted to hook up the form on my Nextjs Portfolio page with Netlify Forms but had no luck. I will try another approach (maybe with Formspree) today or tomorrow.

"Sometimes you’re ahead sometimes you’re behind, the race is long and in the end, it’s only with yourself" - Mary Schmich

Day 82-84:

We’ve been working hard on our project and are just touching the finish line in terms of our MVP goals. We implemented Auth0 to the app, refined and fixed some bugs in our search bar, improved the styling of all our pages, and added functionality for the user to report any errors they find in the location pages. We spent a day where we ironed out all the small creases and made sure everything looks and feels as slick as possible. We also spent a lot of time merging all these changes. I’m feeling a lot more comfortable with the process of git branching and merging as the project continues
We reached the point where we started to talk more about possible stretch goals and will have a vote later in the week to determine which stretch goal/s we will work towards next week.
I have also been working on my portfolio outside of class and everything is starting to come together now. If I keep up the grind then it should be ready to go by graduation day.

Day 85-87:

Some more general spring cleaning of our MVP. We tidied up the Location pages and created the About us page. We implemented some testing on the back-end using Jest, and added some more locations to the database. We also send out our MVP with a survey to our fellow boot-campers. We got a lot of constructive feedback which we will discuss and act upon on Monday.
We added the map functionality to our form page, so the user can now just drag and drop a pin to set the location instead of having to type in the longitude and latitude manually. Still, a couple of bugs to iron out with this feature, but a big improvement on our previous implementation.
In terms of side-projects I added media queries to my portfolio page to make it responsive for mobile and tablet. I just have to replace all the Lorem Ipsums with actual text and it should be ready! I also did some work on my Github profile Readme to make it more presentable.

Day 88-90:

We reviewed the feedback from our surveys and spent some time fixing some bugs and UI issues that were addressed by our users. By the end of Monday we felt our MVP was pretty bullet-proof (fingers-crossed it staysthat way). We created a Figma design for the mobile version of our website and then set about building it. We also added some delete and edit functionality for logged in users to edit any locations they have added to the website.
I added some draft text to replace the Lorem ipsums in my Portfolio site and also started to think about how to tackle making a new CV, as my current one looks like it belongs in a time capsule.

Day 91-94:

We worked on and finished the MVP mobile version of our website. We also implemented some end-to-end testing using cypress, fixed a couple more bugs and began work on our documentation, the bulk of which is finished now. We then set about working on our final presentation video. We planned out the general structure we would use and created some slides etc. Hopefully, we can start recording on Monday.
I also did some more work on my CV and a couple of Readmes for some side-projects.

Day 95-97:

We recorded our final presentation videos and also completed the documentation. for our final projects.
Yesterday was the last official day of School of Code! But I still have some loose ends to tie up in terms of portfolio projects and also the graduation event to prepare for, so not dancing jigs and cracking open the whiskey just yet. But almost there!! Woop woop! Jigs will be danced next Wednesday. Haha
Thank you to all the coaches and staff for your hard work and dedication over the last 4 months. I got some sand in my eye during those beautiful speeches yesterday. haha
Also, did some more work on cleaning up my portfolio site and projects. I think my main task now is to write some Readme’s for the past projects I want to showcase, so I will be cracking on with that over the next couple of days.

Day 100:

Day 100 reached! :) I read through some of my previous entries and saw how far I have come since day one. Still loving it, still ready to get stuck in and learn more!
I would like to express my gratitude to School Of Code for this life-changing opportunity. I have learned so much over the last 16 weeks and met so many amazing people. Lots of peaks, troughs, laughter, stress and support all the way. I already miss the morning squats. 😢
Big virtual hugs and thanks to all the School of code Staff who make this happen. Thank you for your hard work and dedication to us every day! Kazeem A, Helena Archer, Charlotte Forte, Hamza Ibrahim, Liz Kaufman, 🚀 Jordan Linton 🚀, Chris Meah, Christopher Miller, Anna-Marie Moss, Arshi Sheikh,

-Finished Day 100 by putting some finishing touches on my portfolio site, which I felt was a nice way to end the Challenge.

100 days of code - round 2

Round 2, Day 1. Since graduating from School of Code I took a bit of time off to attend to some personal matters and also spend time with loved ones. Ready to get back on the horse now. I decided to start a new round of 100 days of code in order to help keep myself accountable and motivated. I spent the last few days working through Front End Masters ‘Complete Intro to Web Dev’ course in order to refresh and cement some core principles and fill in some gaps in my knowledge base.

Day 5-9

Spent the week deep diving into JavaScript. Working through some simple projects, coding challenges and courses on freeCodeCamp, Udemy and Front End Mentors. Built a few simple projects in Vanilla Javascript, including a to-do list that stores and retrieves data using localStorage, and a progress bar indicator. Learned a lot about Objects, methods and DOM manipulation. I Also messed around with CSS and learned some stuff about transitions and animations. I’m starting to gain a deeper understanding of how JS works, which I hope will pay dividends down the road.

KieranWebDev/100-Days-Of-Code-Diary-School-of-Code-Bootcamp-Diary