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 (v16 or higher)

• npm (v7 or higher) or yarn (v1.22 or higher)

• Git

• A Cardano wallet (e.g., Eternl, Nami)

Recommended Development Tools

• VS Code

• Chrome DevTools or Firefox Developer Tools

• React Developer Tools browser extension

• Redux DevTools browser extension

Step 1: Install Node.js and Package Manager

1. Download and install Node.js from the official website

   • Choose the LTS (Long Term Support) version

   • The installer will include npm by default

2. Verify your installation:

   node --version
   npm --version

3. (Optional) Install Yarn:

   npm install -g yarn

Step 2: Clone the Repository

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

   cd /path/to/your/projects

2. Clone the repository:

   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:

npm install

Using yarn:

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:

   ./generateConfig.sh

   Or manually copy the example file:

   cp src/config.local.ts.example src/config.local.ts

2. Create a .env file in the root directory:

   touch .env

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

   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:

npm start

Using yarn:

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:

   # 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 to manage Node.js versions

3. Dependency Installation Failures If npm/yarn install fails:

   # 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

• npm Documentation

• Yarn Documentation

• React Documentation

• Cardano Developer Portal

Getting Help

If you encounter any issues not covered in this tutorial:

1. Check the Troubleshooting Guide

2. Search the GitHub Issues

3. Join our Discord Community