React Firebase админ-панель

4.0

03.04.2025

ruWeb DevelopmentReactFirebaseадмин-панель

Промпт

Мне нужна админ-панель для моего сайта на react. Используй авторизацию через firebase

Сгенерированный Результат

import React, { useState, useEffect } from 'react';
import { initializeApp } from 'firebase/app';
import { getAuth, signInWithEmailAndPassword, signOut } from 'firebase/auth';

const firebaseConfig = {
  apiKey: 'YOUR_API_KEY',
  authDomain: 'YOUR_AUTH_DOMAIN',
  projectId: 'YOUR_PROJECT_ID',
  storageBucket: 'YOUR_STORAGE_BUCKET',
  messagingSenderId: 'YOUR_MESSAGING_SENDER_ID',
  appId: 'YOUR_APP_ID'
};

const app = initializeApp(firebaseConfig);
const auth = getAuth(app);

const App = () => {
  const [user, setUser] = useState(null);
  const [email, setEmail] = useState('');
  const [password, setPassword] = useState('');

  useEffect(() => {
    const unsubscribe = auth.onAuthStateChanged((user) => {
      setUser(user);
    });
    return () => unsubscribe();
  }, []);

  const handleLogin = async () => {
    try {
      await signInWithEmailAndPassword(auth, email, password);
    } catch (error) {
      console.error(error);
    }
  };

  const handleLogout = async () => {
    try {
      await signOut(auth);
    } catch (error) {
      console.error(error);
    }
  };

  return (
    <div className="min-h-screen bg-gray-100 flex flex-col items-center justify-center">
      {user ? (
        <div className="bg-white p-8 rounded-lg shadow-lg">
          <h1 className="text-2xl font-bold mb-4">Welcome, {user.email}</h1>
          <button
            onClick={handleLogout}
            className="bg-red-500 text-white px-4 py-2 rounded hover:bg-red-600"
          >
            Logout
          </button>
        </div>
      ) : (
        <div className="bg-white p-8 rounded-lg shadow-lg">
          <h1 className="text-2xl font-bold mb-4">Login</h1>
          <input
            type="email"
            placeholder="Email"
            value={email}
            onChange={(e) => setEmail(e.target.value)}
            className="w-full p-2 mb-4 border rounded"
          />
          <input
            type="password"
            placeholder="Password"
            value={password}
            onChange={(e) => setPassword(e.target.value)}
            className="w-full p-2 mb-4 border rounded"
          />
          <button
            onClick={handleLogin}
            className="w-full bg-blue-500 text-white px-4 py-2 rounded hover:bg-blue-600"
          >
            Login
          </button>
        </div>
      )}
    </div>
  );
};

export default App;

Open Sandbox

Больше Рекомендаций

Посмотреть Все

Next.js Vape Website

Web Developmenten

4.0

I want to create a simpple webiste in nextjs for vape listing and deatil anc checkout page using striip there as well stunning landing page to attract and add to cart then user ca place order Manchester Vape website name

Next.jsVapeStripe19.06.2025

Create TikTok Page

Web Developmenten

4.0

Create a TikTok like landing page.

TikTokLanding PageWeb Design17.06.2025

React Backoffice Frontend Guide

Web Developmenten

4.0

A backoffice frontend built in React 18 + Vite with Tailwind CSS and DaisyUI, Zustand for global state, TanStack Query for API state, React Hook Form with Zod for validation, and Axios for HTTP. The UI consists of: A dashboard (placeholder for future analytics) Games module: manage game metadata and brand availability Brands module: create/edit brands, assign games, apply jurisdiction rules Regulation module: read-only view of jurisdiction rules Players module: read-only, filterable player list Game sessions: read-only session explorer by brand/player Bets: read-only history table with filters Errored bets: read-only view of failed transactions and error details Admin users: single-user management (MVP) Layout is responsive with dark/light mode. Design system follows Mixpanel-style dashboards with interactive tables, forms, and consistent UI primitives. All modules are isolated under /features, with shared components, services, and store logic modularized.

ReactTailwind CSSZustand16.06.2025

React Backoffice Frontend Guide

Web Developmenten

4.0

ReactViteTailwind CSS16.06.2025

CRM Web App Development

Web Developmenten

4.0

Create a responsive web app which maintains the CRM data like customer name, phone number , whatsapp number, location, Remarks etc.. so that i can send the brochure automatically to the customer added, through whatsapp api the message should be auto generated based on the keywords in the remarks. make it more professional and beautiful

CRMWeb AppWhatsApp API13.06.2025

MercadoPago Payer Info with React Hooks

Web Developmenten

4.0

generate mercadopago payer information capture with validations in input fields, without use form , with react hooks

MercadoPagoReact HooksInput Validation12.06.2025