Week 8: Making It Pretty

Hey guys! 

The backend work is coming to an end, and I’m super excited to be switching my focus to the front end. There’s one last bug I was dealing with last week regarding the backend, and I think fixing it represented the interactions between the front and backend quite well. 

The main issue I was having was transitioning between the home page, registration/login, and the ingredient list. Since some pages were restricted, some of the buttons worked, while others didn’t. For instance, anyone can view the home and registration/login page, but only registered users can view there specific ingredient list. With the current design, the home page has a “go to ingredient list button”, but what happens if a non-registered user clicks that button? Or what happens if a registered user clicks the login button; could they log in again without logging out? 

When I was designing the home page, I didn’t consider these situations. However, creating two new homepages doesn’t really make sense. Instead, I should create a navigation bar: one that changes based on if users are new or registered. 

What is a navigation bar. Most of you guys are probably familiar with one; its the series of buttons on the top of any webpage that help users navigate. For instance, for Second Harvest Food Bank, the navigation bar is the section with the following buttons: Get Food, Give Help, About Us, and Stories, and the logo.  

I created the following Figma model which I’ll use to design my nav bar:

  And when user’s register, their new nav bar will look like this:  

The navigation bar is a great way to keep continuity between pages but create easy navigation for the users. After creating the nav bar, fixing the bug was pretty simple; I just changed the authentication settings to match! 

Next week, I’ll continue with the CSS and front end work! Catch you guys next week! 

Sources:

Second Harvest of Silicon Valley:

https://www.shfb.org/