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

Figma Design :

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

Method	Name	Description	Parameters	Return values	Exceptions
POST	`/auth/login`	Logs user into their account and returns a token for their session	`{` `email: (String)` `password: (String)` `}`	`{` `token : (String)` `}`	400 errors: Invalid password or email
POST	`/auth/logout`	Logs user out of session and disconnects any tokens associated with them.	Header: `{` `token : (String)` `}`	`{` `}`	403: Invalid token
POST	`/auth/register`	Creates new user and returns token for their session. Valid password is min 8 char, contains at least 1 upper case and 1 digit	`{` `email: (String)` `password: (String)` `}`	`{` `token : (String)` `}`	400: Invalid email or password Email already registered
POST	`/auth/remove`	Deletes user. Also logs users out of any tokens currently associated with them.	Header: `{` `token : (String)` `}`	`{` `}`	403: Invalid token
POST	`/apis/connect`	Generates and returns tokens for UBL XML apis. Should logout/delete any existing tokens connected to session.	Header: `{` `token : (String)` `}`	`{` `send_token : (String)` `}`	403: Invalid token
POST	`/apis/disconnect`	Logout/delete any existing tokens connected to session.	Header: `{` `token : (String)` `}`	`{` `}`	403: Invalid token
POST	`/apis/forward_render`	Connects and forwards requests to rendering API to get around CORS issue on api	Header: `{` `token : (String)` `}` Body: `{` `xml: (String)` `}`	HTML (String)	400: Error with rendering 403: Invalid token
POST	`/user/data`	Updates/sets value of user for XML creation	Header: `{` `token : (String)` `}` Body: `{` `businessName: (String)` `contactName: (String)` `electronicMail: (String)` `supplierId: (Integer)` `street: (String)` `postcode: (String)` `country: (String)` `currency: (String)` `}`	`{` `}`	403: Invalid token
GET	`/user/data`	Returns values of user for XML creation	Header: `{` `token : (String)` `}`	`{` `businessName: (String)` `contactName: (String)` `electronicMail: (String)` `supplierId: (Integer)` `street: (String)` `postcode: (String)` `country: (String)` `currency: (String)` `}`	400: No users values have been saved 403: Invalid token

SE2Y22G21

FrontEnd

Analytics