> For the complete documentation index, see [llms.txt](https://2600hz.gitbook.io/sds/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://2600hz.gitbook.io/sds/sds-components/commland-app-templates/base-implementations.md).

# Base Implementations

For this example, it was created a new project by using CRA to simplify the understanding of the general structure of the template.

### SDS Installation

To make sure sds packages are correctly added to you project, developers can use `install-peerdeps`  dependency to add sds-react-component package and all its peer dependencies. For more information you can check the following [link](/sds/sds-components/installation.md).

Beside that, adding sds-themes package is optional so developers can have access to the theme tokens at the same time they can give automtic support for the dark-theme.

### React Router Dom

This template has been done to be compatible with react-router-dom dependency, facilitating the navigation workflow through different views. Something important to keep in mind, is that this template is compatible with the newer and older versions of react-router-dom, so developers can use the version of their preference.

### General Structure of the Project

```
App.tsx
    |__ BrowserRouter
        |__ div/section (Most external container of the app)
            |__LinksCollection (Optional wrapper)
            |    |__AppNavbar
            |        |__AppNavbarGroup
            |        |    |__NavLink (React Router Component)
            |        |    |    |__AppNavbarItem
            |        |    |__(...)
            |        |    |__AppNavbarStaticItem
            |        |__AppNavbarCustomArea
            |
            |
            |__RoutesCollection (Optional wrapper)
                |
                |__Routes/Switch (Depends on react-router-dom version)
                    |__Route
                    |  |__Page/View
                    |       |__Wizard
                    |       |__AppPage
                    |           |__AppPageNav
                    |                |__AppPageNavItem
                    |                |__AppPageNavNestedItem
                    |           |__AppPageActions
                    |           |__AppPageContent
                    |
                    |__Route... (Repeat structure)   
```

### Components List

#### React-Router-Dom components

* BrowserRouter
* Switch/Routes (Name depends on the version)
* Route
* NavLink

#### SDS Components

* AppNavbar
* AppNavbarGroup
* AppNavbarCustomArea
* AppNavbarItem
* AppNavbarStaticItem
* AppPage
* AppPageNav
* AppPageNavItem
* AppPageNavNestedItem
* AppPageActions
* AppPageContent