This document outlines the configuration and setup for the front-end environment of the Transcription Aide Platform (TAP). It includes the necessary tools, libraries, and environment settings required for development, testing, and deployment.

1. Project Structure
2. Environment Setup
3. Development Configuration
4. Build Configuration
5. Testing Configuration
6. Styling and Theming
7. Version Control
8. Deployment Configuration
9. Best Practices
10. Troubleshooting

|-- src/
|   |-- assets/
|   |-- components/
|   |-- pages/
|   |-- services/
|   |-- styles/
|   |-- App.js
|   |-- index.js
|-- public/
|-- .env
|-- package.json
|-- webpack.config.js
|-- README.md

Ensure the following are installed on your machine:

• npm or yarn: For managing dependencies
• Git: Version control system

Clone the repository and install the necessary dependencies:

git clone https://github.com/fuhui14/SWEN90017-2024-TAP.git
cd SWEN90017-2024-TAP
npm install

Specify the package manager being used (npm or yarn) and any important commands:

• Install Dependencies: npm install
• Start Development Server: npm start
• Build for Production: npm run build

List custom scripts defined in package.json:

"scripts": {
  "start": "webpack serve --config webpack.dev.js",
  "build": "webpack --config webpack.prod.js",
  "test": "jest",
  "lint": "eslint ./src"
}

Describe how to set up environment variables using a .env file.

REACT_APP_API_URL=https://api.example.com
REACT_APP_ENV=development

Describe the configuration of Webpack for bundling:

• Entry Point: ./src/index.js
• Output Directory: ./dist
• Loaders: JavaScript, CSS, Images
• Plugins: HTMLWebpackPlugin, MiniCssExtractPlugin

Include a snippet or reference to your Webpack configuration file:

module.exports = {
  entry: './src/index.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js',
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: 'babel-loader',
      },
      {
        test: /\.css$/,
        use: ['style-loader', 'css-loader'],
      },
      // Other loaders...
    ],
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: './public/index.html',
    }),
    // Other plugins...
  ],
};

Describe Babel's configuration for transpiling JavaScript:

• Presets: @babel/preset-env, @babel/preset-react
• Plugins: Additional plugins like @babel/plugin-proposal-class-properties

Example .babelrc:

{
  "presets": ["@babel/preset-env", "@babel/preset-react"],
  "plugins": ["@babel/plugin-proposal-class-properties"]
}

Configure testing libraries like Jest or Mocha:

• Framework: Jest
• Command: npm test Example Jest configuration in package.json:

"jest": {
  "setupFilesAfterEnv": ["<rootDir>/src/setupTests.js"],
  "testEnvironment": "jsdom"
}

Integration testing involves testing the interactions between different components or modules of the application to ensure they work together as expected. Here’s a guide on how to conduct integration tests:

• Use a testing framework that supports integration tests. For JavaScript/React projects, you can use frameworks like Jest, Mocha, or Cypress.

• Identify key interactions between components or modules that need to be tested. For example, testing how the file upload component interacts with the transcription processing module.

• Ensure your testing environment is configured similarly to the production environment. This includes having access to the necessary APIs, databases, or services.
• Use test doubles (mocks, stubs, or spies) for any external services or APIs that your modules interact with.

• Write test cases that cover the interaction between modules. For example:

test('File upload triggers transcription process', async () => {
  const file = new File(['audio content'], 'test-audio.mp3', { type: 'audio/mp3' });
  const uploadComponent = render(<UploadComponent />);
  
  await act(async () => {
    fireEvent.change(uploadComponent.getByTestId('file-upload'), { target: { files: [file] } });
    fireEvent.click(uploadComponent.getByText('Upload'));
  });
  
  expect(transcriptionProcess).toHaveBeenCalledWith(file);
});

• Test cases should cover all possible scenarios, including successful interactions and failure cases.

• Execute the integration tests using your testing framework’s command, e.g., npm run test for Jest.
• Review the test results and ensure that all tests pass.

• Set up your CI/CD pipeline to run integration tests on every code push or pull request to ensure that new changes do not break existing integrations.

Acceptance testing is performed to verify that the entire system meets the business requirements and works as expected. It’s usually the final testing phase before the product is released.

• Clearly define the acceptance criteria for each feature based on user stories. This should be agreed upon by the stakeholders and the development team.

• Write test cases that cover the entire functionality of the feature, ensuring that all acceptance criteria are met.
• Test cases should be written in a way that mimics real user behavior, focusing on the end-to-end functionality.
• Example:

Feature: Transcribe Audio File
  Scenario: User uploads an audio file and receives a transcription
    Given the user has an audio file ready for transcription
    When the user uploads the audio file
    And selects the language as "English"
    Then the system should transcribe the file
    And the transcription should be sent to the user’s email

• Manually execute the acceptance tests or use an automated tool like Cypress or Selenium if the tests are automated.
• Ensure all test cases pass and the system behaves as expected according to the acceptance criteria.

• Involve stakeholders (e.g., product owners, end users, client) to review the test results.
• They should validate that the system meets the business requirements and is ready for release.

• Document the results of the acceptance tests, including any issues encountered and how they were resolved.
• If all acceptance criteria are met, the feature is considered complete and ready for deployment.

• Obtain sign-off from stakeholders to confirm that the feature or product meets the required standards and is ready for production.

Describe the setup for a CSS preprocessor (e.g., SASS):

• Installation: npm install sass --save-dev
• Usage: Example of importing .scss files in React components.

Outline the approach for theming (if applicable), e.g., using a theme provider or CSS variables.

Describe the branching strategy (e.g., Git Flow, GitHub Flow):

• Main Branch: main
• Feature Branches: feature/your-feature-name
• Release Branches: release/v1.0

List any Git hooks in use, such as pre-commit hooks for linting.

Describe where the front-end will be deployed (e.g., AWS S3, Netlify):

• Build Command: npm run build
• Deployment Command: Commands or CI/CD pipeline steps for deployment.

Include any CI/CD pipeline configurations (e.g., GitHub Actions, Travis CI).

• Code Formatting: Use Prettier for consistent formatting.
• Linting: ESLint configuration for maintaining code quality.
• Folder Structure: Maintain a consistent folder structure for scalability.

Common issues and their solutions:

• Issue: "Module not found"
  • Solution: Ensure that the dependency is installed and paths are correct.
• Issue: "EADDRINUSE: Address already in use"
  • Solution: Stop any process using the port or change the port in the configuration.