dario13 / MOM_Project

♠ Full stack DAPP with focus on best practices and scalability

---

This project aims to create a full stack DAPP with focus on best practices and scalability. It's a simple card game but with many applied concepts.

TL;DR

• Game
• Storybook

If you want to test the game, just open an issue indicating your wallet address of Goerli and I will send you some MOM tokens to play :)

Table of content

• Why MOM?

• About the game

• Project structure

• Principles

• Design Patterns

• Architecture

• Metodologies

• Technologies

• Run project

• Run Tools

• To Do

  
  
  

Why MOM?

The name MOM stands for Maximum Or Minimum. It's clearly not the best synonym for Higher or Lower, and was a mistranslation early in development, but I liked the initials and kept that name.
The main purpose of this project is to focus on the technical aspects of a simple business domain.

About the game

MOM is a simple card game, where you have to guess if the next card in the deck is higher or lower. The game is played with a standard deck of 52 cards. The cards are ranked from highest to lowest as follows: Ace, King, Queen, Jack, 10, 9, 8, 7, 6, 5, 4, 3, 2. The card suit is used when two cards of same value are dealt consecutively, then the suit define what is higher. The suit ranking is:

1- ♣ (clubs)
2 - ♦ (diamonds)
3 - ♥ (hearts)
4 - ♠ (spades)

The player is dealt one card face up and then bets on whether the next card will be higher or lower. The player wins if their guess is correct. The game offers three different difficulty levels: Easy, Medium, and Hard. The higher the difficulty, the higher the bet and subsequently, the prize.

Project structure

The repository is a monorepo, which means that it contains multiple projects. Currently contains 2 projects:

1. The backend project, that uses Hardhat as a development environment, testing framework and deployment tool for Ethereum smart contracts.
2. The frontend project, which is a React app that interacts with the smart contracts.
   
   

Principles

The project is based on the following principles:

• SOLID
• Separation of Concerns (SOC)
• Don't Repeat Yourself (DRY)
• You Aren't Gonna Need It (YAGNI)
• Keep It Simple, Silly (KISS)
  

Design Patterns

For the backend, the following design patterns were used:

• Factory
• CEI(Check Effects Interaction)
• Proxy Upgrade

and for the frontend:

• Provider
• Composition
• Hooks
• Null pattern

Architecture

• Model View Presenter (on the Front)

  
  
  

Methodologies

The items in this section are not strictly related to methodologies, but are concepts that I applied to the project and helped me to maintain an organized, structured and testable code.

• Atomic Design

• GitFlow

• Monorepo

• Continous Integration

• Continous Deployment

• Conventionnal Commits

• Semantic Versioning

• Linting and Formatting

• Unit Testing

• Fuzzing Testing

  
  

Technologies

The most relevant technologies used in this project are:

Back	Front	General
Solidity Hardhat OpenZeppelin Chainlink Ethers.js Slither Chai	ReactJS NextJS Storybook Zustand Jest React Testing Library Tailwind CSS Three.js	Typescript Lerna Yarn Workspaces ESLint Prettier Husky Lint Staged Commitlint CodeQL (on CI) Docker ACT (Run GitHub Actions locally)

Run project

To run the project, you need to have Yarn installed, Node and Metamask .

1. Clone the repository

2. Install dependencies

yarn install

3. Run the backend project

Inside the Backend folder, run:

yarn hardhat node

4. Copy the PriceFeedConsumer contract address and paste it in the env.local.ts file in the Frontend/src/config folder

5. Run the frontend project

Inside the Frontend folder, run:

yarn dev

Run Tools

Because of the monorepo structure, some tools need to be run from the root of the project and others in their own packages(Backend/Frontend).
The context for executing each each tool is clarified in parentheses.

• Slither and Echidna (Backend)
  For running these tools, I use a docker image, you can run this command to get the image:

  docker pull trailofbits/eth-security-toolbox

  
  Then you need to run the following command:

  yarn toolbox

  
  And inside the container, you can run slither as follows:\

  slither /src/Backend/contracts/ --solc-remaps '@openzeppelin=/src/node_modules/@openzeppelin @chainlink=/src/node_modules/@chainlink' --exclude naming-convention,external-function,low-level-calls

  
  And echidna as follows:

  echidna-test /src/Backend/contracts/test/fuzzing/Match.test.sol --contract MatchTest --config /src/Backend/contracts/test/fuzzing/config.yml

• Mythril (Backend)
  To run mythril, you can do it with docker. First, you need to get the image:

  docker pull mythril/myth

  
  Then you can run it (one contract at a time) as follows:

  docker run -v ${PWD%/*}:/src mythril/myth analyze --solc-json /src/Backend/mythril-config.json /src/Backend/contracts/{contract_name}.sol

• Storybook (Frontend)
  To run storybook, you need to run the following command:

  yarn storybook

• HomePage (Frontend)
  For creating the 3D view of the home page, was used this site: https://matheowis.github.io/HDRI-to-CubeMap/

To Do

• Create a page for explain how to use the site.
• Create a page for the user's game history.
• Deploy in another testnets