design.prompt.txt

claude-3-5-sonnet-20240620

You are Claude, an AI assistant powered by Anthropic's Claude-3.5-Sonnet model, specialized in software development.
You are a software designer.
Your job to design an app. The app is usually very simple and can be always expressed in a python web server backend plus a single html page frontend.
The given input is the app description.
Use your imagination to design a fancy app with only one python server (backend) with only one html page (frontend). 

The output backend design should be in <BACKEND_DESIGN></BACKEND_DESIGN> block.
The output frontend design should be in <FRONTEND_DESIGN></FRONTEND_DESIGN> block.
There should be exactly one <BACKEND_DESIGN> and one <FRONTEND_DESIGN>.


=== 0: user ===
The app description:
```
Using Airtable API, and create a table dashboard where I can edit data a data source and sync up. 
Give me input to the datasource name, and my personal token, and BaseID.
Use plot dash libary to view and edit the data.
Give me button that I can dump the table to CSV
Give me button that I can refresh the table from datasource.
```

Based on given app description, generate <BACKEND_DESIGN> and <FRONTEND_DESIGN>.
<BACKEND_DESIGN> will be written in "backend_design.txt".
<FRONTEND_DESIGN> will be written in "frontend_design.txt".


=== Reply 0 ===
Here's a design for the app based on your description:

<BACKEND_DESIGN>
The backend will be a Python Flask server that handles API requests and interacts with Airtable. It will use the following libraries:

- Flask: for creating the web server
- requests: for making HTTP requests to the Airtable API
- pandas: for data manipulation and CSV export
- plotly: for creating interactive plots
- dash: for creating the interactive dashboard

Key components:

1. AirtableManager class:
   - Handles authentication and API calls to Airtable
   - Methods: get_table_data(), update_table_data(), sync_data()

2. Flask routes:
   - /api/init: Initialize connection with Airtable (POST)
   - /api/get_data: Fetch data from Airtable (GET)
   - /api/update_data: Update data in Airtable (POST)
   - /api/export_csv: Export data to CSV (GET)
   - /api/refresh: Refresh data from Airtable (GET)

3. Dash app integration:
   - Create Dash app instance
   - Define layout with DataTable and buttons
   - Callbacks for updating table, exporting CSV, and refreshing data

The server will handle API requests from the frontend, manage the Airtable connection, and serve the Dash app for data visualization and editing.
</BACKEND_DESIGN>

<FRONTEND_DESIGN>
The frontend will be a single HTML page that loads the Dash app and provides a user interface for interacting with the Airtable data. It will include:

1. HTML structure:
   - Head: 
     - Title: "Airtable Dashboard"
     - Meta tags for responsive design
     - CSS links (Bootstrap for styling)
   - Body:
     - Container div for the Dash app
     - Input fields for Airtable credentials (datasource name, personal token, BaseID)
     - Connect button to initialize Airtable connection
     - Div for displaying connection status

2. Dash app components (rendered by the backend):
   - DataTable: Interactive table for viewing and editing data
   - Export to CSV button
   - Refresh data button

3. JavaScript:
   - Function to handle Airtable connection initialization
   - AJAX calls to backend API endpoints
   - Event listeners for buttons and form submission

4. CSS:
   - Custom styles for layout and components
   - Responsive design for various screen sizes

The frontend will provide a user-friendly interface for inputting Airtable credentials, viewing and editing data in the interactive table, exporting to CSV, and refreshing data from the source. The Dash app will be embedded within this HTML page, allowing for seamless integration of the interactive components.
</FRONTEND_DESIGN>