Labs III - Feature Complete

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 I nearly finalized my work on authentication and began to move on to other tasks. After revamping the sign up process to include a username selection page, I began to work on the projects and reviews lists in the account page. From there, I improved the user experience for smaller devices with responsive design. Incorporating unique usernames into our database proved to be another obstacle as communication between the auth0 database and our local database could potentially be complex depending on how we went about it. We chose to authorize a new user with auth0 and redirect them to a new “change” route which prompts them to pick a username. From there they submit their desired username, which is then tested against our local database to determine whether it’s unique or not, and if so that user is added. However there were some gripes with this method, such as the user authorizing with auth0 and being redirected to select a username but not doing so. This would cause the user to have an entry in the auth0 database but not in ours, meaning they would have limited access to resources on our website despite being “logged in”. Bugs such as these were acceptable for this week, as long as the core functionality was in tact. For the most part, I believe our group delivered.

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
Unique Usernames	Github: https://github.com/Lambda-School-Labs/Labs8-RateMyDIY/pull/76 Trello: https://trello.com/c/EvDg2gBe/91-change-usernames
Projects and Reviews List	Github: https://github.com/Lambda-School-Labs/Labs8-RateMyDIY/pull/80 Trello: https://trello.com/c/g8rMg540/90-view-my-projects
Responsive Landing Page	Github: https://github.com/Lambda-School-Labs/Labs8-RateMyDIY/pull/88 Trello: https://trello.com/c/eOpJpYGI/114-responsive-design-landing-page
Responsive Search/Accounts Page	Github: https://github.com/Lambda-School-Labs/Labs8-RateMyDIY/pull/93 Trello: https://trello.com/c/ZzZbUz49/115-responsive-design-search-page

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: Projects and Reviews List

I would describe setting up the projects and reviews lists as definitely accessible. It was something different than authentication and more along the lines of what we had been taught in school. I will give some background as to how our website works before diving right in. Once the App component mounts, it dispatches an action to get a “loggedIn” endpoint. This endpoint grabs the clientid assigned by auth0 from the req.user object and queries our local database for users with that same id (stored as authid in our local database). This returns a payload of the user’s information such as their userid, authid (they are different), username, user rating, etc, which is saved in the redux store. To access a user’s projects or reviews, an action is dispatched posting to a project list or review list endpoint that sends the user_id from the redux store in the request body.

It then goes through authentication middleware that accepts the userid and grabs the user’s authid from it, and compares that against the auth_id stored in the req.user object. If these values are the same (which they should be) then it passes. If not, it will return a not authorized error message. Once it has gone through the middleware, it is on to the endpoint itself.

These endpoints query the database with their respective data tables with the user_id passed to them and return that user’s projects or reviews. This data is then sent to the front end. The respective components utilize a ComponentDidUpdate React lifecycle hook that compares the previous props to the current props and retrieves the data. The end result is a populated array of projects or reviews!

As a part of your journal entry, write ¼ to ½ a page reflecting on your experiences working with a team to convert a disparate set of components into a single, cohesive, and complete product. Describe the challenges you faced and the steps you took to overcome them.

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/DBsYr2I86yQ