Creating Static HTML and CSS
Using react started by creating and setting up static HTML with similar data that would be replace with data from the API. I only started with the primary core of the app, which included App, Landing, BicycleDetail, AddBicycle, and EditBicycle. All of the pages that applied to user were put on the back burner since despite the previous planning I wasn't entirely sure how I wanted those aspects to work. Further, by adding in basic navigation I was able to get a feel for the flow of the page. The time it took me to layout the static HTML and CSS enabled me to set the bases for the overall visual ascetic and validate that my ERD by laying out where data would be needed and making sure there were no omissions.
Main
The App has probably changed the most since the inception of the app, and despite being functional finished I made a small UI change to the header today after some feedback. The header needs to house three items depending on the state of isLoggedIn. (I will a post just on the ternaries used on the APP page) 1. Main link to return user to the main page from anywhere in the app. 2. Needs to have a linked to signin/signout for the user. 3. A place to signup and if the user is signed in a linked to the users page. The footer was set to be of little use to the user but instead have links to my personnel website and github. If this wasn't my capstone I would have populated the area with more use relevant material such as a away to contact website admin or some type of user assistance.
The results and learning
I started with the app in mobile mode. That was I would be able to make the navigation and layout for a smaller screen first. This led to minor tweaks to the UI which include changing what items were linked as well as moving the positioning of those links to make sure they are more naturally accessible on smaller screen. As the app developed I made the layout and design responsive to bigger screens. Putting in this time gave me a more robust foundation that saved a great deal of time during the apps development.
Next article creating the migrations and controllers.
Top comments (0)