61 front end pages styling

[ComeOnConMan]

What does this PR do?

This pull request is simply to merge in the extra front end pages that have been added for the sake of convenience. I have Added a Login, Completion, and very basic skeletal admin page. BONUS: After getting lost in the sauce, all 3 graphical components seen in the Completion page have been created. The components just need a connection to the backend, and work on temporary data as of right now. The word cloud, experience similarity pie chart, and the table with classification information have been added.

Github Issue Number

Resolves: #61
Pages created and ready to begin some more advanced implementation

Relates to:

Author checklist

If any of these points have yet to be satisfied, make sure that you set the title to the format DRAFT #issue-num Title

• The title is short and descriptive of the PR. Must start with the Github Issue Number (format: #issue-num Title).
• The description follows proper cl description practices and mentions related Github Issues (make sure this is the first thing you mention).
• Branch has merged in the latest version of main
• Linting has occured, as per the project linting config
• All changed functions have proper docstring/wiki updates (front-end team) to describe what they do and how to use them.
• Add yourself as the assignee.
• Add reviewer a reviewer and let them know on discord.
• Ensure that all relevant ticket has been linked to the PR

Reviewer checklist

• Relevant issue is mentioned in description
• Code solves the issue
• Code follows the specification
• Code is the best solution for the issue
• Branch is ahead of main
• Ensures the fix/feature works locally

[mustafa-tariqk]

Gonna add a couple requirements here:

• use jsdoc to automatically generate code documentation in client/docs (look at docpy.sh in scripts to see how I did it for python)
• do NOT make calls to 127.0.0.1 in code, instead, read in a SERVER_URL from .env file. So in steps this is, 1. abstract all calls to 127.0.0.1 and use globalurl + endpoint when making fetch requests, 2. Having the global url read .env with https://github.com/motdotla/dotenv

1 is optional, you should do it if you want a good grade, I mean we said we were gonna make code docs in presentations + we mention to go there to look in README.

2 is critical, if it doesn't get done I have to do extra work (editing all instances of 127.0.0.1 to another url/ip) every time I want the server up and running.

[BasicallyOk]

Need to address @mustafa-tariqk 's comment

[BasicallyOk]

Some more information, dotenv does not work in React out of the box because the browser cannot read the local dotenv file. So it takes some work baking it into the webpack first.

[BasicallyOk]

Merge in main then fix based on the comments

[BasicallyOk]

I changed it myself