The Snippet UI consists of an input and output area. The input area contains a code editor which accepts javascript code. The output area needs to display the result of the evaluated code in the code editor, e.g. see below. The goal of this activity is to hook up the Run button so that the results of the evaluated code appear in the output area.
- Hook up the
Runbutton so that the results of the evaluated javascript code appear in the output area of the UI. - Include a separate
README.mdentitledSOLUTION.mdexplaining a bit about what you did and also how you would test your solution.
- Make the UI your own by adding styling or improving the UX.
- Create a snippet history feature.
If you have extra time and want to go further, you could try your hand at hooking up the snippet history feature. The end result should be a simple list of previously run snippets identified by their snippet id. The task is as follows:
- Display a list of the previously run snippets in the side drawer (to get to the side drawer, see image below). You may use the snippet
idas the display text for each item in the list. - Make each item in the list clickable, and when clicked the UI should display both the input and output of the previously run snippet.
Hint: This requires examining the server/schema.ts file to determine which GraphQL queries are available and hooking them up utilizing Apollo Client.
In the project directory, you can run:
$ yarn && yarn start
If you have questions, run into issues, or find bugs, please feel free to contact us at [email protected].
When you are done, zip the project folder and email it to [email protected].
This project was bootstrapped with Create React App.
You can learn more in the Create React App documentation.
To learn React, check out the React documentation.