Welcome to the Comet Starter App!

The goal of this project is to provide a React with TypeScript starter application, which comes pre-configured with the USWDS-based Comet Component Library as well as other tools to accelerate development. Some of these tools are as follows:

• Tooling: Vite
• Platform: React with TypeScript
• Component Library: Comet Component Library
• Data Visualization: Victory Charts
• State Management: Recoil
• Form Validation: React Hook Form
• Unit Testing: Vitest with React Testing Library
• Code Analysis: ESLint
• Code Formatting: Prettier
• End-to-End (E2E) Testing: Cypress with cypress-axe
• Accessibility Testing: Unlighthouse
• API Support: Axios with React Query
• API Testing: Jupyter Notebooks
• Authentication Support: Keycloak

Table of Contents

1. Running the Project Locally
2. Running Unit Tests
3. Running Code Quality Checks
4. Running End-to-End (E2E) Tests
5. Contributing
6. Next Steps

Running the Project Locally

1. To install dependencies, run the following:

npm install

2. To install the Comet CLI, run the following (optional):

npm install -g @metrostar/comet-cli

3. To run locally with SSO, add a file called .env.local to the comet-starter directory. Copy and paste the template below and replace the placeholder values with your own (optional):

SSO_AUTHORITY=[SOME_KEYCLOAK_REALM_URL] # Ex: http://localhost:8088/realms/dev
SSO_CLIENT_ID=[SOME_CLIENT_ID] # Ex: dev-client

4. To start the app, run the following:

npm run dev

Running Unit Tests

To make sure your changes do not break any unit tests, run the following:

npm run test

Ensure to review the coverage directory for code coverage details.

npm run test:coverage

Running Code Quality Checks

To make sure your changes adhere to additional code quality standards, run the following:

npm run lint
npm run format

You can also see the .vscode/settings.json file to find how to enable auto-formatting on save.

Running End-to-End (E2E) Tests

Note: running E2E tests requires the app to be running as well, run the following:

npm run e2e

Contributing

1. Fork the Project
2. Create your Feature Branch (git checkout -b feature_a)
3. Commit your Changes (git commit -m 'Added new feature_a')
4. Push to the Branch (git push origin feature_a)
5. Open a Pull Request

Next Steps

The following provides a short list of tasks which are potential next steps for this project. These could be steps in making use of this baseline or they could be for learning purposes.

• Apply/clean-up basic branding (title, header, footer, logo, favicon, etc)
• Add/Update Dashboard with applicable content
• Enhance Dashboard table functionality (filter, search, paging)
• Enhance Item Details page with more applicable content and layout
• Integrate with some API (Ex. Comet API)
• Add User Management Dashboard and Detail pages
• Add Profile Menu (include Sign In/Sign Out, User Management, etc)
• Add Site Search functionality (add Search Results page and update Header Search)
• Integrate with some API to support Basic Authentication
• Integrate with some Identity Provider to support Single Sign-On (SSO)
• Deploy to cloud infrastructure