> For the complete documentation index, see [llms.txt](https://optim-finance.gitbook.io/optim-finance/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://optim-finance.gitbook.io/optim-finance/oada-ui/tutorials/environment-setup-and-installation.md).

# Environment Setup and Installation

This tutorial will guide you through setting up your development environment for the OADA UI project. By the end of this tutorial, you'll have a working development environment and be able to run the application locally.

### Prerequisites

Before you begin, ensure you have the following installed:

* [Node.js](https://nodejs.org/) (v16 or higher)
* [npm](https://www.npmjs.com/) (v7 or higher) or [yarn](https://yarnpkg.com/) (v1.22 or higher)
* [Git](https://git-scm.com/)
* A Cardano wallet (e.g., [Eternl](https://eternl.io/), [Nami](https://namiwallet.io/))

#### Recommended Development Tools

* [VS Code](https://code.visualstudio.com/)
* [Chrome DevTools](https://developer.chrome.com/docs/devtools/) or [Firefox Developer Tools](https://developer.mozilla.org/en-US/docs/Tools)
* [React Developer Tools](https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi) browser extension
* [Redux DevTools](https://chrome.google.com/webstore/detail/redux-devtools/lmhkpmbekcpmknklioeibfkpmmfibljd) browser extension

### Step 1: Install Node.js and Package Manager

1. Download and install Node.js from the [official website](https://nodejs.org/)
   * Choose the LTS (Long Term Support) version
   * The installer will include npm by default
2. Verify your installation:

   ```bash
   node --version
   npm --version
   ```
3. (Optional) Install Yarn:

   ```bash
   npm install -g yarn
   ```

### Step 2: Clone the Repository

1. Open your terminal and navigate to where you want to store the project:

   ```bash
   cd /path/to/your/projects
   ```
2. Clone the repository:

   ```bash
   git clone https://github.com/OptimFinance/oada-ui.git
   cd oada-ui
   ```

### Step 3: Install Dependencies

You can use either npm or yarn to install the project dependencies:

Using npm:

```bash
npm install
```

Using yarn:

```bash
yarn install
```

This process might take a few minutes as it downloads all required dependencies.

### Step 4: Configure the Project

1. Create a configuration file by running:

   ```bash
   ./generateConfig.sh
   ```

   Or manually copy the example file:

   ```bash
   cp src/config.local.ts.example src/config.local.ts
   ```
2. Create a `.env` file in the root directory:

   ```bash
   touch .env
   ```
3. Add the following environment variables to your `.env` file:

   ```env
   REACT_APP_API_URL=http://localhost:3000
   REACT_APP_ENV=development
   REACT_APP_VERSION=$npm_package_version
   ```

### Step 5: Start the Development Server

Using npm:

```bash
npm start
```

Using yarn:

```bash
yarn start
```

The application will start on `http://localhost:3000`. Your default browser should automatically open to this address.

### Step 6: Verify the Installation

1. Open your browser and navigate to `http://localhost:3000`
2. You should see the OADA UI application running
3. Check the browser's developer console for any errors
4. Verify that the application can connect to your Cardano wallet

### Troubleshooting

#### Common Issues

1. **Port Already in Use**\
   If you see an error about port 3000 being in use:

   ```bash
   # Find the process using port 3000
   lsof -i :3000
   # Kill the process
   kill -9 <PID>
   ```
2. **Node Version Issues**\
   If you encounter Node.js version-related errors:
   * Make sure you're using Node.js v16 or higher
   * Consider using [nvm](https://github.com/nvm-sh/nvm) to manage Node.js versions
3. **Dependency Installation Failures**\
   If npm/yarn install fails:

   ```bash
   # Clear npm cache
   npm cache clean --force
   # Remove node_modules
   rm -rf node_modules
   # Reinstall dependencies
   npm install
   ```
4. **Wallet Connection Issues**
   * Ensure your Cardano wallet is installed and unlocked
   * Check that you're on the correct network (testnet/mainnet)
   * Try refreshing the page or reconnecting the wallet

### Next Steps

Now that you have your development environment set up, you can proceed to:

1. Understanding the Project Structure
2. Basic Configuration and Customization

### Additional Resources

* [Node.js Documentation](https://nodejs.org/en/docs/)
* [npm Documentation](https://docs.npmjs.com/)
* [Yarn Documentation](https://yarnpkg.com/getting-started)
* [React Documentation](https://reactjs.org/docs/getting-started.html)
* [Cardano Developer Portal](https://developers.cardano.org/)

### Getting Help

If you encounter any issues not covered in this tutorial:

1. Check the Troubleshooting Guide
2. Search the [GitHub Issues](https://github.com/OptimFinance/oada-ui/issues)
3. Join our [Discord Community](https://discord.gg/VZ329q7x69)