##############
Project layout
##############

Summary
=======

In this chapter, we will discuss the layout and directory structure of the Inventory Management tutorial. The tutorial is structured so that you can add code snippets as you read. If you'd like to see the completed tutorial, it is located in the ``completed`` branch of the repository.

Concepts
========

* VS Code directory structure
* Overview of provided files

----------------------------------

These tutorials will use a working development environment to enable you to code along through this exercise. If you have not already reviewed the :doc:`Environment setup </tutorials/environment-setup>` section of these tutorials, please do that first.

Once you have your IDE set up and Node.js installed, open the Inventory Management project directory in your editor.

.. code-block:: none

	<HC_installation_root>
	├── tutorials
	│   ├── inventory_management // HERE
	│   │   ├── data
	│   │   │   ├── database
	│   │   │   ├── thumbnails
	│   │   │   └── xml
	│   │   ├── favicon.ico
	│   │   ├── img
	│   │   ├── index.html
	│   │   ├── package-lock.json
	│   │   ├── package.json
	│   │   ├── src
	│   │   │   ├── css
	│   │   │   ├── hoops
	│   │   │   └── js
	│   │   ├── tsconfig.json
	│   │   └── webpack.config.js

A brief overview of this directory structure:

.. raw:: html

	<ul>
		<li><span class='filename'>data</span> – contains the provided .SCS model data and subdirectories
			<ul>
				<li><span class='filename'>database</span> – user data linking the node IDs to additional data</li>
				<li><span class='filename'>thumbnails</span> – thumbnails for models that will be used</li>
				<li><span class='filename'>xml</span> – xml output directory for converted models</li>
			</ul>
		</li>
		<li><span class='filename'>src</span> – source code for the application
			<ul>
				<li><span class='filename'>css</span> – style sheets for the application</li>
				<li><span class='filename'>hoops</span> – any HC client related libraries and code</li>
				<li><span class='filename'>img</span> – static image assets used by the application</li>
				<li><span class='filename'>js</span> – where we will write and place our application Javascript files
					<ul>
		  				<li><span class="filename">completed_reference_code</span> - a directory containing completed JavaScript implementation of this tutorial for your reference</li>
					</ul>
				</li>
			</ul>
		</li>
		<li><span class='filename'>favicon.ico</span> – TS3D favicon</li>
		<li><span class='filename'>index.html</span> – defines the document hierarchy and entry point of our application</li>
		<li><span class='filename'>package.json</span> – defines our project structure and lists any development dependencies to install</li>
		<li><span class='filename'>webpack.config.js</span> – defines options for how we will be using webpack to serve our application</li>
	</ul>

In order to focus more on the HOOPS Communicator WebViewer API, we have provided the HTML, CSS, and project configuration files for you, so you do not need to write them yourself.
