A web application for validating hand sign detection data for the HCI lab. This platform allows users to view videos of hand signs and validate the correct sign being performed.
The project consists of two main parts:
- Server: A Node.js/Express backend that serves the API and static files
- Client: A React frontend built with TypeScript and Vite
- User authentication with hardcoded accounts
- Video playback of hand signs
- Selection of correct hand sign from a list of options
- Progress tracking for each user
- Local storage of validation results
- Node.js (v14 or higher)
- npm (v6 or higher)
-
Clone the repository:
git clone <repository-url> cd HCI-lab-website -
Install server dependencies:
cd server npm install -
Install client dependencies:
cd ../client npm install
- Place your hand sign videos in the
server/videosdirectory - Update the
server/data/videos.jsonfile to match your video filenames - Update the
server/data/handsigns.jsonfile with your list of hand signs
-
Start the server:
cd server npm run dev -
Start the client:
cd ../client npm run dev -
Open your browser and navigate to
http://localhost:5173
The application comes with 4 hardcoded user accounts:
- Username: user1, Password: password1
- Username: user2, Password: password2
- Username: user3, Password: password3
- Username: user4, Password: password4
All validation data is stored locally in JSON files:
- Hand signs list:
server/data/handsigns.json - Videos list:
server/data/videos.json - Validation results:
server/data/results/user_[id]_results.json
The server is built with Express and provides the following endpoints:
POST /api/login: Authenticate a userGET /api/handsigns: Get the list of hand signsGET /api/videos: Get the list of videos for validationPOST /api/submit: Submit a validation resultGET /api/progress/:userId: Get a user's validation progress
The client is built with React and TypeScript, using the following main components:
App: Main application component with routingLogin: User authentication componentValidationPage: Main validation interfaceProgressBar: Shows validation progress
This project is licensed under the MIT License.