Labs: Fourth Week - Presentation
Date: December 7, 2018
This week was all about making the project look good. We had been focusing on functionality only throughout the previous weeks so there was a lot of work to do in making it look like a real project. I worked on adding a cover image that looks good to the homepage and a search bar. I also worked on adding a navigation bar that will be on top of all pages in the website and will serve as the main navigation tool throughout the website. I tried to make the design choices based on common patterns that I’ve observed on other websites. Our project is inspired by the website Pexels as the functionality is similar and we really liked the way that the Pexels UI is designed. We spent time researching libraries that have pre-built components that we can use for displaying the projects, makers, and reviewers and decided to go with Material UI because of their card components. These look pretty good out of the box and allow for decent customization in displaying necessary info. We built the cards using the Material UI cards.
I worked on improving the navigation of the website by adding a nav bar that would be added to all websites. The goal was to have all of the links accessible so that a user can easily navigate to all parts of the website. I felt this was a common way for websites to make navigation easier and wanted to follow this pattern. The navigation bar has a logo at the top left that takes the user back to the home page. It has a search bar component in the middle for quickly searching for a project. I had to re-work the search bar component a bit so that it worked on both the homepage and the nav bar. On the right side, the nav bar has a picture of the user if they are logged in that has a menu for all of the useful links. From there, the user can create a new project or view their settings.
Homepage Hero Image:
This week we were able to make progress faster. It felt good to have changes reflected and start to take shape as a professional project. As the functionality is almost complete, we shifted focus completely and began dedicating significant time to making it look good. We also spent time researching libraries and tools that can help in making the website look more professional like Material UI. I did more pair programming this week with a team member and I really enjoyed the process. As you are building the UI without a specific mockup in mind, it is very helpful to be able to do it in a collaborative way and ask questions as you go along. I enjoyed working together with a team member and we were able to be productive throughout the week.
Here is the link to our project: https://ratemydiy.netlify.com
The code challenge for this week was to build a function that takes in an array of numbers and a sum value and returns a list of pairs that equal the sum value provided. I was able to get a rough working function pretty easily but it included duplicates in the returned list of pairs. I had to spent a lot of time and re-working my solution to get a function that only returns the list of pairs.