Team Member Showcase

This is the team member showcase design for a fictional tech company based on a project in the HTML, CSS & JavaScript course on YouTube by Codesistency. This implementation makes some slight adjustments to the original design by leveraging technologies such as React, Vite, TailwindCSS, TypeScript and JSON.

This is a design project so only simple interactions such as hovering and clicking are supported by the application. No business logic is implemented!

Design

Component Hierarchy

• Header Header for the team showcase page.
• Cards The collection of team member info cards.
  • Card The card for the specified team member
    • CardHeader
    • CardFooter
• CallToAction The call-to-action prompting the user to join the fictional development team.

JSON Data

The original implementation uses hardcoded values for the team members. In this implementation, the data is stored in the team.json file as an array of objects to mimic real world use of an API. Thus, cards and data within them can now be added and removed simply by modifying the JSON file.

[
    {
        "id": number,
        "name": string,
        "role": string,
        "bio": number,
        "picture": string
    }
]

Additional Information

This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules. Currently, two official plugins are available:

• @vitejs/plugin-react uses Babel (or oxc when used in rolldown-vite) for Fast Refresh
• @vitejs/plugin-react-swc uses SWC for Fast Refresh

React Compiler

The React Compiler is not enabled on this template because of its impact on dev & build performances. To add it, see this documentation.

Expanding the ESLint configuration

If you are developing a production application, we recommend updating the configuration to enable type-aware lint rules:

export default defineConfig([
  globalIgnores(['dist']),
  {
    files: ['**/*.{ts,tsx}'],
    extends: [
      // Other configs...

      // Remove tseslint.configs.recommended and replace with this
      tseslint.configs.recommendedTypeChecked,
      // Alternatively, use this for stricter rules
      tseslint.configs.strictTypeChecked,
      // Optionally, add this for stylistic rules
      tseslint.configs.stylisticTypeChecked,

      // Other configs...
    ],
    languageOptions: {
      parserOptions: {
        project: ['./tsconfig.node.json', './tsconfig.app.json'],
        tsconfigRootDir: import.meta.dirname,
      },
      // other options...
    },
  },
])

You can also install eslint-plugin-react-x and eslint-plugin-react-dom for React-specific lint rules:

// eslint.config.js
import reactX from 'eslint-plugin-react-x'
import reactDom from 'eslint-plugin-react-dom'

export default defineConfig([
  globalIgnores(['dist']),
  {
    files: ['**/*.{ts,tsx}'],
    extends: [
      // Other configs...
      // Enable lint rules for React
      reactX.configs['recommended-typescript'],
      // Enable lint rules for React DOM
      reactDom.configs.recommended,
    ],
    languageOptions: {
      parserOptions: {
        project: ['./tsconfig.node.json', './tsconfig.app.json'],
        tsconfigRootDir: import.meta.dirname,
      },
      // other options...
    },
  },
])