# Structure ## General Structure Empirica allows you to build powerful apps for multiplayer and singleplayer research. It is made of these important components: * Your **code**. * The backend (managing your games and data) with Meteor * The frontend (what the players see and interact with) with React.js * An **Admin Panel** that allows you manage the conditions, games, and players in your experiment. * A connection to a **database**, such as MongoDB Atlas, to store your data that can be accessed and modified live by your experiment. * The app is deployed to a **hosting service**, such as Meteor Galaxy, so that your experiment is online and you can send a **link** for players to connect to it. ![](/files/-MRZAKH7AtyEoVbf3ANQ) ## File Structure This is what a starting Empirica experiment file structure looks like: ``` my-experiment ├── .meteor ├── README.md ├── node_modules ├── package.json ├── package-lock.json ├── .gitignore ├── public ├── client │ ├── main.html │ ├── main.js │ ├── main.css │ ├── game │ │ └── ... │ ├── intro │ │ └── ... │ └── exit │ └── ... └── server ├── main.js ├── callbacks.js └── bots.js ``` **It contains:** * `.meteor` with the meteor files. You do not need to touch those. * `node_modules` the files for the node modules in your app. You do not need to touch those. This directory should be in the `.gitignore` file. * `public` where you store static assets (e.g., images). * `client` where you set what the players can see in the experiment. * `server` where you manage the flow and resources of the experiment. ### Client All code in the `/client` directory will be ran on the client. The entry point for your app on the client can be found in `/client/main.js`. In there you will find more details about how to customize how a game *Round* should be rendered, what *Consent* message and which *Intro Steps* you want to present the players with, etc. The HTML root of you app in `/client/main.html` shouldn't generally be changed much, other than to update the app's HTML ``, which contains the app's title, and possibly 3rd party JS and CSS imports. All styling starts in `/client/main.less`, and is written in [LESS](http://lesscss.org/), a simple superset of CSS. You can also add a plain CSS files in `/client`. The `/client/game`, `/client/intro`, `/client/exit` directories all contain [React](https://reactjs.org/) components, which compose the UI of your app. If you are new to React, we recommend you try out the official [React Tutorial](https://reactjs.org/tutorial/tutorial.html). ### Server Server-side code all starts in the `/server/main.js` file. In that file, we set an important Empirica integration point, the `Empirica.gameInit`, which allows to configure each game as they are initiated by Empirica. From there we import 2 other files. First the `/server/callback.js` file, which contains all the possible callbacks used in the lifecycle of a game. These callbacks, such as `onRoundEnd`, offer powerful ways to add logic to a game in a central point (the server), which is often preferable to adding all the logic on the client. Finally, the `/server/bots.js` file is where you can add bot definitions to your app. ### Public The `/public` is here to host any static assets you might need in the game, such as images. For example, if you add an image at `/public/my-logo.jpeg`, it will be available in the app at `http://localhost:3000/my-logo.jpeg`. --- # Agent Instructions: Querying This Documentation If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question. Perform an HTTP GET request on the current page URL with the `ask` query parameter: ``` GET https://docsv1.empirica.ly/overview/structure.md?ask= ``` The question should be specific, self-contained, and written in natural language. The response will contain a direct answer to the question and relevant excerpts and sources from the documentation. Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.