bmc1995 / vreact

React + TS + Vite starter template

React + TypeScript + Vite

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 for Fast Refresh
• @vitejs/plugin-react-swc uses SWC for Fast Refresh

Expanding the ESLint configuration

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

• Configure the top-level parserOptions property like this:

   parserOptions: {
    ecmaVersion: 'latest',
    sourceType: 'module',
    project: ['./tsconfig.json', './tsconfig.node.json'],
    tsconfigRootDir: __dirname,
   },

• Replace plugin:@typescript-eslint/recommended to plugin:@typescript-eslint/recommended-type-checked or plugin:@typescript-eslint/strict-type-checked
• Optionally add plugin:@typescript-eslint/stylistic-type-checked
• Install eslint-plugin-react and add plugin:react/recommended & plugin:react/jsx-runtime to the extends list

vreact's Issues

Forgot Password

As a user who has forgotten my password, I want to reset my password so that I can regain access to my account.

• Acceptance Criteria:

• #36

• Receive password reset link via email.

• Ability to input a new password.

- Ability to input name, email, and password.

The Signup form needs inputs for the name, email, and password

User Settings Panel

• Create a user settings panel for the user dashboard

- Password strength validation.

Signup

As a new user, I want to be able to sign up so that I can create a personal account.

• Acceptance Criteria:

• #14

• #16

• #17

• #18

Router

Acceptance Criteria

• Implement a client-side router
• persists state/context while navigating

Toasts are styled according to the application's theme and are accessible.

2FA

As a user, I want to enable two-factor authentication (2FA) so that I can have an extra layer of security for my account.

• Acceptance Criteria:
  • Ability to set up 2FA through account settings.
  • Ability to input 2FA code during login.

Oauth

As a user, I want to have the option to log in using third-party services (e.g., Google, Facebook) to simplify the login process.

• Acceptance Criteria:
  • Display buttons for third-party authentication services.
  • Ability to log in via selected third-party service.

User Profile

Automated Testing

Ability to continue with Auth providers

Toasts/Alerts

As a user, I want to receive transient notifications through a toast service so that I am informed of application events without being disrupted.

Acceptance Criteria:

• #25
  • Toasts are displayed in a consistent location on the screen
  • Toasts auto-dismiss after a configurable duration.
• #28
• #29

(Auth) Email format validation.

The Signup and Login forms should validate the email input

Continuous Integration

As a developer, I want a continuous integration (CI) setup to run tests automatically so that I can ensure code quality.

• Acceptance Criteria:
  • CI pipeline configured to run on pull requests and pushes to main branches.
  • Running unit and integration tests.
  • Displaying test results and coverage reports.

- Confirmation email sent upon successful registration.

Login

As a registered user, I want to log in so that I can access my account.

• Acceptance Criteria:

• #21

• #19

  • #20

• #35

Unit tests

User uploads panel

• Create the user uploads panel for managing file uploads
• image uploader
• file uploader
• uploads table/list with edit and delete actions

Change email

As a user, I want to change my email address so that I can keep my account information up-to-date.

• Acceptance Criteria:
  • Ability to input new email address and password.
  • Email format validation for new email.
  • Confirmation email sent to new email address.

Change Password

As a user, I want to change my password so that I can keep my account secure.

• Acceptance Criteria:
  • Ability to input current and new passwords.
  • Password strength validation for new password.
  • Confirmation message upon successful password change.

Role Based Access (RBAC)

As an admin, I want to manage user roles so that I can control access to certain resources.

• Acceptance Criteria:
  • Ability to assign and change user roles.
  • Ability to view all users and their roles.

Ability to input email and password.

Can login using email/password
or
Create account
or
#20

Toast notifications appear for success, error, and informational messages.

• Toasts are displayed in a consistent location on the screen
• Toasts auto-dismiss after a configurable duration.

Logout

As a logged-in user, I want to log out so that I can ensure my account is secure.

• Acceptance Criteria:
  • Ability to log out from any page.
  • Session destroyed upon logout.
  • Redirected to the login page after logout.

Session created upon successful login.

Continuous Deployment

As a developer, I want a continuous deployment (CD) setup to automate the deployment process so that I can ensure a reliable deployment workflow.

• Acceptance Criteria:
  • CD pipeline configured to deploy the application to the staging/production environment.
  • Automated rollback in case of deployment failure.

(Auth) Error message displayed for incorrect credentials.

Ability to request password reset from the login page.

Ability to manually dismiss toasts.

Create Redux Store

It will manage user and toast state for now

Pre-commit checks

As a developer, I want a pre-commit hook to run linting and formatting so that I can ensure code consistency before commits.

• Acceptance Criteria:
  • Pre-commit hook configured to run ESLint and Prettier.
  • Errors and warnings displayed with instructions on how to fix them.