---
# System prepended metadata

title: 'Day 15 Exit Ticket Solutions: Fullstack Data Flow'

---

# Day 15 Exit Ticket Solutions: Fullstack Data Flow

**You should be able to:**
- Describe how data flows between the client and server in a fullstack application
- Organize a reasonable file structure for a fullstack application


## Pick the correct order for the following flows of data:
<small>Assume that the user has requested the default document and the app is loading its initial data.</small>

| Order | Option | Explanation |
| ----- | ------ | ----------- |
| **1** | The browser makes a request to get `index.html` from the server |  |
| **2** | Express sends `index.html` to the browser |  |
| **3** | The browser executes the bundle referred to in a script tag with a defer attribute | The browser reads the `index.html` file line by line. </br> At some point, it read the script tag with the bundle but if it had `defer` on it, it would be executed after the browser finishes reading the `index.html`. |
| **4** | React components are mounted for the first time | The bundle provides the means to mount the React components that we created. |
| **5** | A route returns a list of albums | This would be executed likely in the `componentDidMount` lifecyle. |


## Pick which folder each file or line of code should be under:

|   | `server` | `client` | `public` | Explaination |
| - | -------- | -------- | -------- | ------------ |
| unicodesnowman.png |   |   | ☑️ | Images are static files and they are usually stored in the public directory. |
| `class SingleSong extends React.Component` |   | ☑️ |   | This is a React component, which is client-side development. |
| `import app from './app'` |   | ☑️ |   | This is using the ES6 Module syntax which is normalized for client- side/front-end development. |
| `require('./app')` | ☑️ |   |   | `require` syntax is usually done in Node (backend/server) as ES Module syntax is not defaulted in Node. |
| `Artist.findAll()` | ☑️ |   |   | This is a Sequelize method which is executed likely in our GET / route, which is on the backend/server. |
| `<script defer src="/bundle.js"></script>` |   |   | ☑️ | This is likely inside `index.html`, which is a static file and static files are usually stored in the public directory. |
