Getting started

This template is built with create-react-app and requires Node and NPM or YARN to be installed.

1. Installing the prerequisites

Node.js and NPM: You can download Node.js from https://nodejs.org. NPM comes bundled with Node.js

For yarn, you can checkout these installation instructions.

2. Installing the packages

Before proceding you'll need to install packages. You can do this by running npm install / yarn install from the root of your project to install all the necessary dependencies.

3. .env variables

In order to use Google maps, openweather and alphavantage you'll need to add the API keys inside the .env file in the root of your project. A sample.env file is already provided, use this to add your api keys.

To get a google map api key follow this link https://developers.google.com/maps/documentation/javascript/get-api-key

To get an open weather api key follow this link https://openweathermap.org/appid

To get an alphavantage api key follow this link https://www.alphavantage.co/support/#api-key

4. Running your project

Run `npm start or yarn start` to launch a dev server. Navigate to `http://localhost:3000/`. The app will automatically reload if you change any of the source files.

To create a production ready build for deployment you can run `npm run build or yarn build`

Folder Structure

.
├── README.md
├── documentation
│   ├── assets
│   │   ├── material.css
│   │   ├── material.js
│   │   ├── material.min.css
│   │   ├── material.min.css.map
│   │   └── material.min.js
│   ├── images
│   │   ├── android-desktop.png
│   │   ├── favicon.png
│   │   └── ios-desktop.png
│   ├── index.html
│   └── styles.css
├── package.json
├── public
│   ├── favicon.ico
│   ├── index.html
│   ├── manifest.json
│   └── static
│       ├── fonts
│       │   └── pe
│       │       ├── css
│       │       │   ├── helper.css
│       │       │   ├── helper.min.css
│       │       │   ├── pe-icon-set-weather.css
│       │       │   └── pe-icon-set-weather.min.css
│       │       └── fonts
│       │           ├── pe-icon-set-weather.eot
│       │           ├── pe-icon-set-weather.svg
│       │           ├── pe-icon-set-weather.ttf
│       │           └── pe-icon-set-weather.woff
│       ├── images
│       │   ├── avatar.jpg
│       │   ├── face1.jpg
│       │   ├── face2.jpg
│       │   ├── face3.jpg
│       │   ├── face4.jpg
│       │   ├── face5.jpg
│       │   ├── face6.jpg
│       │   ├── face7.jpg
│       │   ├── logo-dark.svg
│       │   ├── logo.svg
│       │   └── unsplash
│       │       ├── 1.jpg
│       │       ├── 10.jpg
│       │       ├── 11.jpg
│       │       ├── 12.jpg
│       │       ├── 13.jpg
│       │       ├── 14.jpg
│       │       ├── 15.jpg
│       │       ├── 16.jpg
│       │       ├── 17.jpg
│       │       ├── 18.jpg
│       │       ├── 19.jpg
│       │       ├── 2.jpg
│       │       ├── 20.jpg
│       │       ├── 21.jpg
│       │       ├── 22.jpg
│       │       ├── 3.jpg
│       │       ├── 4.jpg
│       │       ├── 5.jpg
│       │       ├── 6.jpg
│       │       ├── 7.jpg
│       │       ├── 8.jpg
│       │       ├── 9.jpg
│       │       └── fashion3.jpg
│       └── styles
│           └── app.css
└── src
    ├── components
    │   ├── ActivityStream
    │   │   └── ActivityStream.js
    │   ├── AppProvider
    │   │   ├── AppContext.js
    │   │   └── AppProvider.js
    │   ├── Cards
    │   │   ├── CartCard.js
    │   │   ├── ImageStatCard.js
    │   │   ├── MapCard.js
    │   │   ├── NewsCard.js
    │   │   ├── PostCard.js
    │   │   ├── ProfileCard.js
    │   │   ├── StatCard.js
    │   │   └── WeatherCard.js
    │   ├── Demo
    │   │   └── Example.js
    │   ├── Header
    │   │   └── Header.js
    │   ├── Message
    │   │   ├── Item.js
    │   │   └── Message.js
    │   ├── NotificationCenter
    │   │   └── NotificationCenter.js
    │   ├── Pricing
    │   │   └── Pricing.js
    │   ├── Sidebar
    │   │   ├── Sidebar.js
    │   │   └── SidebarItem.js
    │   ├── Timeline
    │   │   └── Timeline.js
    │   ├── Workspace
    │   │   └── Workspace.js
    │   ├── Wrapper
    │   │   └── Wrapper.js
    │   └── index.js
    ├── containers
    │   └── Dashboard.js
    ├── helpers.js
    ├── index.js
    ├── pages
    │   ├── Apps
    │   │   ├── Calendar.js
    │   │   ├── Chat.js
    │   │   ├── Media.js
    │   │   ├── Messages.js
    │   │   ├── Social.js
    │   │   └── calendar.css
    │   ├── Authentication
    │   │   ├── Lockscreen.js
    │   │   ├── PasswordReset.js
    │   │   ├── Signin.js
    │   │   └── Signup.js
    │   ├── Charts
    │   │   └── Charts.js
    │   ├── Documentation
    │   ├── Ecommerce
    │   │   ├── Detail.js
    │   │   └── Products.js
    │   ├── Errors
    │   │   ├── BackendError.js
    │   │   └── NotFound.js
    │   ├── Forms
    │   │   ├── Editor.js
    │   │   └── editor.css
    │   ├── Home
    │   │   └── Home.js
    │   ├── Maps
    │   │   ├── Google.js
    │   │   └── Leaflet.js
    │   ├── Material
    │   │   ├── app-bar.js
    │   │   ├── autocomplete.js
    │   │   ├── avatars.js
    │   │   ├── badges.js
    │   │   ├── bottom-navigation.js
    │   │   ├── buttons.js
    │   │   ├── cards.js
    │   │   ├── chips.js
    │   │   ├── dialogs.js
    │   │   ├── dividers.js
    │   │   ├── drawers.js
    │   │   ├── expansion-panels.js
    │   │   ├── grid-list.js
    │   │   ├── lists.js
    │   │   ├── menus.js
    │   │   ├── paper.js
    │   │   ├── pickers.js
    │   │   ├── progress.js
    │   │   ├── selection-controls.js
    │   │   ├── selects.js
    │   │   ├── snackbars.js
    │   │   ├── steppers.js
    │   │   ├── tables.js
    │   │   ├── tabs.js
    │   │   ├── text-fields.js
    │   │   └── tooltips.js
    │   ├── Pages
    │   │   ├── Blank.js
    │   │   ├── Invoice.js
    │   │   ├── Pricing.js
    │   │   └── Timeline.js
    │   ├── Taskboard
    │   │   └── Taskboard.js
    │   ├── Widgets
    │   │   └── Widgets.js
    │   └── index.js
    ├── registerServiceWorker.js
    ├── routes.js
    ├── styles
    │   ├── Chat.js
    │   ├── Dashboard.js
    │   ├── Ecommerce.js
    │   ├── EcommerceDetail.js
    │   ├── Header.js
    │   ├── MessageItem.js
    │   ├── Messages.js
    │   ├── NotificationCenter.js
    │   ├── Pricing.js
    │   ├── Session.js
    │   ├── Sidebar.js
    │   ├── SidebarItem.js
    │   ├── Social.js
    │   ├── StatCard.js
    │   ├── Stream.js
    │   ├── Taskboard.js
    │   ├── Timeline.js
    │   ├── Widget.js
    │   ├── Workspace.js
    │   ├── Wrapper.js
    │   └── variables.js
    └── utils
        ├── demos
        │   ├── app-bar
        │   │   ├── ButtonAppBar.js
        │   │   ├── MenuAppBar.js
        │   │   ├── SimpleAppBar.js
        │   │   └── app-bar.md
        │   ├── autocomplete
        │   │   ├── IntegrationAutosuggest.js
        │   │   ├── IntegrationDownshift.js
        │   │   ├── IntegrationReactSelect.js
        │   │   └── autocomplete.md
        │   ├── avatars
        │   │   ├── IconAvatars.js
        │   │   ├── ImageAvatars.js
        │   │   ├── LetterAvatars.js
        │   │   └── avatars.md
        │   ├── badges
        │   │   ├── SimpleBadge.js
        │   │   └── badges.md
        │   ├── bottom-navigation
        │   │   ├── LabelBottomNavigation.js
        │   │   ├── SimpleBottomNavigation.js
        │   │   └── bottom-navigation.md
        │   ├── buttons
        │   │   ├── ButtonBases.js
        │   │   ├── ButtonSizes.js
        │   │   ├── ContainedButtons.js
        │   │   ├── CustomizedButtons.js
        │   │   ├── FloatingActionButtonZoom.js
        │   │   ├── FloatingActionButtons.js
        │   │   ├── IconButtons.js
        │   │   ├── IconLabelButtons.js
        │   │   ├── OutlinedButtons.js
        │   │   ├── TextButtons.js
        │   │   └── buttons.md
        │   ├── cards
        │   │   ├── MediaControlCard.js
        │   │   ├── RecipeReviewCard.js
        │   │   ├── SimpleCard.js
        │   │   ├── SimpleMediaCard.js
        │   │   └── cards.md
        │   ├── chips
        │   │   ├── Chips.js
        │   │   ├── ChipsArray.js
        │   │   └── chips.md
        │   ├── dialogs
        │   │   ├── AlertDialog.js
        │   │   ├── AlertDialogSlide.js
        │   │   ├── ConfirmationDialog.js
        │   │   ├── FormDialog.js
        │   │   ├── FullScreenDialog.js
        │   │   ├── ResponsiveDialog.js
        │   │   ├── SimpleDialog.js
        │   │   └── dialogs.md
        │   ├── dividers
        │   │   ├── InsetDividers.js
        │   │   ├── ListDividers.js
        │   │   └── dividers.md
        │   ├── drawers
        │   │   ├── ClippedDrawer.js
        │   │   ├── MiniDrawer.js
        │   │   ├── PermanentDrawer.js
        │   │   ├── PersistentDrawer.js
        │   │   ├── ResponsiveDrawer.js
        │   │   ├── SwipeableTemporaryDrawer.js
        │   │   ├── TemporaryDrawer.js
        │   │   ├── drawers.md
        │   │   └── tileData.js
        │   ├── expansion-panels
        │   │   ├── ControlledExpansionPanels.js
        │   │   ├── DetailedExpansionPanel.js
        │   │   ├── SimpleExpansionPanel.js
        │   │   └── expansion-panels.md
        │   ├── grid-list
        │   │   ├── AdvancedGridList.js
        │   │   ├── ImageGridList.js
        │   │   ├── SingleLineGridList.js
        │   │   ├── TitlebarGridList.js
        │   │   ├── grid-list.md
        │   │   └── tileData.js
        │   ├── lists
        │   │   ├── CheckboxList.js
        │   │   ├── CheckboxListSecondary.js
        │   │   ├── FolderList.js
        │   │   ├── InsetList.js
        │   │   ├── InteractiveList.js
        │   │   ├── NestedList.js
        │   │   ├── PinnedSubheaderList.js
        │   │   ├── SimpleList.js
        │   │   ├── SwitchListSecondary.js
        │   │   └── lists.md
        │   ├── menus
        │   │   ├── FadeMenu.js
        │   │   ├── ListItemComposition.js
        │   │   ├── LongMenu.js
        │   │   ├── MenuListComposition.js
        │   │   ├── SimpleListMenu.js
        │   │   ├── SimpleMenu.js
        │   │   └── menus.md
        │   ├── paper
        │   │   ├── PaperSheet.js
        │   │   └── paper.md
        │   ├── pickers
        │   │   ├── DateAndTimePickers.js
        │   │   ├── DatePickers.js
        │   │   ├── TimePickers.js
        │   │   └── pickers.md
        │   ├── progress
        │   │   ├── CircularDeterminate.js
        │   │   ├── CircularIndeterminate.js
        │   │   ├── CircularIntegration.js
        │   │   ├── CircularStatic.js
        │   │   ├── DelayingAppearance.js
        │   │   ├── LinearBuffer.js
        │   │   ├── LinearDeterminate.js
        │   │   ├── LinearIndeterminate.js
        │   │   ├── LinearQuery.js
        │   │   └── progress.md
        │   ├── selection-controls
        │   │   ├── CheckboxLabels.js
        │   │   ├── Checkboxes.js
        │   │   ├── CheckboxesGroup.js
        │   │   ├── CustomizedSwitches.js
        │   │   ├── RadioButtons.js
        │   │   ├── RadioButtonsGroup.js
        │   │   ├── SwitchLabels.js
        │   │   ├── Switches.js
        │   │   ├── SwitchesGroup.js
        │   │   └── selection-controls.md
        │   ├── selects
        │   │   ├── ControlledOpenSelect.js
        │   │   ├── DialogSelect.js
        │   │   ├── MultipleSelect.js
        │   │   ├── NativeSelects.js
        │   │   ├── SimpleSelect.js
        │   │   └── selects.md
        │   ├── snackbars
        │   │   ├── ConsecutiveSnackbars.js
        │   │   ├── CustomizedSnackbars.js
        │   │   ├── DirectionSnackbar.js
        │   │   ├── FabIntegrationSnackbar.js
        │   │   ├── FadeSnackbar.js
        │   │   ├── LongTextSnackbar.js
        │   │   ├── PositionedSnackbar.js
        │   │   ├── SimpleSnackbar.js
        │   │   └── snackbars.md
        │   ├── steppers
        │   │   ├── DotsMobileStepper.js
        │   │   ├── HorizontalLinearAlternativeLabelStepper.js
        │   │   ├── HorizontalLinearStepper.js
        │   │   ├── HorizontalNonLinearAlternativeLabelStepper.js
        │   │   ├── HorizontalNonLinearStepper.js
        │   │   ├── HorizontalNonLinearStepperWithError.js
        │   │   ├── ProgressMobileStepper.js
        │   │   ├── SwipeableTextMobileStepper.js
        │   │   ├── TextMobileStepper.js
        │   │   ├── VerticalLinearStepper.js
        │   │   └── steppers.md
        │   ├── tables
        │   │   ├── CustomPaginationActionsTable.js
        │   │   ├── CustomizedTable.js
        │   │   ├── EnhancedTable.js
        │   │   ├── SimpleTable.js
        │   │   └── tables.md
        │   ├── tabs
        │   │   ├── CenteredTabs.js
        │   │   ├── CustomizedTabs.js
        │   │   ├── DisabledTabs.js
        │   │   ├── FullWidthTabs.js
        │   │   ├── IconLabelTabs.js
        │   │   ├── IconTabs.js
        │   │   ├── ScrollableTabsButtonAuto.js
        │   │   ├── ScrollableTabsButtonForce.js
        │   │   ├── ScrollableTabsButtonPrevent.js
        │   │   ├── SimpleTabs.js
        │   │   ├── TabsWrappedLabel.js
        │   │   └── tabs.md
        │   ├── text-fields
        │   │   ├── ComposedTextField.js
        │   │   ├── CustomizedInputs.js
        │   │   ├── FormattedInputs.js
        │   │   ├── InputAdornments.js
        │   │   ├── InputWithIcon.js
        │   │   ├── Inputs.js
        │   │   ├── TextFieldMargins.js
        │   │   ├── TextFields.js
        │   │   └── text-fields.md
        │   └── tooltips
        │       ├── ControlledTooltips.js
        │       ├── PositionedTooltips.js
        │       ├── SimpleTooltips.js
        │       └── tooltips.md
        └── mock
            ├── activity.js
            ├── calendar.js
            ├── chart.js
            ├── chats.js
            ├── contacts.js
            ├── dashboard.js
            ├── feed.js
            ├── index.js
            ├── invoice.js
            ├── messages.js
            ├── notifications.js
            ├── pricing.js
            ├── product.js
            ├── reviews.js
            ├── taskboard.js
            └── timeline.js
              

