...
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
Architecture
...
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
...
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.
...