...

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 :

• https://www.figma.com/file/VI4KErg8TXjPVMFtSrIWxZ/WIREFRAME?node-id=0%3A1

...

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.

...