• Townie
    AI
  • Blog
  • Docs
  • Pricing
  • We’re hiring!
Log inSign up
chriseidhof

chriseidhof

Projektwoche

Public
Like
Projektwoche
Home
Code
5
.claude
1
backend
1
README.md
main.ts
schueler.html
Branches
1
Pull requests
Remixes
History
Environment variables
Val Town is a collaborative website to build and scale JavaScript apps.
Deploy APIs, crons, & store data – all from the browser, and deployed in milliseconds.
Sign up now
Code
/
Code
/
Search
index.ts
https://chriseidhof--e6d56768bfc111f0974b42dde27851f2.web.val.run
README.md

Projektauswahl System

A dynamic project selection system where students can rank their preferences for different time slots with a comprehensive admin interface for management.

Features

  • Dynamic Data Management: Timeslots and projects are stored in SQLite database
  • Student Interface: Drag-and-drop interface for ranking project preferences
  • Advanced Admin Panel: Web-based interface with inline editing capabilities
  • Data Export: CSV export of student responses
  • Responsive Design: Works on desktop and mobile devices

Structure

├── backend/
│   └── index.ts          # Main backend with API routes and admin panel
├── schueler.html         # Student-facing form (dynamically loads data)
└── README.md            # This file

Usage

Student Interface

  • Visit the main page to fill out project preferences
  • Enter your name and drag projects to rank them for each timeslot
  • Submit to save responses to database

Admin Interface

  • Visit /admin to manage the system
  • Inline Editing: Click "Edit" on any timeslot or project to modify it directly in the table
    • Edit timeslot titles, descriptions, and order
    • Edit project names, descriptions, and reassign to different timeslots
    • Visual feedback with highlighted rows during editing
    • Save/Cancel options for each edit operation
  • Bulk Operations: Add new timeslots and projects using the forms
  • Status Management: Activate/deactivate timeslots and projects
  • Data Management: View all student responses and export as CSV
  • Safe Deletion: Delete items with confirmation dialogs

API Endpoints

Public Endpoints

  • GET / - Student form
  • GET /api/timeslots - Get all active timeslots with projects
  • POST /api/responses - Submit student responses

Admin Endpoints

  • GET /admin - Admin panel interface with inline editing
  • GET /admin/responses - View student responses grouped by student
  • GET /api/debug/data - View all database data
  • GET /api/debug/reset - Reset database (development only)
  • POST /api/admin/timeslots - Add new timeslot
  • POST /api/admin/projects - Add new project
  • POST /api/admin/projects/:id/copy - Copy project to different timeslot
  • PUT /api/admin/timeslots/:id - Update timeslot (supports full updates and status toggle)
  • PUT /api/admin/projects/:id - Update project (supports full updates and status toggle)
  • DELETE /api/admin/timeslots/:id - Delete timeslot (cascades to projects and responses)
  • DELETE /api/admin/projects/:id - Delete project
  • DELETE /api/admin/responses/student/:studentName - Delete all responses for a specific student
  • GET /api/admin/export-csv - Export responses as CSV

Database Schema

Timeslots Table

  • id - Primary key
  • title - Display title (e.g., "1. Dienstag 9:00-10:30 Uhr")
  • time_description - Time description
  • order_index - Display order
  • active - Whether timeslot is active
  • created_at - Creation timestamp

Projects Table

  • id - Primary key
  • timeslot_id - Foreign key to timeslots
  • project_name - Project name
  • project_description - Optional description
  • max_participants - Maximum number of participants (optional)
  • active - Whether project is active
  • created_at - Creation timestamp

Responses Table

  • id - Primary key
  • student_name - Student's name
  • timeslot_id - Foreign key to timeslots
  • first_choice - First preference
  • second_choice - Second preference
  • third_choice - Third preference
  • submitted_at - Submission timestamp

Admin Panel Features

Inline Editing

  • Timeslots: Edit title, description, and order index directly in the table
  • Projects: Edit name, description, max participants, and reassign to different timeslots
  • Visual Feedback: Rows highlight in yellow during edit mode
  • State Management: Only one item can be edited at a time
  • Validation: Form validation before saving changes

User Interface

  • Color-coded Buttons:
    • 🔵 Edit (Blue) - Start inline editing
    • 🟢 Save (Green) - Confirm changes
    • ⚫ Cancel (Gray) - Discard changes
    • 🔵 Copy (Cyan) - Copy project to another timeslot
    • 🟡 Toggle (Yellow) - Activate/Deactivate
    • 🔴 Delete (Red) - Remove item
  • Responsive Tables: Optimized for both desktop and mobile viewing
  • Real-time Updates: Changes reflect immediately after saving

Data Management

  • Student Response Grouping: View all responses grouped by student at /admin/responses
  • Student Response Deletion: Delete all responses for a specific student with one click
  • Export Functionality: Download all student responses as CSV
  • Copy Projects: Easily duplicate projects across different timeslots
  • Bulk Operations: Add multiple items using the forms
  • Safe Deletion: Confirmation dialogs prevent accidental deletions
  • Cascade Operations: Deleting timeslots removes associated projects and responses

Default Data

The system initializes with:

  • 3 timeslots (Tuesday morning sessions)
  • 8 projects (Projekt A through H) for each timeslot

Customization

You can customize the system by:

  1. Using the Admin Panel:
    • Inline edit existing timeslots and projects
    • Add new timeslots and projects via forms
    • Activate/deactivate items as needed
  2. Styling Changes: Modify the CSS in schueler.html for student interface styling
  3. Database Schema: Update the schema in backend/index.ts for additional fields
  4. Admin Interface: Customize the admin panel styling and functionality

Development

Database Reset

To reset the database during development:

GET /api/debug/reset

This will drop all tables and recreate them with default data.

Debugging

  • Use /api/debug/data to view all database contents
  • Check browser console for client-side errors
  • Server logs show database operations and API calls

Security Notes

  • No authentication is currently implemented on admin endpoints
  • Consider adding authentication for production use
  • All admin functions are accessible via /admin URL
  • Database operations include proper error handling and validation
HTTP
  • index.ts
    chriseidhof--e6…f2.web.val.run
Code
.claudebackendREADME.mdmain.tsschueler.html
FeaturesVersion controlCode intelligenceCLI
Use cases
TeamsAI agentsSlackGTM
DocsShowcaseTemplatesNewestTrendingAPI examplesNPM packages
PricingNewsletterBlogAboutCareers
We’re hiring!
Brandhi@val.townStatus
X (Twitter)
Discord community
GitHub discussions
YouTube channel
Bluesky
Open Source Pledge
Terms of usePrivacy policyAbuse contact
© 2025 Val Town, Inc.