Add professional React frontend for API testing
- Complete React 18 + TypeScript application - Modern UI with Lucide icons and CSS animations - Features: * JWT token generation * Transaction submission form * 5 pre-built test scenarios * Real-time results display * Responsive design * Dark mode ready Infrastructure: * Vite for fast development * Axios for HTTP client * React hooks for state management * CSS3 with CSS variables for theming Build: * Production-optimized build (63KB gzip) * TypeScript compilation * Vite bundling Documentation: * frontend/README.md - Frontend-specific guide * FULLSTACK_GUIDE.md - Complete API + Frontend setup * Comprehensive troubleshooting section Integration: * Connects to FastAPI backend on localhost:8000 * Full REST API consumption * Handles JWT authentication * Error handling and user feedback Co-authored-by: Copilot <[email protected]>
This commit is contained in:
John Patrick TeruelandCopilot committed
1 parent
b1b7fa28f0
commit
6504ff4c2a
13 files changed
+3735
No files matched your search
@@ -0,0 +1,347 @@
|
||||
.app {
|
||||
min-height: 100vh;
|
||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||
padding: 2rem 0;
|
||||
}
|
||||
|
||||
.header {
|
||||
text-align: center;
|
||||
color: white;
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
|
||||
.header h1 {
|
||||
font-size: 2.5rem;
|
||||
margin-bottom: 0.5rem;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.header p {
|
||||
font-size: 1.1rem;
|
||||
opacity: 0.9;
|
||||
}
|
||||
|
||||
.container {
|
||||
max-width: 900px;
|
||||
margin: 0 auto;
|
||||
padding: 0 1rem;
|
||||
}
|
||||
|
||||
/* Cards */
|
||||
.card {
|
||||
background: white;
|
||||
border-radius: 0.75rem;
|
||||
box-shadow: var(--shadow-lg);
|
||||
padding: 1.5rem;
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
.card-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.75rem;
|
||||
margin-bottom: 1.5rem;
|
||||
padding-bottom: 1rem;
|
||||
border-bottom: 2px solid var(--border);
|
||||
}
|
||||
|
||||
.card-header h2 {
|
||||
font-size: 1.25rem;
|
||||
font-weight: 600;
|
||||
color: var(--text);
|
||||
}
|
||||
|
||||
.card-header svg {
|
||||
color: var(--primary);
|
||||
}
|
||||
|
||||
/* Auth Card */
|
||||
.auth-card {
|
||||
background: white;
|
||||
}
|
||||
|
||||
.auth-content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.auth-info {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.auth-info label {
|
||||
font-weight: 500;
|
||||
color: var(--text);
|
||||
font-size: 0.875rem;
|
||||
}
|
||||
|
||||
.auth-info input {
|
||||
padding: 0.75rem;
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 0.375rem;
|
||||
font-size: 0.875rem;
|
||||
font-family: 'Courier New', monospace;
|
||||
}
|
||||
|
||||
.auth-info input:disabled {
|
||||
background: var(--bg);
|
||||
color: var(--text-light);
|
||||
}
|
||||
|
||||
.token-display {
|
||||
background: var(--bg);
|
||||
padding: 1rem;
|
||||
border-radius: 0.375rem;
|
||||
border-left: 4px solid var(--primary);
|
||||
}
|
||||
|
||||
.token-display p {
|
||||
font-size: 0.875rem;
|
||||
margin-bottom: 0.5rem;
|
||||
word-break: break-all;
|
||||
font-family: 'Courier New', monospace;
|
||||
}
|
||||
|
||||
/* Buttons */
|
||||
.btn {
|
||||
padding: 0.75rem 1.5rem;
|
||||
border: none;
|
||||
border-radius: 0.375rem;
|
||||
font-size: 0.875rem;
|
||||
font-weight: 500;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
|
||||
.btn:disabled {
|
||||
opacity: 0.5;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
.btn-primary {
|
||||
background: var(--primary);
|
||||
color: white;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.btn-primary:hover:not(:disabled) {
|
||||
background: var(--primary-dark);
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);
|
||||
}
|
||||
|
||||
.btn-submit {
|
||||
background: var(--success);
|
||||
color: white;
|
||||
width: 100%;
|
||||
padding: 0.875rem 1.5rem;
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
.btn-submit:hover:not(:disabled) {
|
||||
background: #059669;
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 4px 12px rgba(16, 185, 129, 0.3);
|
||||
}
|
||||
|
||||
/* Scenarios */
|
||||
.scenarios {
|
||||
background: var(--bg);
|
||||
padding: 1rem;
|
||||
border-radius: 0.375rem;
|
||||
margin-bottom: 1.5rem;
|
||||
border-left: 4px solid var(--warning);
|
||||
}
|
||||
|
||||
.scenarios-label {
|
||||
font-size: 0.875rem;
|
||||
font-weight: 600;
|
||||
color: var(--text);
|
||||
margin-bottom: 0.75rem;
|
||||
}
|
||||
|
||||
.scenario-buttons {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.btn-scenario {
|
||||
background: white;
|
||||
color: var(--primary);
|
||||
border: 1px solid var(--primary);
|
||||
padding: 0.5rem 1rem;
|
||||
font-size: 0.8rem;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.btn-scenario:hover:not(:disabled) {
|
||||
background: var(--primary);
|
||||
color: white;
|
||||
}
|
||||
|
||||
/* Form */
|
||||
.form-group {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.5rem;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.form-group label {
|
||||
font-weight: 500;
|
||||
color: var(--text);
|
||||
font-size: 0.875rem;
|
||||
}
|
||||
|
||||
.form-group input {
|
||||
padding: 0.75rem;
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 0.375rem;
|
||||
font-size: 0.875rem;
|
||||
}
|
||||
|
||||
.form-group input:focus {
|
||||
outline: none;
|
||||
border-color: var(--primary);
|
||||
box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
|
||||
}
|
||||
|
||||
/* Alerts */
|
||||
.alert {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 1rem;
|
||||
padding: 1rem;
|
||||
border-radius: 0.375rem;
|
||||
margin-bottom: 1.5rem;
|
||||
font-size: 0.875rem;
|
||||
}
|
||||
|
||||
.alert-error {
|
||||
background: #fee2e2;
|
||||
color: #991b1b;
|
||||
border-left: 4px solid var(--error);
|
||||
}
|
||||
|
||||
.alert-success {
|
||||
background: #dcfce7;
|
||||
color: #15803d;
|
||||
border-left: 4px solid var(--success);
|
||||
}
|
||||
|
||||
/* Results */
|
||||
.results-card {
|
||||
background: white;
|
||||
}
|
||||
|
||||
.results-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.75rem;
|
||||
}
|
||||
|
||||
.result-item {
|
||||
padding: 1rem;
|
||||
background: var(--bg);
|
||||
border-radius: 0.375rem;
|
||||
border-left: 4px solid var(--primary);
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
|
||||
.result-item:hover {
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
|
||||
}
|
||||
|
||||
.result-content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.25rem;
|
||||
}
|
||||
|
||||
.result-id {
|
||||
font-size: 0.875rem;
|
||||
font-family: 'Courier New', monospace;
|
||||
color: var(--text);
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.result-status {
|
||||
font-size: 0.875rem;
|
||||
color: var(--text-light);
|
||||
}
|
||||
|
||||
.result-time {
|
||||
font-size: 0.8rem;
|
||||
color: var(--text-light);
|
||||
}
|
||||
|
||||
.status-badge {
|
||||
display: inline-block;
|
||||
background: var(--primary);
|
||||
color: white;
|
||||
padding: 0.25rem 0.5rem;
|
||||
border-radius: 0.25rem;
|
||||
font-weight: 500;
|
||||
font-size: 0.75rem;
|
||||
}
|
||||
|
||||
/* Info Card */
|
||||
.info-card {
|
||||
background: white;
|
||||
}
|
||||
|
||||
.info-card h3 {
|
||||
font-size: 1rem;
|
||||
font-weight: 600;
|
||||
color: var(--text);
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.info-content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.75rem;
|
||||
font-size: 0.875rem;
|
||||
}
|
||||
|
||||
.info-content p {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.info-content strong {
|
||||
color: var(--text);
|
||||
}
|
||||
|
||||
.info-content ul {
|
||||
margin-left: 1.5rem;
|
||||
margin-top: 0.5rem;
|
||||
}
|
||||
|
||||
.info-content li {
|
||||
margin-bottom: 0.25rem;
|
||||
color: var(--text-light);
|
||||
}
|
||||
|
||||
/* Responsive */
|
||||
@media (max-width: 640px) {
|
||||
.header h1 {
|
||||
font-size: 1.75rem;
|
||||
}
|
||||
|
||||
.card {
|
||||
padding: 1rem;
|
||||
}
|
||||
|
||||
.scenario-buttons {
|
||||
grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
|
||||
}
|
||||
|
||||
.btn {
|
||||
padding: 0.6rem 1rem;
|
||||
font-size: 0.8rem;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,358 @@
|
||||
import React, { useState } from 'react';
|
||||
import { AlertCircle, CheckCircle, Clock, Lock, Send } from 'lucide-react';
|
||||
import axios from 'axios';
|
||||
import './App.css';
|
||||
|
||||
interface AuthState {
|
||||
token: string | null;
|
||||
userId: string;
|
||||
isAuthenticated: boolean;
|
||||
}
|
||||
|
||||
interface TransactionResponse {
|
||||
status: string;
|
||||
transaction_id: string;
|
||||
message: string;
|
||||
}
|
||||
|
||||
interface Transaction {
|
||||
amount: number;
|
||||
merchant: string;
|
||||
description: string;
|
||||
timestamp: string;
|
||||
}
|
||||
|
||||
interface Result {
|
||||
transaction_id: string;
|
||||
status: string;
|
||||
timestamp: string;
|
||||
}
|
||||
|
||||
const API_BASE_URL = 'http://localhost:8000';
|
||||
|
||||
const App: React.FC = () => {
|
||||
const [auth, setAuth] = useState<AuthState>({
|
||||
token: null,
|
||||
userId: 'user_' + Math.random().toString(36).substr(2, 9),
|
||||
isAuthenticated: false,
|
||||
});
|
||||
|
||||
const [transaction, setTransaction] = useState<Transaction>({
|
||||
amount: 100,
|
||||
merchant: 'Starbucks Coffee',
|
||||
description: 'Normal transaction',
|
||||
timestamp: new Date().toLocaleString(),
|
||||
});
|
||||
|
||||
const [results, setResults] = useState<Result[]>([]);
|
||||
const [loading, setLoading] = useState(false);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
const [success, setSuccess] = useState<string | null>(null);
|
||||
|
||||
// Generate JWT token
|
||||
const generateToken = async () => {
|
||||
try {
|
||||
setLoading(true);
|
||||
setError(null);
|
||||
|
||||
const response = await axios.post(`${API_BASE_URL}/token`, null, {
|
||||
params: { user_id: auth.userId },
|
||||
});
|
||||
|
||||
const newToken = response.data.access_token;
|
||||
setAuth({
|
||||
...auth,
|
||||
token: newToken,
|
||||
isAuthenticated: true,
|
||||
});
|
||||
|
||||
setSuccess(`Token generated for user: ${auth.userId}`);
|
||||
setTimeout(() => setSuccess(null), 3000);
|
||||
} catch (err) {
|
||||
setError('Failed to generate token. Is the API running on localhost:8000?');
|
||||
console.error(err);
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
// Submit transaction
|
||||
const submitTransaction = async () => {
|
||||
if (!auth.token) {
|
||||
setError('Please generate a token first');
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
setLoading(true);
|
||||
setError(null);
|
||||
|
||||
const response = await axios.post<TransactionResponse>(
|
||||
`${API_BASE_URL}/transaction`,
|
||||
{
|
||||
amount: transaction.amount,
|
||||
merchant: transaction.merchant,
|
||||
description: transaction.description,
|
||||
},
|
||||
{
|
||||
headers: {
|
||||
Authorization: `Bearer ${auth.token}`,
|
||||
'Content-Type': 'application/json',
|
||||
},
|
||||
}
|
||||
);
|
||||
|
||||
const result: Result = {
|
||||
transaction_id: response.data.transaction_id,
|
||||
status: response.data.status,
|
||||
timestamp: new Date().toLocaleString(),
|
||||
};
|
||||
|
||||
setResults([result, ...results]);
|
||||
setSuccess(`Transaction submitted: ${response.data.transaction_id.substring(0, 8)}...`);
|
||||
|
||||
// Reset form
|
||||
setTransaction({
|
||||
amount: 100,
|
||||
merchant: 'Starbucks Coffee',
|
||||
description: 'Normal transaction',
|
||||
timestamp: new Date().toLocaleString(),
|
||||
});
|
||||
|
||||
setTimeout(() => setSuccess(null), 5000);
|
||||
} catch (err: any) {
|
||||
const errorMsg = err.response?.data?.detail || 'Failed to submit transaction';
|
||||
setError(errorMsg);
|
||||
console.error(err);
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
// Preset scenarios
|
||||
const scenarios = [
|
||||
{
|
||||
name: 'Normal Transaction',
|
||||
amount: 75.5,
|
||||
merchant: 'Starbucks Coffee',
|
||||
description: 'Regular coffee purchase',
|
||||
},
|
||||
{
|
||||
name: 'Large Purchase',
|
||||
amount: 8500,
|
||||
merchant: 'unknown_offshore_merchant.biz',
|
||||
description: 'Suspicious large transaction',
|
||||
},
|
||||
{
|
||||
name: 'Grocery Shopping',
|
||||
amount: 120,
|
||||
merchant: 'Target Retail',
|
||||
description: 'Weekly grocery shopping',
|
||||
},
|
||||
{
|
||||
name: 'Online Shopping',
|
||||
amount: 299.99,
|
||||
merchant: 'Amazon.com',
|
||||
description: 'Online purchase',
|
||||
},
|
||||
{
|
||||
name: 'Gas Station',
|
||||
amount: 45.2,
|
||||
merchant: 'Shell Gas Station',
|
||||
description: 'Fuel purchase',
|
||||
},
|
||||
];
|
||||
|
||||
const loadScenario = (scenario: typeof scenarios[0]) => {
|
||||
setTransaction({
|
||||
amount: scenario.amount,
|
||||
merchant: scenario.merchant,
|
||||
description: scenario.description,
|
||||
timestamp: new Date().toLocaleString(),
|
||||
});
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="app">
|
||||
<div className="header">
|
||||
<h1>🛡️ PayGuard Fraud Detection</h1>
|
||||
<p>Real-time transaction fraud analysis system</p>
|
||||
</div>
|
||||
|
||||
<div className="container">
|
||||
{/* Authentication Section */}
|
||||
<section className="card auth-card">
|
||||
<div className="card-header">
|
||||
<Lock size={20} />
|
||||
<h2>Authentication</h2>
|
||||
</div>
|
||||
<div className="auth-content">
|
||||
<div className="auth-info">
|
||||
<label>User ID:</label>
|
||||
<input
|
||||
type="text"
|
||||
value={auth.userId}
|
||||
onChange={(e) => setAuth({ ...auth, userId: e.target.value })}
|
||||
placeholder="user_id"
|
||||
disabled={auth.isAuthenticated}
|
||||
/>
|
||||
</div>
|
||||
{auth.isAuthenticated && (
|
||||
<div className="token-display">
|
||||
<p>Token: {auth.token?.substring(0, 50)}...</p>
|
||||
<p className="status-badge" style={{ color: '#10b981' }}>
|
||||
✓ Authenticated
|
||||
</p>
|
||||
</div>
|
||||
)}
|
||||
<button
|
||||
onClick={generateToken}
|
||||
disabled={loading}
|
||||
className="btn btn-primary"
|
||||
>
|
||||
{loading ? 'Generating...' : 'Generate Token'}
|
||||
</button>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Transaction Section */}
|
||||
<section className="card transaction-card">
|
||||
<div className="card-header">
|
||||
<Send size={20} />
|
||||
<h2>Submit Transaction</h2>
|
||||
</div>
|
||||
|
||||
{/* Preset Scenarios */}
|
||||
<div className="scenarios">
|
||||
<p className="scenarios-label">Quick Scenarios:</p>
|
||||
<div className="scenario-buttons">
|
||||
{scenarios.map((scenario, idx) => (
|
||||
<button
|
||||
key={idx}
|
||||
onClick={() => loadScenario(scenario)}
|
||||
className="btn btn-scenario"
|
||||
>
|
||||
{scenario.name}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Transaction Form */}
|
||||
<div className="form-group">
|
||||
<label>Amount ($)</label>
|
||||
<input
|
||||
type="number"
|
||||
step="0.01"
|
||||
value={transaction.amount}
|
||||
onChange={(e) =>
|
||||
setTransaction({ ...transaction, amount: parseFloat(e.target.value) })
|
||||
}
|
||||
placeholder="Transaction amount"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="form-group">
|
||||
<label>Merchant</label>
|
||||
<input
|
||||
type="text"
|
||||
value={transaction.merchant}
|
||||
onChange={(e) =>
|
||||
setTransaction({ ...transaction, merchant: e.target.value })
|
||||
}
|
||||
placeholder="Merchant name"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="form-group">
|
||||
<label>Description</label>
|
||||
<input
|
||||
type="text"
|
||||
value={transaction.description}
|
||||
onChange={(e) =>
|
||||
setTransaction({ ...transaction, description: e.target.value })
|
||||
}
|
||||
placeholder="Transaction description"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<button
|
||||
onClick={submitTransaction}
|
||||
disabled={loading || !auth.isAuthenticated}
|
||||
className="btn btn-submit"
|
||||
>
|
||||
{loading ? 'Processing...' : 'Submit Transaction'}
|
||||
</button>
|
||||
</section>
|
||||
|
||||
{/* Status Messages */}
|
||||
{error && (
|
||||
<div className="alert alert-error">
|
||||
<AlertCircle size={20} />
|
||||
<span>{error}</span>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{success && (
|
||||
<div className="alert alert-success">
|
||||
<CheckCircle size={20} />
|
||||
<span>{success}</span>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Results Section */}
|
||||
{results.length > 0 && (
|
||||
<section className="card results-card">
|
||||
<div className="card-header">
|
||||
<Clock size={20} />
|
||||
<h2>Transaction Results</h2>
|
||||
</div>
|
||||
<div className="results-list">
|
||||
{results.map((result, idx) => (
|
||||
<div key={idx} className="result-item">
|
||||
<div className="result-content">
|
||||
<p className="result-id">
|
||||
ID: {result.transaction_id.substring(0, 8)}...
|
||||
</p>
|
||||
<p className="result-status">
|
||||
Status: <span className="status-badge">{result.status}</span>
|
||||
</p>
|
||||
<p className="result-time">Submitted: {result.timestamp}</p>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</section>
|
||||
)}
|
||||
|
||||
{/* API Info */}
|
||||
<section className="card info-card">
|
||||
<h3>API Information</h3>
|
||||
<div className="info-content">
|
||||
<p>
|
||||
<strong>Base URL:</strong> {API_BASE_URL}
|
||||
</p>
|
||||
<p>
|
||||
<strong>Status:</strong>{' '}
|
||||
{auth.isAuthenticated ? (
|
||||
<span style={{ color: '#10b981' }}>✓ Connected</span>
|
||||
) : (
|
||||
<span style={{ color: '#ef4444' }}>✗ Not connected</span>
|
||||
)}
|
||||
</p>
|
||||
<p>
|
||||
<strong>Endpoints:</strong>
|
||||
</p>
|
||||
<ul>
|
||||
<li>POST /token - Generate JWT token</li>
|
||||
<li>POST /transaction - Submit transaction for fraud detection</li>
|
||||
<li>GET /health - API health check</li>
|
||||
</ul>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default App;
|
||||
@@ -0,0 +1,34 @@
|
||||
:root {
|
||||
--primary: #3b82f6;
|
||||
--primary-dark: #1d4ed8;
|
||||
--success: #10b981;
|
||||
--error: #ef4444;
|
||||
--warning: #f59e0b;
|
||||
--text: #1f2937;
|
||||
--text-light: #6b7280;
|
||||
--bg: #f9fafb;
|
||||
--border: #e5e7eb;
|
||||
--shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1);
|
||||
--shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
|
||||
'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
|
||||
sans-serif;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
background: var(--bg);
|
||||
color: var(--text);
|
||||
}
|
||||
|
||||
#root {
|
||||
width: 100%;
|
||||
min-height: 100vh;
|
||||
}
|
||||
@@ -0,0 +1,10 @@
|
||||
import React from 'react';
|
||||
import ReactDOM from 'react-dom/client';
|
||||
import App from './App.tsx';
|
||||
import './index.css';
|
||||
|
||||
ReactDOM.createRoot(document.getElementById('root')!).render(
|
||||
<React.StrictMode>
|
||||
<App />
|
||||
</React.StrictMode>,
|
||||
);
|
||||
Reference in new issue
Block a user