Architecture 🏛

The architecture consists of 3 repositories:

1. Client Application
2. Server
3. Smart Contract (currently deployed to Binance Test Network)

Setup 🏗

• Run yarn or npm install to install dependencies
• Create a .env.local with the same SERVER_SECRET as in the server repo.
• Create another environment variable GRAPHQL_ENDPOINT="http://localhost:5000/graphql" and STAGE=development
• Metamask needs to be setup and a connection to Binance Test Network needs to be added https://academy.binance.com/en/articles/connecting-metamask-to-binance-smart-chain

Development 🚀

1. Run yarn dev to start the Client
2. Run the Setup for the Server and start it on localhost:5000
3. Visit localhost:3000 to view the running Application

Testing 🧪

The client uses the Jest and Cypress testing Frameworks.

• To run Cypress End-to-End tests run all the necessary setup steps for the Client and Server and then run yarn cy:open.

Repository structure 🗂

• The application’s architecture is monolithic
• The individual pages resides in the /pages folder
• Various reusable React components reside in the /components folder
• The GraphQL Code Generator can be found in the /graphql directory
• The styles folder contains the 7-1 SCSS architecture

Client Application Architecture/Components 🧱

• Next.Js + React.Js: Our frontend Client uses React and the React framework Next.Js for routing, state management etc.
• Apollo Client: Used to fetch data from Server API.
• GraphQL CodeGen: Used to automatically generate typed from GraphQL queries
• SCSS Modules: For component level styles
• 7-1 SCSS Architecture: For global styles and utility classes.