Team Members:
- Breckelle Zheng (bzheng12)
- Ezra Rocha (erocha1)
- Isaac Jenemann (ijeneman)
- Sam Feldman (sfeldma8)
GitHub Repo: https://github.com/cs0320-s2023/my-style-guide
Time Spent: 20 hours each
The front end is composed of two main components, one to take in user inputs and the other to display the results. The searchForm component contains one input text box for the user to enter one color and one font keyword to describe their desired UI design. The input is then tokenized and sent to the backend. The first token, the color, is passed to the backend and the hex values of 4 different colors are returned. The second token, the font keyword, is then passed to the backend which returns a font and style. The second component, StyleGuideBox, displays the data given by the backend. The four colors are displayed in their own boxes and labeled with their hex value. Below the four color boxes on the left side will be the name of the font given by the backend as well as examples of the font in four different sizes. On the right side, There will be six different buttons styled with the first and second color given from the backend. These buttons will all be slightly different to show how they would look under different states such as hover, active, or disabled.
The back end contains two main route handlers, a proxy handler, as well as a top level server class. The server class is used to start the server as well as to set any configurations. The ColorHandler class handles the api call for the user's color input and returns a list of colors to be displayed on the front end. It works by having a JSON containing descriptions for each color. A filtered list is created containg colors with matching descriptions and then a color from the filtered list is chosen at random. The FontHandler class takes in the font description keyword and makes an api call to GPT3 which returns a specific a font from google's font library. A call is then made to google's fonts api which then returns a font family that can be used on the front end.
For testing the front end, we used the react testing library to check that each component gets rendered correctly without crashing. We also checked text content on the screen for different keyword inputs.
On the back end, we used both unit and integration testing. For unit testing, we tested the helper methods for edge cases that could cause problems later on and we tested our proxy class to ensure that valid RGB values were being returned. For integration testing, we gave sample to the colorHandler and checked valid inputs as well as input that would throw error messages.
To run test for frontend:
cd frontend
npm test
To run test for backend
cd backend
mvn test
Open Server.java in backend and click run. The message "Server Started" should be printed in terminal.
Run the following commands in terminal.
npm install
cd frontend
npm run dev
Open localhost:5173 in your browser to use program.