No-Code Platform Frontend

A comprehensive React TypeScript frontend for the no-code application platform. This application provides a complete interface for building and managing database-driven applications without writing code.

Features

🔐 Authentication

• User registration and login
• JWT token-based authentication
• Protected routes and session management

📊 Project Management

• Create and manage projects
• Edit project details
• View project overview

🛠️ Visual Table Builder

• Drag-and-drop interface for creating database tables
• 11+ field types supported:
  • Text (VARCHAR)
  • Long Text (TEXT)
  • Number (INT)
  • Decimal (DECIMAL)
  • Email
  • Date
  • Date Time
  • Boolean
  • Select/Dropdown
  • Phone
  • URL
• Field configuration: Set required fields, default values, constraints
• Real-time preview of table structure

💾 Data Management

• Full CRUD operations on table data
• Search and filter capabilities
• Pagination for large datasets
• Dynamic form generation based on table structure
• Validation based on field types and constraints

🌐 Public Data Portal

• Public views for end users (no authentication required)
• Read-only access to published data
• Clean, user-friendly interface for data browsing

🎨 Modern UI/UX

• Material-UI design system
• Responsive design for all screen sizes
• Loading states and error handling
• Intuitive navigation and user experience

Technology Stack

• React 18 with TypeScript
• Material-UI (MUI) for components and theming
• React Router for navigation
• React Hook Form + Yup for form validation
• Axios for API integration
• Vite for fast development and building

Getting Started

Prerequisites

• Node.js 16+ and npm
• Backend API server running on http://localhost:8080

Installation

1. Navigate to the frontend directory:

   cd ncap-frontend

2. Install dependencies:

   npm install

3. Start the development server:

   npm run dev

4. Open your browser to http://localhost:5173

Backend Integration

The frontend is configured to connect to the backend API at http://localhost:8080. Make sure your Go backend server is running before using the frontend.

Application Structure

src/
├── components/
│   ├── Auth/                 # Login and Registration
│   ├── Dashboard/            # Project management dashboard
│   ├── Project/              # Project detail views
│   ├── TableBuilder/         # Drag-and-drop table builder
│   │   ├── FieldTypes.tsx    # Available field types
│   │   ├── TableCanvas.tsx   # Drop zone and field configuration
│   │   └── TableBuilder.tsx  # Main builder component
│   ├── DataManager/          # CRUD interface for table data
│   └── Public/               # Public data portal
├── contexts/                 # React contexts (Auth)
├── services/                 # API integration layer
├── types/                    # TypeScript type definitions
└── App.tsx                   # Main app with routing

Key Routes

Authenticated Routes

• /dashboard - Project management
• /project/:id - Project details and table list
• /project/:id/table-builder - Visual table builder
• /project/:id/table/:tableName/data - Data management

Public Routes

• /login - User login
• /register - User registration
• /public/project/:id - Public data portal

Usage Guide

Creating Your First Project

1. Register/login to access the dashboard
2. Click "Create Project" and fill in project details
3. Navigate to your project to start building tables

Building Tables

1. From project view, click "Create Table"
2. Drag field types from the left panel to the canvas
3. Configure each field (name, type, required, etc.)
4. Save your table structure

Managing Data

1. From project view, click "Manage Data" on any table
2. Add, edit, or delete rows using the interface
3. Use search and pagination for large datasets

Public Access

1. Share the public URL: /public/project/:projectId
2. End users can browse data without authentication
3. Read-only access ensures data security

Development

Available Scripts

• npm run dev - Start development server
• npm run build - Build for production
• npm run preview - Preview production build
• npm run lint - Run ESLint

Key Dependencies

• @mui/material - UI components
• react-router-dom - Routing
• axios - HTTP client
• react-hook-form - Form management
• yup - Validation schemas

API Integration

The frontend integrates with all backend endpoints:

• Authentication (/login, /register)
• Projects (/create-new-project, /retrieve-project-list, /edit-project)
• Tables (/create-table, /retrieve-table-list, /drop-table)
• Data (/insert-into-table, /retrieve-data-from-table, /delete-from-table)

Contributing

1. Follow TypeScript best practices
2. Use Material-UI components consistently
3. Implement proper error handling
4. Add loading states for async operations
5. Maintain responsive design principles

License

This project is part of the no-code platform suite.