Labs IV - Presentation

Provide a paragraph (5-8 sentences) summarizing the work you did this week, the challenges you faced, the tools you used, and your accomplishments.

This week felt more productive than previous weeks. Although our assigned task was to polish our app, a significant amount of time was spent implementing minor features and completing overall functionality. Additionally, we assumed bug fixing would be prevalent and embraced that. To start the week, I pair programmed with a team member to fix a such a bug with authentication. After that, I changed the dropdown menu to follow our style guidelines more closely. I then added a dynamic theming feature that with one fell swoop could reimagine what our app looked like. I moved onto the settings page which was overhauled by including new functionality and then redesigned. After a check-in meeting towards the end of the week, there was a collective feeling that our app was in a good spot and on pace to be finished on time.

List the tasks you pulled this week, and provide a link to the successfully merged PR completing that task and the trello card for that task. You must have at least one front end and one back end. The expected total is 6 with a minimum of 4.

PR	Links
Fixed Logout	Github: https://github.com/Lambda-School-Labs/Labs8-RateMyDIY/pull/103 Trello: https://trello.com/c/r4J3Q4RA
User Profile Picture	Github: https://github.com/Lambda-School-Labs/Labs8-RateMyDIY/pull/107 Trello: https://trello.com/c/VogH9E9L
Dynamic Theme	Github: https://github.com/Lambda-School-Labs/Labs8-RateMyDIY/pull/114 Trello: https://trello.com/c/1G11mFTH
Settings Features	Github: https://github.com/Lambda-School-Labs/Labs8-RateMyDIY/pull/115 Trello: https://trello.com/c/abGS4Xmm
Settings Style	Github: https://github.com/Lambda-School-Labs/Labs8-RateMyDIY/pull/120 Trello: https://trello.com/c/yEsFGsdc

Pick one of your tickets and provide a detailed analysis of the work you did. This should be approximately ¼ page of text, and at least three screenshots.

PR chosen: Dynamic Theming

My favorite part of the week was working on the dynamic theming feature of our app. To successfully implement this, I had to manage multiple styling libraries including material-ui and styled components. The decision to include both of these in our project stems from the idea that they both bring lots of UI features and functionality to the table. After reading documentation, I found that they both had ThemeProvider components. I set it up so the material-ui theme provider is rendered first, and this component passes the theme property down to children components through the context API. Because the styled components theme provider was a direct child of the material-ui theme provider, it inherited this property. Now the styled components theme provider needs its own theme prop, so the one it receives from material-ui is mapped to a “mui” property. There is also a “mode” prop to switch between light and dark themes.

We then apply a HOC to "StyledComponentsTheme" to generate a child that accepts a theme from material-ui. This allows all children of the new component to follow a configurable theme in material-ui even if they are styled components. The differences in styling methods are shown below, but now each can access the same theme.

A sample output of the code is as follows:

As a part of your journal entry, write ¼ to ½ a page reflecting on your experiences working with a team to make your product look and feel as good as it works under the hood. Describe how the duties of you and your team shifted tasks shifted towards the front end - and debugging the back end to improve UX.

Converting a disparate set of components into a complete product felt like putting a puzzle together. While we had been taught everything necessary to create a brand new product from scratch, we quickly realized that this wasn’t mandatory since using existing third party frameworks and libraries to construct our product still yields something special. The key was to fit all of the weirdly shaped pieces in the right place. For example, using multiple styling libraries to encompass all of the components that we desired but overriding some of the default class names. Aside from dependencies causing some problems, we encountered issues with git. With so many people working on one product, there are bound to be conflicts and there were many instances of just that. What I learned was to commit more often and pull frequently to constantly stay up to date. This beats having to delete my entire code base and re-clone the repository as I had done in the past. Additional challenges include the mindframe you become entrenched in. If you’re not careful and using techniques such as test or behavioral driven development, it becomes easy to develop in a way where you expect a user to act the way you would, and this is not always the case. Thinking outside the box and solving problems beyond the scope of what is present is hard to do, but required in this profession. At this stage in the game, I would say its our toughest challenge yet.

Feature	Links
Landing Page	https://ratemydiy.netlify.com
Search	https://ratemydiy.netlify.com/search
Project List	https://ratemydiy.netlify.com/projectlist
Review List	https://ratemydiy.netlify.com/reviewlist
Settings	https://ratemydiy.netlify.com/settings
Interview	https://youtu.be/nZ3x7IlsUZk