Building the Front End Part 2 ​

We used React and Chakra Components to quickly build a react front end.

The full code for our front end client can be found on our github repo

If you arent familiar with react, thats okay, the scaffolding of Fact or Fiction can be used to develop with other frontend frameworks. We'll brifely go over our work.

/client/components ​

We have several stock components that we built quickly with typescript react and chakra that are reused throughout our game pages.

AnswerOverlay contains the response to the player if they are correct.

CircleTimer is used for the countdown clock. This component uses the useTimer located in the /client/utils directory.

Header is a useful component that gives the player the ability to easily connect their wallet. This component is custom built to include the KoionsAccountConnector from the react-koinos-toolkit. This can help speed up your development process if you're using react, so we'll look into this component more deeply.

SitePreferences is another great tool that can give you darkmode.

VoteBar and Votebutton are also largely built from chakra and contains effects from the react package.

The main takeaway is that we tried to use existing tools as much as possible.

/client/pages ​

We have all of our working pages described earlier. The game page itself is found in play.tsx and contains the logic to communicate with our Supabase backend.