Merge branch 'capstone_dev'

.github/workflows/npm_build_test.yml

@@ -0,0 +1,39 @@
+# This workflow will do a clean installation of node dependencies, cache/restore them, build the source code and run tests across different versions of node
+# For more information see: https://docs.github.com/en/actions/automating-builds-and-tests/building-and-testing-nodejs
+
+name: Node.js CI
+
+on:
+  push:
+    branches:
+      - capstone_dev
+      - master
+      - github_actions
+  pull_request:
+    branches:
+      - master
+      - capstone_dev
+      - github_actions
+
+jobs:
+  build:
+
+    runs-on: ubuntu-latest
+
+    strategy:
+      matrix:
+        node-version: [16.x, 18.x]
+        # See supported Node.js release schedule at https://nodejs.org/en/about/releases/
+
+    steps:
+    - uses: actions/checkout@v3
+    - name: Use Node.js ${{ matrix.node-version }}
+      uses: actions/setup-node@v3
+      with:
+        node-version: ${{ matrix.node-version }}
+        cache: 'npm'
+    - run: npm ci
+    - run: npm run build --if-present
+    - run: npm test
+    - name: Upload coverage to Codecov
+      uses: codecov/codecov-action@v1

.gitignore

@@ -23,4 +23,5 @@ dist-ssr
 *.sln
 *.sw?
 
-node_modules/
+node_modules/
+/coverage

README.md

@@ -1,30 +1,110 @@
-# React + TypeScript + Vite
+# ChemistryCafe
 
-This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
+ChemistryCafe is a web application built with React, Vite, and TypeScript. The app uses various libraries and frameworks such as MUI, Axios, and styled-components to provide a seamless and modern user experience. This README provides information about the application and how to run the code locally.
 
-Currently, two official plugins are available:
+## Table of Contents
 
-- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react/README.md) uses [Babel](https://babeljs.io/) for Fast Refresh
-- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh
+- [Features](#features)
+- [Folder Structure](#folder-structure)
+- [Dependencies](#dependencies)
+- [Setup](#setup)
+- [Scripts](#scripts)
+- [Testing](#testing)
 
-## Expanding the ESLint configuration
+## Features
 
-If you are developing a production application, we recommend updating the configuration to enable type aware lint rules:
+- **Responsive UI**: Utilizes MUI (Material-UI) for a modern, responsive design.
+- **State Management**: Implements hooks and context for managing state.
+- **API Interaction**: Uses Axios to fetch data from APIs and manage asynchronous requests.
+- **Routing**: React Router DOM for client-side routing and navigation.
+- **Authentication**: Supports OAuth with Google for user authentication.
+- **Testing**: Uses Vitest for unit tests and test coverage.
 
-- Configure the top-level `parserOptions` property like this:
+## Folder Structure
 
-```js
-export default {
-  // other rules...
-  parserOptions: {
-    ecmaVersion: 'latest',
-    sourceType: 'module',
-    project: ['./tsconfig.json', './tsconfig.node.json'],
-    tsconfigRootDir: __dirname,
-  },
-}
+- `coverage/`: Folder for test coverage reports.
+- `dist/`: Folder for build outputs.
+- `node_modules/`: Folder for dependencies.
+- `public/`: Folder for static assets (images, fonts, etc.).
+- `src/`: Source code folder, organized as follows:
+    - `API/`: Functions for API interaction.
+    - `assets/`: Static assets.
+    - `webPages/`: Pages and components:
+        - `Components/`: Reusable components.
+        - `Family/`: Family-related pages/components.
+        - `LogIn/`: Login-related pages/components.
+        - `RoutingRenders/`: Routing-related components.
+        - `Settings/`: Settings-related pages/components.
+    - `index.css`: Global CSS styles.
+    - `main.tsx`: Entry point for the application.
+    - `vite-env.d.ts`: Vite environment TypeScript declarations.
+- `test/`: Folder for test files.
+- `.eslintrc.cjs`: ESLint configuration file.
+- `.gitignore`: Git ignore file.
+- `index.html`: Main entry HTML file located in the root folder.
+- `package-lock.json`: npm package lock file.
+- `package.json`: npm package metadata file.
+- `README.md`: This documentation file.
+- `tsconfig.json`: TypeScript configuration file.
+- `tsconfig.node.json`: Node.js-specific TypeScript configuration.
+- `vite.config.ts`: Vite configuration file.
+- `vitest.config.ts`: Vitest configuration file.
+- `vitest.setup.ts`: Vitest setup file.
+
+## Dependencies
+
+- **@emotion/react & @emotion/styled**: For styling components.
+- **@mui/icons-material & @mui/material**: Material-UI components and icons.
+- **@mui/x-data-grid & @mui/x-tree-view**: Advanced Material-UI components.
+- **@react-oauth/google**: Google OAuth for authentication.
+- **Axios**: HTTP client for API requests.
+- **Bootstrap & React Bootstrap**: For styling and UI components.
+- **React & React DOM**: JavaScript library and DOM support.
+- **React Router DOM**: Client-side routing.
+
+## Setup
+
+1. **Clone the repository**:
+    ```shell
+    git clone https://github.com/NCAR/chemistrycafe.git
+    cd chemistrycafe
+    ```
+
+2. **Install dependencies**:
+    ```shell
+    npm install
+    ```
+
+3. **Start the development server**:
+    ```shell
+    npm run dev
+    ```
+
+4. The app will run on [http://localhost:5173](http://localhost:5173). You can view it in your browser.
+
+## Scripts
+
+- `npm run dev`: Starts the development server with Vite.
+- `npm run build`: Builds the project for production.
+- `npm run preview`: Previews the built application.
+- `npm run lint`: Lints the codebase using ESLint.
+- `npm run test`: Runs unit tests using Vitest.
+- `npm run test:coverage`: Runs tests and provides a coverage report.
+
+## Testing
+
+This project uses Vitest for running unit tests and generating coverage reports.
+
+To run the tests, use the following command:
+
+```shell
+npm run test
 ```
 
-- 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](https://github.com/jsx-eslint/eslint-plugin-react) and add `plugin:react/recommended` & `plugin:react/jsx-runtime` to the `extends` list
+To generate a coverage report, use the following command:
+
+```shell
+npm run test:coverage
+```
+
+

index.html

@@ -2,9 +2,9 @@
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
-    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <link rel="icon" type="image/png" href="/ncar-generaluse.png" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Vite + React + TS</title>
+    <title>Chemistry Cafe</title>
   </head>
   <body>
     <div id="root"></div>