# Quick Start with Dynamic Framework

This guide will help you get started quickly with Dynamic Framework, from installation to your first functional application.

# Prerequisites

Before starting, make sure you have installed:

Node.js v20 or higher
NPM 10.x or higher
Git for version control
Modyo Account with access to Dynamic Framework
Code editor (we recommend VS Code)

# Installation

# Option 1: Using Modyo CLI (Recommended)

The fastest way to start is using Modyo CLI with a Dynamic Framework template:

# Create a new project with the React base template
npx @modyo/cli@latest get dynamic-react-base-template my-digital-bank

# Navigate to the project directory
cd my-digital-bank

# Install dependencies
npm install

# Start the development server
npm run start

Your application will be available at http://localhost:8080

# Option 2: Integration in Modyo Platform

If you're creating a new web application in Modyo:

Go to Channels > Sites in your Modyo account
Create a new site
Select "Dynamic Minimal Theme" as template
Dynamic Framework will be installed automatically

# Option 3: Installation via CDN

For simple projects or quick prototypes:

<!DOCTYPE html>
<html lang="en">
<head>
  <!-- Dynamic Framework CSS -->
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@dynamic-framework/ui-react@latest/dist/css/dynamic-ui.css">
</head>
<body>
  <!-- Your content here -->
  
  <!-- Dynamic Framework JavaScript (optional) -->
  <script src="https://cdn.jsdelivr.net/npm/@dynamic-framework/ui-react@latest/dist/js/bootstrap.min.js"></script>
</body>
</html>

# Option 4: Installation via NPM

For existing React projects:

# Install the main package
npm install @dynamic-framework/ui-react

# Install peer dependencies
npm install react react-dom bootstrap

# Project Structure

A typical project with Dynamic Framework has the following structure:

my-digital-bank/
├── src/
│   ├── components/        # Custom components
│   ├── views/             # Application views/pages
│   ├── services/          # Services and API calls
│   ├── hooks/             # Custom React hooks
│   ├── utils/             # Utilities and helpers
│   ├── styles/            # Custom styles
│   ├── App.jsx            # Main component
│   └── index.js           # Entry point
├── public/
│   └── index.html         # HTML template
├── .modyo/                # Modyo configuration
├── package.json           # Dependencies and scripts
└── README.md             # Project documentation

# Your First Application

# 1. Basic Component

Create your first component using Dynamic Framework:

// src/components/WelcomeBanner.jsx
import React from 'react';
import { Card, Button, Typography } from '@dynamic-framework/ui-react';

const WelcomeBanner = ({ userName }) => {
  return (
    <Card className="welcome-banner">
      <Card.Body>
        <Typography variant="h2">
          Welcome, {userName}
        </Typography>
        <Typography variant="body1">
          Manage your finances simply and securely
        </Typography>
        <Button variant="primary" size="large">
          View my accounts
        </Button>
      </Card.Body>
    </Card>
  );
};

export default WelcomeBanner;

# 2. Dashboard View

Create a complete view using multiple components:

// src/views/Dashboard.tsx
import React, { useState, useEffect } from 'react';
import {
  DCard,
  DListGroup,
  DListGroupItem,
  DButton,
  DIcon,
  DCurrencyText
} from '@dynamic-framework/ui-react';

const Dashboard = () => {
  const [accounts, setAccounts] = useState([]);
  const [transactions, setTransactions] = useState([]);

  useEffect(() => {
    // Load data from your API
    fetchAccounts();
    fetchTransactions();
  }, []);

  return (
    <div className="container">
      <div className="row">
        <div className="col-12">
          <h1 className="mb-4">Welcome, John Doe</h1>
        </div>
      </div>

      <div className="row mt-4">
        <div className="col-md-8">
          <h3>My Accounts</h3>
          {accounts.map(account => (
            <DCard key={account.id} className="mb-3">
              <DCard.Body className="d-flex justify-content-between align-items-center">
                <div>
                  <h5>{account.name}</h5>
                  <small className="text-muted">{account.number}</small>
                </div>
                <DCurrencyText value={account.balance} className="fs-4" />
              </DCard.Body>
            </DCard>
          ))}
        </div>

        <div className="col-md-4">
          <DCard>
            <DCard.Header>Quick Actions</DCard.Header>
            <DCard.Body>
              <div className="d-grid gap-2">
                <DButton color="primary">
                  <DIcon icon="arrow-right-left" className="me-2" />
                  Transfer
                </DButton>
                <DButton color="secondary">
                  <DIcon icon="credit-card" className="me-2" />
                  Pay
                </DButton>
              </div>
            </DCard.Body>
          </DCard>
        </div>
      </div>

      <div className="row mt-4">
        <div className="col-12">
          <h3>Recent Transactions</h3>
          <DListGroup>
            {transactions.map(tx => (
              <DListGroupItem key={tx.id}>
                {tx.description} - <DCurrencyText value={tx.amount} />
              </DListGroupItem>
            ))}
          </DListGroup>
        </div>
      </div>
    </div>
  );
};

