> For the complete documentation index, see [llms.txt](https://docs.ionicfirebaseapp.com/webngstarter/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.ionicfirebaseapp.com/webngstarter/project-structure.md).

# Project Structure

### Downloaded Zip File Structure

![Web ng Starter File Structure](/files/-LChx-aekMmF8MwsJ4Hi)

* **Documentation:** It will explain how to setup this project, configure and customize the application.
* **License:** Terms and conditions for use, reproduction and distribution of this software piece.
* **angular:** Angular UI version available in this directory. It develop with latest angular 5.X version with angular-cli. It has more than 100 components and page UI. All the product data render through JSON file. It's quite easy to integrate any Rest API and easy to customize to build any type web applications.
* **React :** *React + Redux version coming very soon*.

### Angular Code Structure <a href="#angular-code-structure" id="angular-code-structure"></a>

**Inside app folder we have all the project File.**

This project created with angular-cli and follow modular approach . You can changes it as own needs.

**src > app :** It's a main folder where you start own development work .<br>

![](/files/-LChxHWkX98lztk4D2yM)

<br>

* **Layout:** It have some common module that will use throughout the app like header and footer components.
* **Pages:** It contains all the page modules like Home, Shop, Account, UI Components etc. You can Go inside any of these modules and you can see it has several components that we import in our module.ts. All these submodule then imported in our main module app.module.ts. You can remove or delete or add any components inside any module.
* **typeScript:** Some of MDB component we have added inside this directory like calendar, timepicker etc. You don't need to do anything inside this directory.
* **Components CSS:** If you want to customize any components css directly add own css inside **components.scss** file. You can see each component directory has HTML, SCSS and TS file. You can add all the custom css inside scss file.

**src > asserts > Theme:** It has all the scss file required in template.

![](/files/-LChxNt5lFEkdLH5PD5f)

\
**main.scss:** You can see in main.scss we have import each scss file. base, components, helpers, layout, modules, ng-bootstrap. If you want to changes any of these scss file you can do as well. If you add any more modules you can create scss file in this directory and include into your main.scss. It always best practice to write inside components so in future if we release next version it will easy for you to update project.


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## 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://docs.ionicfirebaseapp.com/webngstarter/project-structure.md?ask=<question>
```

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.
