Giter Club home page Giter Club logo

metrostar / comet-starter Goto Github PK

View Code? Open in Web Editor NEW
9.0 2.0 5.0 3.52 MB

React with TypeScript Starter App for Comet

Home Page: https://metrostar.github.io/comet-starter/

License: Apache License 2.0

JavaScript 1.25% HTML 0.41% TypeScript 92.12% SCSS 5.41% Dockerfile 0.81%
react typescript uswds eslint jest prettier comet recoil recoiljs comet-components axios cypress victory-charts cypress-axe vite keycloak react-hook-form react-query vitest

comet-starter's Introduction

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:

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
  1. 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
  1. 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

comet-starter's People

Contributors

dependabot[bot] avatar jbouder avatar luisdelavega avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar

comet-starter's Issues

Add API Baseline

Is your feature request related to a problem? Please describe.
In order to provide a more complete starter app, this repo should be updated to include all baseline configurations for use with APIs.

Describe the solution you'd like

  • Add default axios configurations
  • Add useApi hook
  • Update dashboard to utilize api
  • API should allow mocking for development purposes

Describe alternatives you've considered
N/A

Additional context
N/A

Update Comet Starter App with Keycloak integration

Is your feature request related to a problem? Please describe.
In order to provide a more complete starter app, this repo should be updated to include all baseline configurations for use with Keycloak as an auth provider.

Describe the solution you'd like

  • Add keycloak configs and dependencies
  • Update signin/signout to utilize keycloak auth
  • Update signin page to SSO login in addition to existing login
  • Allow mocking keycloak auth for testing purposes

Describe alternatives you've considered
N/A

Additional context
N/A

Upgrade to Vite 5

Is your feature request related to a problem? Please describe.
No

Describe the solution you'd like
Upgrade from v4 to v5 and resolve any breaking changes.
See here for details: https://vitejs.dev/guide/migration.html

Describe alternatives you've considered
N/A

Additional context
N/A

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.