Comprehensive comparison for Fronted Application technology in Web Development applications

import { makeAutoObservable, runInAction, reaction } from 'mobx';
import { observer } from 'mobx-react-lite';
import React, { useEffect } from 'react';

// Store for managing user authentication and profile data
class AuthStore {
  user = null;
  isLoading = false;
  error = null;
  authToken = localStorage.getItem('authToken') || null;

  constructor() {
    makeAutoObservable(this, {}, { autoBind: true });
    
    // Persist auth token to localStorage whenever it changes
    reaction(
      () => this.authToken,
      (token) => {
        if (token) {
          localStorage.setItem('authToken', token);
        } else {
          localStorage.removeItem('authToken');
        }
      }
    );
  }

  get isAuthenticated() {
    return !!this.user && !!this.authToken;
  }

  async login(email, password) {
    this.isLoading = true;
    this.error = null;

    try {
      const response = await fetch('/api/auth/login', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ email, password })
      });

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

      const data = await response.json();

      runInAction(() => {
        this.user = data.user;
        this.authToken = data.token;
        this.isLoading = false;
      });

      return true;
    } catch (error) {
      runInAction(() => {
        this.error = error.message;
        this.isLoading = false;
      });
      return false;
    }
  }

  async fetchUserProfile() {
    if (!this.authToken) return;

    this.isLoading = true;
    this.error = null;

    try {
      const response = await fetch('/api/user/profile', {
        headers: {
          'Authorization': `Bearer ${this.authToken}`,
          'Content-Type': 'application/json'
        }
      });

      if (!response.ok) {
        if (response.status === 401) {
          throw new Error('Session expired');
        }
        throw new Error('Failed to fetch profile');
      }

      const data = await response.json();

      runInAction(() => {
        this.user = data;
        this.isLoading = false;
      });
    } catch (error) {
      runInAction(() => {
        this.error = error.message;
        this.isLoading = false;
        if (error.message === 'Session expired') {
          this.logout();
        }
      });
    }
  }

  logout() {
    this.user = null;
    this.authToken = null;
    this.error = null;
  }

  clearError() {
    this.error = null;
  }
}

const authStore = new AuthStore();

// React component using the store
const LoginForm = observer(() => {
  const [email, setEmail] = React.useState('');
  const [password, setPassword] = React.useState('');

  useEffect(() => {
    if (authStore.authToken && !authStore.user) {
      authStore.fetchUserProfile();
    }
  }, []);

  const handleSubmit = async (e) => {
    e.preventDefault();
    const success = await authStore.login(email, password);
    if (success) {
      setEmail('');
      setPassword('');
    }
  };

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

  return (
    <form onSubmit={handleSubmit}>
      <h2>Login</h2>
      {authStore.error && (
        <div className="error">
          {authStore.error}
          <button onClick={authStore.clearError}>×</button>
        </div>
      )}
      <input
        type="email"
        value={email}
        onChange={(e) => setEmail(e.target.value)}
        placeholder="Email"
        disabled={authStore.isLoading}
        required
      />
      <input
        type="password"
        value={password}
        onChange={(e) => setPassword(e.target.value)}
        placeholder="Password"
        disabled={authStore.isLoading}
        required
      />
      <button type="submit" disabled={authStore.isLoading}>
        {authStore.isLoading ? 'Loading...' : 'Login'}
      </button>
    </form>
  );
});

export { authStore, LoginForm };