How to Build Full-Stack Apps
WITHOUT Writing a Backend

import { createClient } from '@supabase/supabase-js';

// 1. Initialize Supabase in your frontend (Safe to expose anon key!)
const supabase = createClient(
  'https://xyzcompany.supabase.co',
  'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9...' // Anon Public Key
);

// 2. Fetch user's private study notes directly in the browser
async function fetchMyNotes() {
  const { data, error } = await supabase
    .from('notes')
    .select('*')
    .order('created_at', { ascending: false });

  if (error) console.error('Fetch error:', error);
  else renderNotes(data); // Safely displays ONLY this user's notes!
}

// 3. Create a new note directly from a button click
async function createNote(title, content) {
  const { data: { user } } = await supabase.auth.getUser();

  const { error } = await supabase
    .from('notes')
    .insert([{ title, content, user_id: user.id }]);

  if (!error) alert('Note saved to PostgreSQL cloud database!');
}

// Sign Up with Email and Password
async function handleSignUp(email, password) {
  const { data, error } = await supabase.auth.signUp({
    email: email,
    password: password,
  });
  if (error) alert(error.message);
  else alert('Account created! Please check your email inbox.');
}

// Sign In with 1-Click Google OAuth
async function handleGoogleLogin() {
  const { data, error } = await supabase.auth.signInWithOAuth({
    provider: 'google',
    options: {
      redirectTo: window.location.origin + '/dashboard.html'
    }
  });
}

// Sign Out
async function handleLogout() {
  await supabase.auth.signOut();
  window.location.href = '/login.html';
}

<!-- 100% Working Contact Form without Backend -->
<form action="https://api.web3forms.com/submit" method="POST" class="space-y-4 max-w-md">
  <!-- Replace with your free Access Key from web3forms.com -->
  <input type="hidden" name="access_key" value="YOUR_ACCESS_KEY_HERE">

  <div>
    <label class="block text-sm font-semibold mb-1">Your Name</label>
    <input type="text" name="name" required class="w-full p-2 border rounded">
  </div>

  <div>
    <label class="block text-sm font-semibold mb-1">Your Email</label>
    <input type="email" name="email" required class="w-full p-2 border rounded">
  </div>

  <div>
    <label class="block text-sm font-semibold mb-1">Message</label>
    <textarea name="message" required class="w-full p-2 border rounded" rows="4"></textarea>
  </div>

  <button type="submit" class="bg-indigo-600 text-white px-4 py-2 rounded font-bold">
    Send Message
  </button>
</form>

async function uploadUserAvatar(fileInput) {
  const file = fileInput.files[0];
  if (!file) return;

  // Generate unique file path
  const fileExt = file.name.split('.').pop();
  const fileName = `${Math.random()}.${fileExt}`;
  const filePath = `avatars/${fileName}`;

  // Upload directly from browser to Supabase Storage Bucket
  const { error: uploadError } = await supabase.storage
    .from('public-files')
    .upload(filePath, file);

  if (uploadError) {
    alert('Upload failed: ' + uploadError.message);
    return;
  }

  // Get public download URL to display in user profile
  const { data: { publicUrl } } = supabase.storage
    .from('public-files')
    .getPublicUrl(filePath);

  console.log('File available at:', publicUrl);
}

import Fuse from 'fuse.js';

// Dataset loaded from static JSON or Supabase
const books = [
  { title: 'Data Structures and Algorithms', author: 'Narasimha Karumanchi', branch: 'CSE' },
  { title: 'Higher Engineering Mathematics', author: 'B.S. Grewal', branch: 'All' },
  { title: 'Operating System Concepts', author: 'Silberschatz', branch: 'IT' }
];

// Configure fuzzy search (tolerates typos like "algoithms")
const fuse = new Fuse(books, {
  keys: ['title', 'author', 'branch'],
  threshold: 0.3 // 0.0 = perfect match, 1.0 = match anything
});

// Search as the user types
function onSearch(query) {
  const results = fuse.search(query);
  console.log('Instant matches:', results.map(r => r.item));
}