Database Explorer

A modern database management interface built with React, TypeScript, and AWS Cloudscape Design System.

Features

• Browse database tables in NeonDB and DynamoDB
• View and filter table records/items
• Create, update, and delete records
• Responsive design using AWS Cloudscape Design System
• Type-safe development with TypeScript
• Multi-database support with unified interface

Getting Started

Prerequisites

• Node.js 14+ and npm
• AWS credentials configured for DynamoDB access (if using DynamoDB)

Installation

1. Clone the repository:

   git clone https://github.com/akkasali910/database-explorer.git
   cd database-explorer
   

2. Install dependencies:

   npm install
   

3. Configure AWS credentials for DynamoDB:

   • For local development, set up your AWS credentials in ~/.aws/credentials
   • For production, use environment variables or IAM roles

   Environment variables are automatically injected by Create React App when they are prefixed with REACT_APP_.

   Just use them directly:

// At the top of dynamoDbService.ts, after imports
// Configure AWS SDK with environment variables
AWS.config.update({
  region: process.env.REACT_APP_AWS_REGION || 'us-east-1',
  credentials: {
    accessKeyId: process.env.REACT_APP_AWS_ACCESS_KEY_ID || '',
    secretAccessKey: process.env.REACT_APP_AWS_SECRET_ACCESS_KEY || ''
  }
});

No additional imports are needed.

4. Start the development server:

   npm start
   

5. Open http://localhost:3000 to view it in the browser.

API Configuration

NeonDB API

The application connects to a REST API at:

https://xxxxxxxxxx.execute-api.eu-west-1.amazonaws.com/api/explorer

To use a different API, update the API_BASE_URL in src/services/dataService.ts.

DynamoDB Configuration

DynamoDB access is configured through the AWS SDK. You can set up your AWS credentials in several ways:

1. Local development: Create or edit ~/.aws/credentials file:

[default]
aws_access_key_id = YOUR_ACCESS_KEY
aws_secret_access_key = YOUR_SECRET_KEY
region = us-east-1

2. Environment variables:

export AWS_ACCESS_KEY_ID=YOUR_ACCESS_KEY
export AWS_SECRET_ACCESS_KEY=YOUR_SECRET_KEY
export AWS_REGION=us-east-1

DynamoDB Explorer feature

I've implemented a complete DynamoDB Explorer feature for the tables-explorer application. Here's what I've added:

1. DynamoDB Service:

• Created dynamoDbService.ts with functions to interact with DynamoDB tables

• Implemented table listing, schema retrieval, and CRUD operations for records

2. Database Selection:

• Added DatabaseSelector.tsx component to switch between NeonDB and DynamoDB

• Updated TablesExplorer.tsx to conditionally render the appropriate components

3. DynamoDB Components:

• DynamoDbTablesList.tsx: Lists all DynamoDB tables

• DynamoDbRecordsList.tsx: Shows items in a selected DynamoDB table

• DynamoDbRecordDetails.tsx: Displays and allows editing of DynamoDB items

4. AWS Credentials Management:

• Added AwsCredentialsModal.tsx for configuring AWS credentials

• Integrated with AWS SDK to update credentials at runtime

5. Type Updates:

• Extended types.ts to include DynamoDB-specific fields

• Added support for DynamoDB data types

The implementation follows the same design patterns as the existing NeonDB explorer, providing a consistent user experience while supporting the unique features of DynamoDB. Users can now:

1. Switch between NeonDB and DynamoDB using the database selector

2. Configure AWS credentials for DynamoDB access

3. Browse DynamoDB tables and view their items

4. Create, update, and delete items in DynamoDB tables

This implementation maintains the clean separation of concerns in the codebase, with separate components and services for each database type, while sharing common UI elements and patterns.

Project Structure

• src/components/: React components
• src/services/: API and data services
  • dataService.ts: NeonDB API service
  • dynamoDbService.ts: DynamoDB service
• src/types/: TypeScript interfaces
• src/utils/: Utility functions

Key Components

• TablesExplorer: Main component that orchestrates the application
• DatabaseSelector: Allows switching between NeonDB and DynamoDB
• TablesList / DynamoDbTablesList: Displays available database tables
• RecordsList / DynamoDbRecordsList: Shows records in a selected table
• RecordDetails / DynamoDbRecordDetails: Displays and allows editing of a record

Usage

1. Start the application with npm start
2. Select the database type (NeonDB or DynamoDB) from the selector
3. Browse tables in the selected database
4. Click on a table to view its records/items
5. Click on a record to view or edit its details

License

MIT License