FAQ`s (Frequently Asked Questions)

How to completely remove firebase?

To completely remove firebase from the app just follow the steps given below:-‌

1. Open the src folder and delete the firebase directory from it.

2. Go to the src folder and open App.js file and delete the import './firebase'; statement.

3. Go to the src->actions folder and delete the AuthActions.js file and also remove import file statement of this file from the index.js file.

4. Remove Sign in and Signup methods from the Sign in and Signup pages. To remove them Go to src->container and remove following code from all login and signup pages.

After removing the actions you also need to remove the signin and signup buttons from the Signin and Signup pages.‌

5. Uninstall the firebase dependency. To uninstall the firebase run the command in your project directory.‌

`npm uninstall --save firebase`

That’s It, The above steps will completely remove the firebase from your project.

Where can I find the fonts and icons?

We have used material design iconic font icons in the template. To get these font icons to refer to its official documentation.

For fonts, we have used the Roboto font in the template. We have integrated this font by google fonts. To get this font refer to it’s official documentation.

How to build an app from scratch?

You can easily build your app from scratch just follow these steps :‌

  1. Copy the seed project from downloaded files.
  2. Open the terminal and go to the seed directory and then run npm install.
  3. After installing npm then run npm start.
  4. Open your browser and access http://localhost:3000

By default, the seed project contains a dashboard page that means you can easily build your dashboard.‌

If you want to integrate Todo List in your dashboard then you need to follow these steps:-

1. Open src/routes/dashboard/dashboard1/index.js

2. Copy TodoList widget from hulk/src/components/Widgets/TaskList.js downloaded file and paste it into under the your-project-directory-name/src/components/Widgets/ directory.

  import React, { Component } from 'react';
 import { withStyles } from '@material-ui/styles';
 import { Paper, Box, Container, Typography } from '@material-ui/core';
 import IntlMessages from 'util/IntlMessages';
 import { withTheme } from '@material-ui/core/styles';
 import TaskList from 'components/Widgets/TaskList'
 const styles = theme => ({
     Paper: {
         padding: '0.75rem',
         backgroundColor: 'transparent',
         boxShadow: 'none',
         '&:first-child': {
             paddingTop: '24px',
         },
         '&:last-child': {
             paddingBottom: '30px',
         }
     }
 }); 
 class Dashboard1 extends Component {
     state = {
         ratings: [
             { value: 885, name: 'Positive (93.4%)', itemStyle: { color: this.props.theme.palette.primary.main } },
             { value: 215, name: 'Negative (6.6%)', itemStyle: { color: this.props.theme.palette.warning.main } }
         ]
     }
 UNSAFE_componentWillReceiveProps(newProps){
         let newRatings = this.state.ratings;
         for(let i = 0; i< newRatings.length; i++){
             if(i === 0){
                 newRatings[i].itemStyle.color = newProps.theme.palette.primary.main;
             } else {
                 newRatings[i].itemStyle.color = newProps.theme.palette.warning.main;                
             }
         }
         this.setState({ratings : newRatings})
     } 
       render(){
       const { classes } = this.props;
       return(
         <div className="webanalytics-dashboard">
            <Container maxWidth="lg">
               <Box px={2} pt={4} pb={3}>
                  <Typography variant="h3"> 
                     <IntlMessages id="widgets.welcome" /> 
                  </Typography>
                  <Typography variant="body2" color="textSecondary">
                     Explore your own powerful admin panel and keep track of all activity of <span className="hl-text"><IntlMessages id="widgets.quickStats" /> </span> 
                   </Typography>
                   <Paper className={classes.Paper} square>
                      <TaskList />
                   </Paper>
               </Box>
            </Container>
         </div>
       );
    }        
  )
}
export default withStyles(styles)(withTheme(Dashboard1));  
 
Last Updated 4 years ago
Generic selectors
Exact matches only
Search in title
Search in content
Search in posts
Search in pages