export default Dashboard;

# 3. Theme Configuration

Customize your application using CSS variables and DContextProvider:

// src/App.tsx
import React from 'react';
import { DContextProvider } from '@dynamic-framework/ui-react';
import Dashboard from './views/Dashboard';

// Import Dynamic UI styles
import '@dynamic-framework/ui-react/dist/css/dynamic-ui.css';

// Your custom styles can override CSS variables
import './styles/custom.css';

function App() {
  return (
    <DContextProvider>
      <Dashboard />
    </DContextProvider>
  );
}

export default App;

/* src/styles/custom.css */
:root {
  --bs-primary: #1E3A5F;
  --bs-secondary: #4A90E2;
  --bs-success: #52C41A;
  --bs-danger: #F5222D;
  --bs-warning: #FAAD14;
  --bs-info: #1890FF;
  --bs-body-font-family: "Roboto", "Helvetica", "Arial", sans-serif;
}

# Connect with APIs

# Configure Services

// src/services/api.js
import axios from 'axios';

const API_BASE_URL = process.env.REACT_APP_API_URL || 'https://api.mydigitalbank.com';

const api = axios.create({
  baseURL: API_BASE_URL,
  headers: {
    'Content-Type': 'application/json'
  }
});

// Interceptor to add authentication token
api.interceptors.request.use(config => {
  const token = localStorage.getItem('authToken');
  if (token) {
    config.headers.Authorization = `Bearer ${token}`;
  }
  return config;
});

// Specific services
export const accountService = {
  getAccounts: () => api.get('/accounts'),
  getAccountById: (id) => api.get(`/accounts/${id}`),
  getTransactions: (accountId) => api.get(`/accounts/${accountId}/transactions`)
};

export const transferService = {
  createTransfer: (data) => api.post('/transfers', data),
  getTransferStatus: (id) => api.get(`/transfers/${id}/status`)
};

# Use Custom Hooks

// src/hooks/useAccounts.js
import { useState, useEffect } from 'react';
import { accountService } from '../services/api';

export const useAccounts = () => {
  const [accounts, setAccounts] = useState([]);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);

  useEffect(() => {
    const fetchAccounts = async () => {
      try {
        setLoading(true);
        const response = await accountService.getAccounts();
        setAccounts(response.data);
      } catch (err) {
        setError(err.message);
      } finally {
        setLoading(false);
      }
    };

    fetchAccounts();
  }, []);

  return { accounts, loading, error };
};

# Development Scripts

In your package.json, you'll have these useful scripts:

{
  "scripts": {
    "start": "webpack serve --mode development",
    "build": "webpack --mode production",
    "test": "jest",
    "lint": "eslint src/",
    "format": "prettier --write 'src/**/*.{js,jsx,json,css}'",
    "modyo:push": "modyo-cli push",
    "modyo:preview": "modyo-cli preview"
  }
}

# Deploy to Modyo

# 1. Configure Modyo CLI

# Initialize Modyo configuration
npx @modyo/cli@latest init

# Follow the prompts to configure:
# - Your Modyo account URL
# - API token
# - Target site

# 2. Build and Deploy

# Build the application for production
npm run build

# Deploy to Modyo
npm run modyo:push

# Or preview before deploying
npm run modyo:preview

# Best Practices

# 1. Code Organization

Keep components small and focused
Use folders to group related functionality
Separate business logic from UI components

# 2. Performance

Implement lazy loading for routes
Use React.memo for heavy components
Optimize images and assets

# 3. Security

Never hardcode credentials
Validate all user inputs
Use HTTPS for all communications

# 4. Testing

Write unit tests for critical logic
Implement integration tests for main flows
Use tools like Jest and React Testing Library

# Additional Resources

Complete Documentation: dynamic.modyo.com/docs (opens new window)
Storybook: react.dynamicframework.dev (opens new window)
Support: support.modyo.com (opens new window)

# Next Steps

Now that you have your application running:

Congratulations! You're now ready to build extraordinary financial experiences with Dynamic Framework.

← Technical Overview First Application →