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.
- 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.
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.
- @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.
-
Clone the repository:
git clone https://github.com/NCAR/chemistrycafe.git cd chemistrycafe
-
Install dependencies:
npm install
-
Start the development server:
npm run dev
-
The app will run on http://localhost:5173. You can view it in your browser.
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.
This project uses Vitest for running unit tests and generating coverage reports.
To run the tests, use the following command:
npm run test
To generate a coverage report, use the following command:
npm run test:coverage