Software Requirements Engineering Learning Platform

A Next.js-based educational platform designed to help users practice requirements engineering skills through interactive labs. The platform features guided exercises on user stories, use cases, and other requirements engineering concepts.

Project Overview

This platform provides:

• Interactive labs with structured learning paths
• Different software development areas (requirements engineering, coding maintainers)
• Various topics per area (user stories, requirements engineering, etc.)
• Role-based exercises (tutor, student, professional)
• Configurable case studies with dedicated prompts
• URL-based filtering with query parameters
• Points-based feedback system
• Hint systems with progressive assistance
• Downloadable lab sheets for offline use

Getting Started

Prerequisites

• Node.js 18+
• npm or yarn

Installation

1. Clone the repository

git clone https://github.com/yourusername/sse-site.git
cd sse-site

2. Install dependencies

npm install
# or
yarn install

3. Start the development server

npm run dev
# or
yarn dev

4. Open http://localhost:3000 in your browser

Project Structure

/
├── app/             # Next.js application routes and components
├── components/      # Reusable UI components
├── data/            # Lab content and configuration
│   ├── index.ts     # Main data structure for labs
│   └── lab-sheets/  # Downloadable HTML lab sheets
├── lib/             # Utility functions
├── public/          # Static assets
│   └── files/       # Public files like downloadable resources
└── styles/          # CSS and styling

Creating a New Lab

Labs are defined in data/index.ts following a structured format:

1. Create a new lab array with steps:

const my_new_lab = [
  {
    title: "Part 1: Setup",
    time: 5,
    setup: ["Step 1", "Step 2"],
    prompt: `Your detailed prompt here...`,
  },
  {
    title: "Part 2: Game Interaction",
    time: 15,
    guidelines: ["Guideline 1", "Guideline 2"],
    details: [
      {
        heading: "Section heading",
        content: "Content details...",
      },
    ],
    // The prompt for Part 2 comes from the selected case study
    prompt: null,
  },
  // Add more steps as needed
];

2. Create case studies with prompts:

const myCaseStudy: CaseStudy = {
  id: "unique-case-study-id",
  name: "Case Study Display Name",
  description: "Brief description of the case study scenario",
  prompt: `Detailed prompt for the case study that will be used in the second step of the lab...`,
};

3. Create a lab object:

const my_new_lab_object: Lab = {
  id: "unique-lab-id",
  title: "Lab Title",
  description: "Brief description of the lab",
  steps: my_new_lab,
  downloadFile: "/files/lab-sheets/YourLabName.html", // Optional HTML lab sheet
};

4. Add your lab to the LABS array with appropriate area, topic, and case studies:

export const LABS: LabCategory[] = [
  // Existing categories
  {
    area: "requirements engineering", // or "coding maintainers", etc.
    topic: "user_stories_and_acceptance_criteria", // or "use_cases"
    persona: "tutor", // e.g., "tutor", "student", "professional"
    labs: [my_new_lab_object],
    caseStudies: [myCaseStudy, anotherCaseStudy],
  },
];

5. (Optional) Create and add a downloadable HTML lab sheet in the public/files/lab-sheets directory.

Case Study Configuration

Case studies provide context for labs and supply prompts for the second step of each lab:

1. Create case studies with unique IDs, display names, descriptions, and detailed prompts
2. The prompt in a case study is used for the second step of any lab
3. Lab steps with index 1 (the second step) should typically have their prompt set to null
4. Assign case studies to lab categories (area/topic combinations)

For example:

// Define case studies
const resetPasswordCaseStudy: CaseStudy = {
  id: "reset-password",
  name: "Reset Password",
  description: "A system to reset a user's password.",
  prompt: `
    1. User clicks reset password
    2. System sends them the link
    3. User enters new password
    4. System updates the account
  `,
};

// Assign to a lab category
{
  area: "requirements engineering",
  topic: "use_cases",
  persona: "tutor",
  labs: [my_tutor_lab],
  caseStudies: [resetPasswordCaseStudy]
}

Query Parameter Filtering

The platform supports URL-based filtering with query parameters:

• ?area=requirements%20engineering - Filter by area
• ?topic=User%20Stories%20And%20Acceptance%20Criteria - Filter by topic
• ?persona=tutor - Filter by persona
• ?caseStudy=reset-password - Filter by case study ID

You can combine parameters to create direct links to specific labs:

/labs?area=requirements%20engineering&topic=Use%20Cases&persona=tutor&caseStudy=reset-password

Development Workflow

Git Best Practices

1. Create a new branch for each feature or fix:

git checkout -b feature/your-feature-name
# or
git checkout -b fix/issue-you-are-fixing

2. Make your changes and commit with descriptive messages:

git add .
git commit -m "feat: add new user story lab for professionals"

3. Push your branch and create a pull request:

git push origin feature/your-feature-name

4. In your GitHub repository, create a pull request with:

   • Clear title describing the change
   • Description of what was changed and why
   • Any testing performed
   • Reference to related issues (if applicable)

5. After review and approval, merge your PR into the main branch

Code Style

• Follow existing patterns and conventions in the codebase
• Keep lab content structured and consistent with existing examples
• Use TypeScript types for all new code

Deployment

The application can be deployed to Vercel:

npm run build
# or
vercel