Create Initial Web App for AI Risk Assessment Tool (React SPA)

[adidahl]

Description

Here is a clean, well-structured English ticket you can use in Jira, GitHub, Azure Boards, Linear, etc.

⸻

Ticket: Create Initial Web App for AI Risk Assessment Tool (React SPA)

Type: Feature
Priority: High
Status: To Do
Assignee: —

⸻

Summary

Set up the first version of the AI Risk Assessment Tool as a standalone React Single-Page Application (SPA).
This application will allow users to go through an interactive questionnaire and receive a risk summary, while administrators can create and manage questions, answers, and scoring logic.

⸻

Goals
• Create the foundation of the web application (React SPA).
• Implement the initial UI flow for answering risk-related questions.
• Build an admin interface to manage question sets.
• Provide a result page that generates risk estimations based on user inputs.
• Prepare the codebase for future integration with backend services (if needed).

⸻

Scope

1. App Foundation
   • Initialize React SPA using Vite or Create React App (TBD).
   • Set up project structure:
   • /src/components
   • /src/pages
   • /src/admin
   • /src/hooks
   • /src/types
   • /src/utils
   • /src/state (if using Zustand/Redux)
   • Implement routing using react-router-dom.

⸻

2. User Flow (Risk Assessment)

User Pages
1. Home / Start Page
• Short introduction explaining the purpose of the assessment.
• “Start assessment” button.
2. Assessment Page
• Show one question at a time or a form with multiple questions (TBD).
• Allow user to click/select answers (multiple-choice, yes/no, severity levels…).
• Store answers locally (state management).
3. Results Page
• Summarize user’s answers.
• Calculate risk score (simple scoring logic for MVP).
• Display visual risk level (Low / Medium / High).
• Provide recommended actions.

⸻

3. Admin Interface

Admin Pages
1. Admin Login (optional for MVP, simple access gate)
2. Question Management
• Add / edit / delete questions.
• Define answer options.
• Assign scoring values per answer.
3. Preview Questions
• Preview how questions will look in the user flow.

For MVP, this can be stored in local storage or a simple JSON file. Backend integration will be added later.

⸻

4. UI & Design
   • Simple, clean, accessible design.
   • Use a minimal component library (e.g., MUI, Chakra UI, or custom).
   • Modular components:
   • QuestionCard
   • AnswerOption
   • RiskScoreBadge
   • AdminEditor
   • Navigation components.

⸻

5. Technical Notes
   • Entire app runs client-side (SPA).
   • All state stored in client for MVP.
   • Flexible structure for future expansion:
   • API integration
   • Authentication
   • Database-backed question sets
   • Versioned assessments

⸻

Acceptance Criteria
• React SPA boots successfully and routes work.
• User can go through all questions and select answers.
• Admin can create, edit, and delete questions.
• Questions persist during the session.
• Result page calculates a risk score and displays a summary.
• UI is responsive and accessible.
• Codebase is structured and ready for future backend features.

⸻

Out of Scope (For Now)
• Authentication (Admin login may be simple placeholder).
• Database integration.
• Cloud deployment.
• Advanced analytics or PDF export.
• Multi-language support.
• Complex scoring models.

⸻

Notes

This is the first foundational milestone.
Future tickets will cover:
• Risk scoring engine v2
• Export/sharing functionality
• Backend API
• Integration with internal systems
• Role-based admin access
• Audit log and compliance support

Additional Information

No response

Tasks

No response

Acceptance Criterias

No response