# RAIRfrontend

{% hint style="info" %}
The reducer.ts file contains the 0x addresses for the frontend to properly route smart contracts. By default we use our own smart contracts to the frontend should work out-of-the -box with no configurations required.
{% endhint %}

## Frontend ENVs

Are listed in the Frontend ENV library. By default these should all work. 

## Navigating the Frontend Repo

Below are short descriptions of some of the files in each service directory. Use these as a reference when getting started. 

<table><thead><tr><th width="182">Link to github</th><th>description</th></tr></thead><tbody><tr><td><a href="https://bitbucket.org/rairtech/rair/src/main/minting-marketplace/.husky/">.husky</a></td><td>Helper to automatically lint your commit messages, code, and run tests upon committing or pushing.</td></tr><tr><td><a href="https://bitbucket.org/rairtech/rair/src/main/minting-marketplace/commands/">commands</a></td><td>For custom scripts to be run on /RAIRfrontend</td></tr><tr><td><a href="https://bitbucket.org/rairtech/rair/src/main/minting-marketplace/nginx-prod/">nginx-prod</a></td><td>Nginx Configurations (Prod)</td></tr><tr><td><a href="https://bitbucket.org/rairtech/rair/src/main/minting-marketplace/nginx/">nginx</a></td><td>Nginx Configurations </td></tr><tr><td><a href="https://bitbucket.org/rairtech/rair/src/main/minting-marketplace/public/">public</a></td><td>Public files like favicons</td></tr><tr><td><a href="https://bitbucket.org/rairtech/rair/src/main/minting-marketplace/src/">src</a></td><td>Main source folder (see below)</td></tr></tbody></table>

#### /src

<table><thead><tr><th width="252">Name</th><th>Description</th></tr></thead><tbody><tr><td>components</td><td>Code for Individual page features</td></tr><tr><td>contexts</td><td>Contains context for CreatorStudio (Factory)</td></tr><tr><td>contracts</td><td>Frontend needs to route properly to the ABIs of smart contracts using these .JSONs</td></tr><tr><td>ducks</td><td>Ducks is short for (Redux) this folder handles state management for data</td></tr><tr><td>fonts</td><td>This is where the fonts are</td></tr><tr><td>hooks</td><td>In this folder exists custom React hook</td></tr><tr><td>images</td><td>just images and index.ts where all the imports exist</td></tr><tr><td>providers/ModalProvider</td><td>local state(context) for main filter modal</td></tr><tr><td>styled-components</td><td>styles components. Styled-component is a style library</td></tr><tr><td>typescript-global-types</td><td>folder where BlockchainType exists</td></tr><tr><td>utils</td><td>custom functions and data for blockchain</td></tr><tr><td>views/ErrorFallback</td><td>This folder contains the component where the error page exists.</td></tr><tr><td>App.css</td><td>Also Main stylesheet file just for App component</td></tr><tr><td>App.tsx</td><td>It's a main component after main.tsx</td></tr><tr><td>axios.responseTypes.ts</td><td>file containing the response types from the request</td></tr><tr><td>index.css</td><td>Main stylesheet file</td></tr><tr><td>main.tsx</td><td>A file in which we can connect certain rules for the App component. Example: StrictMode, Routing, Helmet, Context</td></tr><tr><td>vite-env.d.ts</td><td>The file vite-env.d.ts refers to a TypeScript declaration file used in a project built with Vite.js.</td></tr></tbody></table>