Dashboard routes

Dashboard routes are dynamically defined in /src/routes.js.

For link routes use this format

[{
  path: '/widgets',
  name: 'Widgets',
  type: 'link',
  icon: PhotoIcon,
  component: Widgets
  badge: {
    type: 'error',
    value: '10'
  }
}]
              

Where:

path - path to your route name - the text appearing in the sidebar type - nav link type. Can either be a link, submenu or external icon - icon element displayed in the sidebar badge - (optional) used to display the badge element. This is an object which takes in value and type with type being either primary, secondary or error component - the react component to render

For sub menus use this format

[{
  path: '/material',
  name: 'Material',
  type: 'submenu',
  icon: EqualizerIcon,
  badge: {
    type: 'error',
    value: '10'
  },
  children: [{
      path: '/appbar',
      name: 'App Bar',
      component: AppBar
    }
  }]
}]
              

Where:

path - path to your route name - the text appearing in the sidebar type - nav link type. Can either be a link, submenu or external icon - icon element displayed in the sidebar badge - (optional) used to display the badge element. This is an object which takes in value and type with type being either primary, secondary or error Children - an array of submenu objects. The object takes in path, name and component component - the react component to render

For external routes use this format

[{
  path: 'http://reactprimer.nyasha.me/docs',
  name: 'Documentation',
  type: 'external',
  icon: LocalLibraryIcon,
  badge: {
    type: 'error',
    value: '10'
  }
}]
              

Where:

path - link to open name - the text appearing in the sidebar type - nav link type. Can either be a link, submenu or external icon - icon element displayed in the sidebar badge - (optional) used to display the badge element. This is an object which takes in value and type with type being either primary, secondary or error

3rd party components

Material UI date-fns React Leaflet React Big Calendar React Chartjs 2 React Google Maps React Quill