User Profiles

Learn how to create user profile pages with editable information and avatar uploads.

Profile Data Structure

// User profile schema
{
  id: 'user-123',
  displayName: 'Jane Doe',
  email: 'jane@example.com',
  avatarUrl: 'https://...',
  bio: 'Software developer',
  settings: {
    notifications: true,
    theme: 'dark'
  }
}

Create the Profile Page

function Profile({ userId }) {
  const [profile, setProfile] = useState(null);

  useEffect(() => {
    db.collection('profiles')
      .get(userId)
      .then(setProfile);
  }, [userId]);

  if (!profile) return <Loading />;

  return (
    <div className="profile">
      <Avatar src={profile.avatarUrl} />
      <h1>{profile.displayName}</h1>
      <p>{profile.bio}</p>
    </div>
  );
}

Avatar Upload

import { storage } from '@demo/storage';

const uploadAvatar = async (file, userId) => {
  const path = `avatars/${userId}/${file.name}`;
  const result = await storage.upload(path, file);

  await db.collection('profiles').update(userId, {
    avatarUrl: result.url
  });
};