[](https://twitter.com/EOSCostaRica) 

EOSIO Frontend Boilerplate

A highly scalable skeleton with best practices, ideal for React Web App projects quick start

Features!

This boilerplate features all the latest tools and practices in the industry.

• React.js - React 18✨, React Router 6, React Context
• TypeScript - TypeScript is JavaScript with syntax for types.
• MUI - Material UI v5✨ React components for faster and easier web development
• Graphql - Graphql Clients✨ A query language for your API
• UAL hook - Custom hook created by Edenia Labs✨ A wrapper for Universal Authenticator Library (UAL Core for short) to allowing apps to easily use different auth providers (optional)
• Lint - ESlint find and fix problems in your JavaScript code
• Styles - Material-UI Theme (customizable)
• i18n - react-i18next is a powerful internationalization framework

Installation

Before to start

Somethings you need before getting started:

• git
• node.js
• yarn

First time

Copy the .env.example then update the environment variables according to your needs

cp .env.example .env

If you want to the boilerplate using UAL login integration, please make sure that REACT_APP_USE_UAL env variable is set as true.

Development

Quick start

1. Clone this repo using git clone --depth=1 https://github.com/eoscostarica/webapp-boilerplate.git <YOUR_PROJECT_NAME>
2. Move to the appropriate directory: cd <YOUR_PROJECT_NAME>.
3. Run yarn in order to install dependencies. At this point you can run yarn start to see the example app at http://localhost:3000.

File Structure

Within the download you'll find the following directories and files:

eoscrwebappboilerplate/
├── public
│ ├── index.html
│ └── manifest.json
│
├── src
│ ├── components
│ ├── config
│ ├── context
│ ├── gql
│ ├── hooks
│ ├── language
│ ├── layouts
│ ├── routes
│ ├── theme
│ ├── types
│ ├── utils
│ ├── App.tsx
│ ├── index.tsx
│ ├── graphql.ts
│ └── i18n.ts
│
├── .babelrc.js
├── .dockerignore
├── .env.example
├── .eslintrc.json
├── .gitignore
├── .prettierrc
├── .config-overrides.js
├── docker-compose.yml
├── Dockerfile
├── LICENSE
├── nginx.conf
├── package.json
├── README.md
└── tsconfig.json

Contributing

Please Read EOS Costa Rica's Open Source Contributing Guidelines.

Please report bugs big and small by opening an issue

About EOS Costa Rica

EOS Costa Rica is an independently-owned, self-funded, bare-metal Genesis block producer that provides stable and secure infrastructure for the EOS mainnet. We support open source software for our community while offering enterprise solutions and custom smart contract development for our clients.