CPT Frontend progress
this blog contains the progress made on our create project task, specifically the frontend. This blog will include the details on what features have been coded, how I coded them, and problems encountered on the way
- What features have been coded?
- More about the features
- Difficulties experienced
- Few ways we modularized/ increased efficiency in our code
- Next steps towards the frontend development
- Link to the project images
More about the features
- homepage: The homepage includes the navbar and details about our web-app Etracker (name subject to change). The homepage will have clickable elements where the user can click to find more information about the web-app.
- Workout logger: The workout logger includes the navbar at the top and the workout tracker. The user can click the add workout button to, well, add a workout. The user can then click on which workout to log (still in development).
- Navbar: The navbar nearly done. I still need to code the login button to do what it's supposed to, which is to redirect to a login page. We are planning to use oauth2 for the login. The login page will be designed shortly. The navbar includes all the pages that will be on the website.
Difficulties experienced
Sure, it doesn't seem like a lot of features have been coded, but that is because I am doing extensive research on how to get the features to work. For example, I was doing research on the workout logger, but it had to be cutshort inorder for the navbar to be developed. Talking about the navbar, it was a pain in the butt to get it to work. Other files from the leuck project interefered with it and caused a bunch of errors. For example, the workout logger had bugged out and wasn't displaying/working how it is supposed to. So far, the easiest has been the CSS. I only had to search up the type of code I needed and followed tutorials to make it look how I want it to.
Few ways we modularized/ increased efficiency in our code
The first way we did this is through dividing elements into different files (organized in folders) to make the code look more polished. We did this by linking the files into the html. For example, we would not code the JS into the html file. We rather added a source to the script tag and then linked the separate JS file to the script. We also used scss to make our UI development more efficient. SCSS features such as mixins and vars were crucial and saved a lot of copy-pasta time.
Next steps towards the frontend development
This week there will be strict deadlines towards the frontend development. The main features that will need to be designed are: Log in page, completed workout tracker, and completed homepage. The user customization will also have been touched upon. More information will be on the scrumboard.