Versions Compared

Version Old Version 6 New Version Current
Changes made by

Garvi Poudyal

Garvi Poudyal

Saved on

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

7. Frontend

As part of this Sprint you are expected to develop a prototype web-based frontend for the interface layer of your application (connected to your services). You will first, based on your system modelling and use cases, need to develop a User Interface Design that outlines what your website will look like.

We will not be marking your UI Designs - we will only be assessing the proof of concept your present in your pitch. However, you may wish to consider writing a few low-fidelity UI designs (wireframes/sketches) to begin with, and then a higher-fidelity one in a tool such as Lucidchart or Figma.

-Wireframes

-Figma design

-Colour stuff

-Code

-Table comparing which language we are using / platform etc etc 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 :

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

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

/

api

apis/connect

Generates and returns tokens for UBL XML apis. Should logout/delete any existing tokens connected to session.

Header: {

token : (String)

}

TO UPDATE WITH FINAL API CHOICES

{

send_token : (String)

}

403:

  • Invalid token

POST

/

api

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

TODO Add the values for this

{

TODO Add the values for this

{

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

TODO Add the values for this

{

}

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