:orphan:

##################################################
Step 1: Implement the FileServer general structure
##################################################

Let’s dive in on how to develop the component with the following code:

.. literalinclude:: ./app.py
    :lines: 1-41, 132-158
    :emphasize-lines: 16, 51-

********
Tutorial
********

.. raw:: html

    <div class="display-card-container">
        <div class="row">

.. displayitem::
   :header: Step 2: Implement the File Server upload and list files methods
   :description: Add the core functionalities to the Component
   :col_css: col-md-4
   :button_link: file_server_step_2.html
   :height: 180
   :tag: Basic

.. displayitem::
   :header: Step 3: Implement a File Server Testing Component
   :description: Create a Component to test the file server
   :col_css: col-md-4
   :button_link: file_server_step_3.html
   :height: 180
   :tag: Intermediate

.. displayitem::
   :header: Step 4: Implement tests for the File Server component with pytest
   :description: Create an App to validate the upload and list files endpoints
   :col_css: col-md-4
   :button_link: file_server_step_4.html
   :height: 180
   :tag: Intermediate

.. raw:: html

        </div>
    </div>