Contact person: Survey Grading Platform HTML + CSS + JS + JSONBIN + OPENAI API

Phone:Show

Email:Show

Location: lowell, United States

Budget: Recommended by industry experts

Time to start: As soon as possible

Project description:
"I need a web application to process and grade thousands of survey responses efficiently. The system should feel instant and responsive while reliably saving data in the background.

Data I'm Working With
I have CSV exports from survey tools containing responses to efficiency improvement suggestions. Each row is one submission with columns like "Q15_1 - Name", "Q15_2 - Email address", "Q3 - Please describe the core problem", "Q4 - Please describe your proposed solution", etc. I need to process up to 10,000 submissions at once.

What I Want the Interface to Look Like
I want a clean layout with a sidebar on the left showing grade categories (Unread, 0, 1, 2, 3, 4, 5) and the main area showing submission details. The sidebar should display the count of items in each grade and show the first 20 submission names. When I click on a category or submission name, I want to see the full details immediately.

At the top of the main area, I want grade buttons (Unread through 5) that I can click to move the current submission between grades. The header should show "Opportunities" as the title, with Upload Excel and Grade buttons on the right, plus a sync status indicator.

How I Want the Upload Process to Work
When I upload a CSV file, I want to see the submissions appear on screen immediately as they're being processed. I don't want to wait for everything to save before I can start reviewing and grading items. The system should show me real-time progress with counts of how many items have been parsed, displayed, queued for saving, and actually saved.

Background Saving Behavior I Need
While I'm reviewing submissions, the system should be quietly saving everything to JSONBin in the background. I want visual indicators showing which items are unsaved (yellow), currently being saved (blue), or fully saved (green). If something fails to save, I want to see red indicators and have the system retry automatically.

Grading Workflow I Expect
I want to click the "Grade" button to get a random unread submission. Then I can read through it and click one of the grade buttons (0-5) to score it. The submission should immediately move to that grade category in the sidebar, and I should see the counts update. The grade buttons should visually show which grade is currently selected.

Data Persistence Requirements
If I refresh the page or come back later, I want to see all my previous work intact. The system should load existing submissions from JSONBin and let me continue where I left off. If I upload the same CSV file again, it shouldn't create duplicates.

AI Summary Feature I Want
For submissions that have actual problem and solution content, I want the system to automatically generate concise summaries using OpenAI. The format should be a bold title, followed by problem statement, solution description, and savings estimate. I don't want summaries generated for empty or meaningless submissions.

Visual Feedback I Need
I want clear indicators throughout the interface showing sync status. The header should show if everything is synced, if saves are in progress, or if there are errors. Individual submissions in the sidebar should show their save status with icons. During uploads, I want to see progress statistics and a queue of save operations.

Error Handling Expectations
When things go wrong, I want specific error messages that help me understand what happened. The system should try to recover automatically when possible. For debugging, I want detailed console logging showing file parsing details, submission processing, and save operations.

Performance Requirements
The interface must feel instant even with thousands of submissions. Grade changes, navigation between submissions, and category switching should happen immediately without waiting for network operations. Large file uploads should show progressive results rather than blocking the interface.

Storage Architecture I Need
Use JSONBin with my existing master bin to store a master index, then create batch bins containing groups of 50 submissions each. Keep everything in browser memory for fast access while using JSONBin as the persistent backup.

Technical Constraints
Build as a single HTML file with embedded CSS and JavaScript. Use my existing JSONBin master key and OpenAI API key (but chunk the OpenAI key in code for security). Support both comma and tab-delimited CSV files with flexible column name matching. No localStorage - everything must persist through JSONBin.

Navigation Behavior
Clicking category headers in the sidebar should show the first submission in that grade. Clicking individual submission names should show that specific submission. The "Grade" button should randomly select from unread submissions. All navigation should be instant without network delays.

Data Display Requirements
Show contact information, AI summary, problem description, solution, savings estimates, implementation steps, and a sample of the raw CSV data for debugging. Handle missing or empty fields gracefully by showing "Not provided" rather than breaking the display.

This system needs to handle my real-world workflow of processing thousands of survey responses efficiently while providing reliable data persistence and a responsive user experience." (client-provided description)