...
7. Frontend
UX/UI Design
Colour
Blue / Purple
Inviting and welcoming
Promotes a calming environment
User Experience Factors
Buttons
Interactive flow
Use of well named buttons
Figma Prototype
Prototype completed to accuracy
Ensured that the front end replicated the prototype
Issues
Not as efficient / fast since it waits for API to work. Has to boot up the server for the front end to work (5-10 seconds every time)
Wireframe :
...
Prototype 1
Prototype 2
...
Layer
...
Framework
...
Notes
...
Current team member knowledge of frameworks
...
Difficulty of frameworks to learn
...
How well the framework is documented
...
Availability / pricing of platforms
...
React
...
Front-end
...
Library
...
Joshua has minimal. Rest of team has no experience
...
Free + open source
...
Boot strap
...
CSS Framework
...
Vanilla
...
Angular
...
Front-end
...
Full-framework
...
Team has no experience
...
-Quite difficult to learn in comparison to React
-Steep learning curve.
...
Free + open source
...
Vue
...
Front-end
...
Team has no experience
...
-Challenging to debug
...
Free + open source
...
Ext JS
...
Team has no experience
Different packages :
Community : Free (for up to 5 developers)
Pro: $1300 per developer.
Enterprise: $1900 per developer
...
Express
...
Back-end
...
Team has no experience
...
Free + open source
...
Next.js
...
Back-end
...
Team has no experience
...
Free + open source
...
NodeJS
...
Team has no experience
...
Free + open source
Deployment
Our frontend is deployed at: https://fudge-seng2021.herokuapp.com/
Architecture
We used a number of different systems as part of our frontend
On top of Javascript we use NextJS framework on top of NodeJS along with the react library.
We then deployed using Heroku.
...
Backend
To integrate with our frontend, we created a backend server using the same systems as our API. From there we set up authentication along with token management. We also later took advantage of it to forward requests to our rendering API as there were issues with CORS on the service.
Method | Name | Description | Parameters | Return values | Exceptions |
|---|---|---|---|---|---|
POST |
| Logs user into their account and returns a token for their session |
|
| 400 errors:
|
POST |
| Logs user out of session and disconnects any tokens associated with them. | Header:
|
| 403:
|
POST |
| Creates new user and returns token for their session. Valid password is min 8 char, contains at least 1 upper case and 1 digit |
|
| 400:
|
POST |
| Deletes user. Also logs users out of any tokens currently associated with them. | Header:
|
| 403:
|
POST |
| Generates and returns tokens for UBL XML apis. Should logout/delete any existing tokens connected to session. | Header:
|
| 403:
|
POST |
| Logout/delete any existing tokens connected to session. | Header:
|
| 403:
|
POST |
| Connects and forwards requests to rendering API to get around CORS issue on api | Header:
Body:
| HTML (String) | 400:
403:
|
POST |
| Updates/sets value of user for XML creation | Header:
Body:
|
| 403:
|
GET |
| Returns values of user for XML creation | Header:
|
| 400:
403:
|