Projektwoche
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.
index.ts
https://chriseidhof--e6d56768bfc111f0974b42dde27851f2.web.val.run
A dynamic project selection system where students can rank their preferences for different time slots with a comprehensive admin interface for management.
- 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
├── backend/
│ └── index.ts # Main backend with API routes and admin panel
├── schueler.html # Student-facing form (dynamically loads data)
└── README.md # This file
- 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
- Visit
/adminto 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
GET /- Student formGET /api/timeslots- Get all active timeslots with projectsPOST /api/responses- Submit student responses
GET /admin- Admin panel interface with inline editingGET /admin/responses- View student responses grouped by studentGET /api/debug/data- View all database dataGET /api/debug/reset- Reset database (development only)POST /api/admin/timeslots- Add new timeslotPOST /api/admin/projects- Add new projectPOST /api/admin/projects/:id/copy- Copy project to different timeslotPUT /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 projectDELETE /api/admin/responses/student/:studentName- Delete all responses for a specific studentGET /api/admin/export-csv- Export responses as CSV
id- Primary keytitle- Display title (e.g., "1. Dienstag 9:00-10:30 Uhr")time_description- Time descriptionorder_index- Display orderactive- Whether timeslot is activecreated_at- Creation timestamp
id- Primary keytimeslot_id- Foreign key to timeslotsproject_name- Project nameproject_description- Optional descriptionmax_participants- Maximum number of participants (optional)active- Whether project is activecreated_at- Creation timestamp
id- Primary keystudent_name- Student's nametimeslot_id- Foreign key to timeslotsfirst_choice- First preferencesecond_choice- Second preferencethird_choice- Third preferencesubmitted_at- Submission timestamp
- 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
- 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
- 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
The system initializes with:
- 3 timeslots (Tuesday morning sessions)
- 8 projects (Projekt A through H) for each timeslot
You can customize the system by:
- Using the Admin Panel:
- Inline edit existing timeslots and projects
- Add new timeslots and projects via forms
- Activate/deactivate items as needed
- Styling Changes: Modify the CSS in
schueler.htmlfor student interface styling - Database Schema: Update the schema in
backend/index.tsfor additional fields - Admin Interface: Customize the admin panel styling and functionality
To reset the database during development:
GET /api/debug/reset
This will drop all tables and recreate them with default data.
- Use
/api/debug/datato view all database contents - Check browser console for client-side errors
- Server logs show database operations and API calls
- No authentication is currently implemented on admin endpoints
- Consider adding authentication for production use
- All admin functions are accessible via
/adminURL - Database operations include proper error handling and validation