✨ Features: - Camera OCR card scanning with Tesseract.js - Beautiful glowing card effects and animations - Intelligent card matching and recognition - Mobile-responsive design with Tailwind CSS 🏗️ Architecture: - Frontend: React TypeScript application - Backend: Vercel Functions (replacing FastAPI) - Database: JSON file with exported card data - Deployment: Single Vercel project 📁 Structure: - api/ - Vercel Functions backend endpoints - src/ - React frontend components and logic - src/data/cards.json - Card database (12 cards) - vercel.json - Optimized Vercel configuration 💰 Cost: /bin/zsh additional (uses existing Vercel Pro) 🚀 Ready for immediate Vercel deployment
70 lines
No EOL
1.7 KiB
TypeScript
70 lines
No EOL
1.7 KiB
TypeScript
import React, { createContext, useContext, useState, useEffect, ReactNode } from 'react';
|
|
|
|
interface User {
|
|
id: number;
|
|
email: string;
|
|
username: string;
|
|
full_name?: string;
|
|
}
|
|
|
|
interface AuthContextType {
|
|
user: User | null;
|
|
token: string | null;
|
|
login: (token: string, user: User) => void;
|
|
logout: () => void;
|
|
isAuthenticated: boolean;
|
|
}
|
|
|
|
const AuthContext = createContext<AuthContextType | undefined>(undefined);
|
|
|
|
export const useAuth = () => {
|
|
const context = useContext(AuthContext);
|
|
if (context === undefined) {
|
|
throw new Error('useAuth must be used within an AuthProvider');
|
|
}
|
|
return context;
|
|
};
|
|
|
|
interface AuthProviderProps {
|
|
children: ReactNode;
|
|
}
|
|
|
|
export const AuthProvider: React.FC<AuthProviderProps> = ({ children }) => {
|
|
const [user, setUser] = useState<User | null>(null);
|
|
const [token, setToken] = useState<string | null>(null);
|
|
|
|
useEffect(() => {
|
|
// Check for stored token on app load
|
|
const storedToken = localStorage.getItem('tcg_vault_token');
|
|
const storedUser = localStorage.getItem('tcg_vault_user');
|
|
|
|
if (storedToken && storedUser) {
|
|
setToken(storedToken);
|
|
setUser(JSON.parse(storedUser));
|
|
}
|
|
}, []);
|
|
|
|
const login = (newToken: string, newUser: User) => {
|
|
setToken(newToken);
|
|
setUser(newUser);
|
|
localStorage.setItem('tcg_vault_token', newToken);
|
|
localStorage.setItem('tcg_vault_user', JSON.stringify(newUser));
|
|
};
|
|
|
|
const logout = () => {
|
|
setToken(null);
|
|
setUser(null);
|
|
localStorage.removeItem('tcg_vault_token');
|
|
localStorage.removeItem('tcg_vault_user');
|
|
};
|
|
|
|
const value = {
|
|
user,
|
|
token,
|
|
login,
|
|
logout,
|
|
isAuthenticated: !!token,
|
|
};
|
|
|
|
return <AuthContext.Provider value={value}>{children}</AuthContext.Provider>;
|
|
};
|