Frontend Implementation
Summary
Our team have decided to implement the frontend of our application with React.js along with Tailwind CSS for styling. The React components are organized by folders, with each folder having meaningful names and gathers components of similar or combined usages.
Within this post, We would be going through the React implmentation of key components to our web application. We would focus mainly on the logic side of the implementation. To see how the frontend would look like, please navigate to our demonstration videos.
Note that the screenshots taken would only contain essential segments of the full code, please refer to the source code on GitHub Repo for frontend if needed. Each screenshot would be labeled with the corresponding file path relative to the src folder in the frontend folder.
User Validations
See how we enforced user validation and access rights.
API
See how our frontend connects up with our backend.
Home
See how we managed the state of our Home page.
Popup
See how we created our highly reusable popups for displaying responsive messages to the user.
Form
See how we created the forms using standard templates and custom hooks.
End Notes
We hope that this summary of the key frontend implementation is useful for you to understand the logic of the current frontend.