Comprehensive comparison for Fronted Application technology in Web Development applications

import { atom, useAtom, useAtomValue, useSetAtom } from 'jotai';
import { atomWithStorage, atomWithReducer } from 'jotai/utils';
import { useEffect } from 'react';

// Types
interface User {
  id: string;
  email: string;
  name: string;
}

interface AuthState {
  user: User | null;
  token: string | null;
  isAuthenticated: boolean;
  isLoading: boolean;
  error: string | null;
}

type AuthAction =
  | { type: 'LOGIN_START' }
  | { type: 'LOGIN_SUCCESS'; payload: { user: User; token: string } }
  | { type: 'LOGIN_FAILURE'; payload: string }
  | { type: 'LOGOUT' }
  | { type: 'CLEAR_ERROR' };

// Initial state
const initialAuthState: AuthState = {
  user: null,
  token: null,
  isAuthenticated: false,
  isLoading: false,
  error: null
};

// Auth reducer
const authReducer = (state: AuthState, action: AuthAction): AuthState => {
  switch (action.type) {
    case 'LOGIN_START':
      return { ...state, isLoading: true, error: null };
    case 'LOGIN_SUCCESS':
      return {
        ...state,
        user: action.payload.user,
        token: action.payload.token,
        isAuthenticated: true,
        isLoading: false,
        error: null
      };
    case 'LOGIN_FAILURE':
      return {
        ...state,
        isLoading: false,
        error: action.payload,
        isAuthenticated: false
      };
    case 'LOGOUT':
      return initialAuthState;
    case 'CLEAR_ERROR':
      return { ...state, error: null };
    default:
      return state;
  }
};

// Atoms
const authAtom = atomWithReducer(initialAuthState, authReducer);
const tokenStorageAtom = atomWithStorage<string | null>('auth_token', null);

// Derived atoms
const userAtom = atom((get) => get(authAtom).user);
const isAuthenticatedAtom = atom((get) => get(authAtom).isAuthenticated);
const authErrorAtom = atom((get) => get(authAtom).error);

// Async login atom
const loginAtom = atom(
  null,
  async (get, set, credentials: { email: string; password: string }) => {
    set(authAtom, { type: 'LOGIN_START' });
    
    try {
      // Simulate API call
      const response = await fetch('/api/auth/login', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify(credentials)
      });

      if (!response.ok) {
        throw new Error('Invalid credentials');
      }

      const data = await response.json();
      
      // Store token in localStorage
      set(tokenStorageAtom, data.token);
      
      // Update auth state
      set(authAtom, {
        type: 'LOGIN_SUCCESS',
        payload: { user: data.user, token: data.token }
      });
    } catch (error) {
      set(authAtom, {
        type: 'LOGIN_FAILURE',
        payload: error instanceof Error ? error.message : 'Login failed'
      });
    }
  }
);

// Logout atom
const logoutAtom = atom(null, (get, set) => {
  set(tokenStorageAtom, null);
  set(authAtom, { type: 'LOGOUT' });
});

// Component example
export function LoginForm() {
  const [authState, dispatch] = useAtom(authAtom);
  const login = useSetAtom(loginAtom);
  const logout = useSetAtom(logoutAtom);
  const user = useAtomValue(userAtom);
  const error = useAtomValue(authErrorAtom);

  const handleSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
    e.preventDefault();
    const formData = new FormData(e.currentTarget);
    await login({
      email: formData.get('email') as string,
      password: formData.get('password') as string
    });
  };

  useEffect(() => {
    if (error) {
      const timer = setTimeout(() => dispatch({ type: 'CLEAR_ERROR' }), 5000);
      return () => clearTimeout(timer);
    }
  }, [error, dispatch]);

  if (authState.isAuthenticated && user) {
    return (
      <div>
        <p>Welcome, {user.name}!</p>
        <button onClick={logout}>Logout</button>
      </div>
    );
  }

  return (
    <form onSubmit={handleSubmit}>
      {error && <div className="error">{error}</div>}
      <input name="email" type="email" placeholder="Email" required />
      <input name="password" type="password" placeholder="Password" required />
      <button type="submit" disabled={authState.isLoading}>
        {authState.isLoading ? 'Logging in...' : 'Login'}
      </button>
    </form>
  );
}