Scripts and Tooling
Relevant source files
The following files were used as context for generating this wiki page:
The project utilizes a monorepo-like structure with separate frontend and backend directories, each containing its own package.json file. A root-level package.json orchestrates the entire development environment. Tooling is managed through npm scripts, which handle tasks like dependency installation, running development servers, building for production, and testing.
The core of the development workflow is the use of concurrently to run the frontend and backend servers simultaneously, providing a streamlined full-stack development experience. The backend relies on nodemon for automatic server restarts on file changes, while the frontend uses react-scripts for its development server and build processes.
Sources: package.json, backend/package.json, frontend/package.json
Project-Wide Scripts
The root package.json file defines scripts for managing the entire project, coordinating tasks between the frontend and backend. The primary tool used here is concurrently, which allows multiple commands to be run in parallel.
Sources: package.json:6-17
Development Workflow
The npm run dev command is the main entry point for starting the development environment. It uses concurrently to execute the npm run server and npm run client scripts simultaneously. This starts the backend API server and the frontend React development server.
The following diagram illustrates the execution flow of the npm run dev command:
This diagram shows how the main dev script orchestrates the startup of both the backend and frontend development servers.
Sources: package.json:7-9
Root Script Commands
The table below summarizes the scripts available in the root package.json file.
| Script | Description |
|---|---|
dev | Runs both the backend and frontend development servers concurrently. |
server | Navigates to the backend directory and runs its dev script. |
client | Navigates to the frontend directory and runs its start script. |
build | Navigates to the frontend directory and builds the production application. |
install-server | Navigates to the backend directory and installs its dependencies. |
install-client | Navigates to the frontend directory and installs its dependencies. |
install-all | Installs root, backend, and frontend dependencies sequentially. |
test | Runs tests for the backend. |
test:client | Runs tests for the frontend. |
Sources: package.json:7-17, README.md:102-106, README.md:110-113
Backend Tooling
The backend is an Express.js application. Its scripts and dependencies are defined in backend/package.json.
Sources: backend/package.json
Backend Scripts
The backend has two primary scripts for running the server.
| Script | Description |
|---|---|
start | Runs the server in production mode using node src/server.js. |
dev | Runs the server in development mode using nodemon src/server.js for automatic restarts on file changes. |
Sources: backend/package.json:7-8, README.md:102-104
Key Dependencies
The backend relies on several key npm packages for its functionality.
| Package | Role |
|---|---|
express | Web framework for Node.js, used to build the API. |
mongoose | Object Data Modeling (ODM) library for MongoDB and Node.js. |
dotenv | Loads environment variables from a .env file. |
cors | Enables Cross-Origin Resource Sharing for requests from the frontend. |
bcryptjs | Library to hash passwords. |
jsonwebtoken | Used for creating and verifying JSON Web Tokens (JWT) for authentication. |
nodemon | A development tool that automatically restarts the node application when file changes are detected. |
Sources: backend/package.json:17-27, backend/src/server.js:5-9
Frontend Tooling
The frontend is a React application created with create-react-app. Its scripts and dependencies are managed in frontend/package.json.
Sources: frontend/package.json
Frontend Scripts
The frontend scripts are based on react-scripts and also include a command for processing Tailwind CSS.
| Script | Description |
|---|---|
start | Starts the development server using react-scripts. |
build | Builds the app for production to the build folder. |
test | Launches the test runner in interactive watch mode. |
build-css | Processes the Tailwind CSS input file and rebuilds the output CSS file. |
Sources: frontend/package.json:15-18, README.md:110-112
Key Dependencies
The frontend uses several libraries to build the user interface and interact with the backend.
| Package | Role |
|---|---|
react | A JavaScript library for building user interfaces. |
react-dom | Serves as the entry point to the DOM and server renderers for React. |
react-router-dom | Provides routing capabilities for the React application. |
axios | A promise-based HTTP client for making requests to the backend API. |
react-scripts | Contains scripts and configurations used by Create React App. |
recharts | A charting library built with React and D3. |
tailwindcss | A utility-first CSS framework used for styling. |
Sources: frontend/package.json:5-13, frontend/src/pages/AirQualityIndexPage.jsx:5-12