📚 QuestionBank

A beautiful, interactive question bank web app built with HTML, Tailwind CSS, and Supabase. Browse questions, take quizzes, submit feedback, and manage your question bank via a full admin interface.

---

✨ Features

• 📖 Browse Questions — Filter and search a rich question library
• 🎯 Quiz Mode — Take timed quizzes by category/difficulty
• 💬 Feedback System — Submit bugs, suggestions, or question-specific feedback
• 🛠️ Admin Interface — Full CRUD for questions (Add, Edit, Delete)
• 📥 CSV Import/Export — Bulk upload from your CSV question bank
• 📱 Fully Responsive — Works on desktop and mobile
• 🚀 Static Hosting Ready — Deploy to Vercel, Netlify, or GitHub Pages

---

📁 Project Structure

questionbank-app/
├── index.html       # Main public-facing app
├── admin.html       # Admin panel (question management)
├── questions.csv    # Sample CSV question bank template
└── README.md

---

🔧 Setup & Configuration

1. Create a Supabase Project

1. Go to supabase.com and sign up (free tier works great)
2. Create a new project
3. Go to Project Settings → API
4. Copy your Project URL and anon public key

2. Create Database Tables

Open the SQL Editor in Supabase and run:

-- Questions table
CREATE TABLE questions (
  id BIGSERIAL PRIMARY KEY,
  question_text TEXT NOT NULL,
  options JSONB NOT NULL DEFAULT '[]',
  correct_answer TEXT NOT NULL,
  category TEXT DEFAULT 'General',
  difficulty TEXT DEFAULT 'Medium',
  explanation TEXT,
  created_at TIMESTAMPTZ DEFAULT NOW()
);

-- Feedback table
CREATE TABLE feedback (
  id BIGSERIAL PRIMARY KEY,
  type TEXT NOT NULL DEFAULT 'suggestion',
  feedback_text TEXT NOT NULL,
  user_name TEXT DEFAULT 'Anonymous',
  user_email TEXT,
  question_id BIGINT REFERENCES questions(id),
  created_at TIMESTAMPTZ DEFAULT NOW()
);

-- Enable Row Level Security (RLS)
ALTER TABLE questions ENABLE ROW LEVEL SECURITY;
ALTER TABLE feedback ENABLE ROW LEVEL SECURITY;

-- Public read access (for the main site)
CREATE POLICY "Public can view questions" ON questions FOR SELECT USING (true);
CREATE POLICY "Public can view feedback" ON feedback FOR SELECT USING (true);

-- Allow public inserts (for feedback & admin demo)
CREATE POLICY "Anyone can insert questions" ON questions FOR INSERT WITH CHECK (true);
CREATE POLICY "Anyone can update questions" ON questions FOR UPDATE USING (true);
CREATE POLICY "Anyone can delete questions" ON questions FOR DELETE USING (true);
CREATE POLICY "Anyone can insert feedback" ON feedback FOR INSERT WITH CHECK (true);

⚠️ For production: Consider adding authentication and restricting write policies.

3. Configure the Website

Open index.html and admin.html, and replace:

const SUPABASE_URL = 'YOUR_SUPABASE_URL';
const SUPABASE_ANON_KEY = 'YOUR_SUPABASE_ANON_KEY';

With your actual Supabase credentials.

---

📥 Importing Your CSV Question Bank

1. Prepare your CSV with columns:

   id,question_text,options,correct_answer,category,difficulty,explanation
   

2. options should be a JSON array string: ["A","B","C","D"]

3. Go to Admin → Import CSV and upload your file

4. Or manually add questions via the admin form

Sample CSV Format

See questions.csv in this repo for a ready-to-use example.

---

🖥️ Running Locally

Simply open index.html in your browser:

# From the project folder
open index.html
# or
python3 -m http.server 8000
# Then visit http://localhost:8000

The app works in demo mode without Supabase (uses sample questions).

---

🚀 Hosting the Website

Option A: Vercel (Recommended)

1. Push this folder to a GitHub repo
2. Go to vercel.com → New Project
3. Import your repo
4. Deploy — done!

Option B: Netlify

1. Drag & drop the questionbank-app/ folder to netlify.com/drop
2. Or connect via Git

Option C: GitHub Pages

1. Push to GitHub
2. Settings → Pages → Source: main branch, / root
3. Your site will be live at https://<username>.github.io/<repo>

⚠️ Make sure your Supabase credentials are in the code before deploying!

---

📊 Database Schema

questions

Column	Type	Description
id	bigint	Auto-increment PK
question_text	text	The question
options	jsonb	Array of answer choices
correct_answer	text	The right answer
category	text	e.g. "Science", "History"
difficulty	text	"Easy", "Medium", "Hard"
explanation	text	Optional explanation

feedback

Column	Type	Description
id	bigint	Auto-increment PK
type	text	"bug", "suggestion", "question"
feedback_text	text	The feedback content
user_name	text	Submitter name
user_email	text	Optional email
question_id	bigint	Optional link to question
created_at	timestamptz	Timestamp

---

🛠️ Tech Stack

• Frontend: HTML5, Tailwind CSS (via CDN), vanilla JavaScript
• Backend: Supabase (PostgreSQL + Auth + Realtime)
• Icons: Font Awesome
• Fonts: Inter + Space Grotesk

---

📝 License

MIT — Free to use and customize.

---

🙌 Contributing

PRs welcome! Ideas for features:

• User accounts / login
• Leaderboards for quizzes
• Question ratings
• Dark mode toggle

---

Built with ❤️ for learning and knowledge sharing.