Skip to content

Latest commit

 

History

History
499 lines (417 loc) · 16.1 KB

README.md

File metadata and controls

499 lines (417 loc) · 16.1 KB
Raw

Project: UrbanScape

Authors

  • [Aeshna Verma] - (B00880776)
  • [Janhavi Sonawane] - (B00881787)
  • [Manjinder Singh] - (B00866348)
  • [Prit Ajaykumar Sorathiya] - (B00890175)
  • [Priti Sri Pandey] - (B00877337)
  • [Rikin Pineshkumar Patel] - (B00864960)

Team Work

Feature (User Authentication)

Author - Janhavi Sonawane

- src/components/UserAuthentication/ForgetPassword.js
- src/components/UserAuthentication/Otp.js
- src/components/UserAuthentication/SignUpProfessional.js
- src/components/UserAuthentication/SignUpUser.js
- src/components/UserAuthentication/UpdatePassword.js
- src/components/UserAuthentication/UserLogin.js

Feature (User Landing Page)

Author - Priti Sri Pandey

- src/pages/customer/HomePage/ServiceCarousel.js
- src/pages/customer/HomePage/ServiceTile.js
- src/pages/customer/HomePage/UserHomePage.js

- src/components/NewsLetter.js
- src/components/Footer.js

- src/action/newsletterSubscriptionAction.js
- src/reducers/newslettersubscriptionReducer.js
- src/action/serviceCategoryAction.js
- src/reducers/serviceCategoriesReducer.js

Feature (Service catalog page for booking a service)

Author - Priti Sri Pandey


- src/pages/customer/ServicePage/ServiceCard.js
- src/pages/customer/ServicePage/BeautyService.js
- src/pages/customer/ServicePage/CarpenterService.js
- src/pages/customer/ServicePage/PlumbingService.js

- src/action/serviceCategoryAction.js
- src/reducers/serviceCategoriesReducer.js

Feature (Cart Management)

Author - Aeshna Verma

- src/pages/customer/CartPage/CartPage.js
- src/pages/customer/profile/NotLoggedIn.js

- src/action/CartAction.js
- src/reducers/cartReducer.js

Feature (Profile Management)

Author - Prit Ajaykumar Sorathiya

- src/pages/professional/HandleService/ServiceProfile.js
- src/pages/professional/profile/ProfessionalProfilePage.js
- src/pages/professional/profile/CustomerProfilePage.js

Feature (Support Page)

Author -Rikin Pineshkumar Patel

- src/pages/customer/support/Contact.js

Feature (Professional - Dashboard)

Author -Rikin Pineshkumar Patel

- src/pages/professional/dashboard/Dashboard.js
- src/pages/professional/dashboard/DashboardPrimary.js

Feature (Professional - Service Management)

Author - Prit Ajaykumar Sorathiya

- src/pages/professional/HandleService/ServiceProfile.js
- src/pages/professional/HandleService/ServiceCard.js
- src/pages/professional/HandleService/AddService.js

- src/pages/professional/serviceListing/ServiceHistory.js
- src/pages/professional/serviceListing/ServiceRequests.js

- src/action/ServiceAction.js
- src/reducers/serviceReducer.js
- src/store/store.js

Getting Started

Prerequisites

To have a local copy of this project up and running on your local machine, you will first need to install the following software / libraries / plug-ins

  • npm
npm install npm@latest -g
  • deploy the project
install Heroku CLI

Installing

A step by step process to run the project in the development env then delploy to heroku.

  1. install NPM packages
npm install
  1. authenticate heroku account
heroku login
  1. Create a new app on heroku and add heroku remote to the project
heroku git:remote -a "project_name"
  1. push the code on heroku
git push heroku master

Deployment

  • Heroku - The cloud platform used for deployment.

Built With

  • React - The web front-end framework used.
  • React Redux - The library used for the state management.

Sources Used

NavBar.js

Lines 179-200

<Menu
    sx={{ mt: '45px' }}
          id='menu-appbar'
          anchorEl={profileSettingOption}
          anchorOrigin={{
            vertical: 'top',
            horizontal: 'right',
          }}
          keepMounted
          transformOrigin={{
            vertical: 'top',
            horizontal: 'right',
          }}
          open={Boolean(profileSettingOption)}
          onClose={handleCloseUserMenu}
        >
          {MENU.profileSettings.map((setting) => (
            <MenuItem key={setting} onClick={handleCloseUserMenu}>
              <Typography textAlign='center'>{setting}</Typography>
            </MenuItem>
          ))}
        </Menu>

The code above was created by adapting the code in React Menu component - MUI as shown below:

<MenuList
                    autoFocusItem={open}
                    id="composition-menu"
                    aria-labelledby="composition-button"
                    onKeyDown={handleListKeyDown}
                  >
                    <MenuItem onClick={handleClose}>Profile</MenuItem>
                    <MenuItem onClick={handleClose}>My account</MenuItem>
                    <MenuItem onClick={handleClose}>Logout</MenuItem>
                  </MenuList>

NavBar.js

Lines 223-249

<AppBar position='static'>
      <Container maxWidth='100%'>
        <Toolbar disableGutters>
          <Box
            noWrap
            component='div'
            sx={{ mr: 2, display: { xs: 'none', md: 'flex' } }}
          >
            {renderAppIconView()}
          </Box>

          {renderPagesListingView()}
          {renderResponsiveMenu()}

          <Box
            noWrap
            component='div'
            sx={{ flexGrow: 1, display: { xs: 'flex', md: 'none' } }}
          >
            {renderAppIconView()}
          </Box>

          {renderServiceView()}
          {renderProfileView()}
        </Toolbar>
      </Container>
    </AppBar>

The code above was created by adapting the code in App Bar React component - MUI as shown below:

<Box sx={{ flexGrow: 1 }}>
      <AppBar position="static">
        <Toolbar>
          <IconButton
            size="large"
            edge="start"
            color="inherit"
            aria-label="menu"
            sx={{ mr: 2 }}
          >
            <MenuIcon />
          </IconButton>
          <Typography variant="h6" component="div" sx={{ flexGrow: 1 }}>
            News
          </Typography>
          <Button color="inherit">Login</Button>
        </Toolbar>
      </AppBar>
    </Box>

ServiceCarousel.js

Lines 23-40

<Grid container spacing={2}>
            <Grid item xs={8}>
                <img src={service.img} height="100%" width="300px" />
            </Grid>
            <Grid item xs={4}>
                <div className='content'>
                <div className='title'>{service.serviceName}</div>
                <p className='description'>{service.desc}</p>
                <Button sx={{color: "black"}} onClick={() => navigate('./beautyservices')}
                size='small'
                variant="outlined"
                >
                Book Now
                </Button>
                </div>
            </Grid>
</Grid>

The code above was created by adapting the code in React Responsive Carousel as shown below:

<Carousel>
                <div>
                    <img src="assets/1.jpeg" />
                    <p className="legend">Legend 1</p>
                </div>
                <div>
                    <img src="assets/2.jpeg" />
                    <p className="legend">Legend 2</p>
                </div>
                <div>
                    <img src="assets/3.jpeg" />
                    <p className="legend">Legend 3</p>
                </div>
 </Carousel>

ServiceTile.js

Lines 44-80

<Card className={classes.root}>
     <div
        style={{
          flex: 1,
          heigth: '140px',
          position: 'relative',
          maxWidth: "inherit",
    minWidth: "inherit"
        }}
      >
      <CardMedia style={{ height: "700px", width: "100%", paddingTop: "2%" }} component="img" image={props.service.categoryImg} title={props.service.serviceCategory}/> 
      <div style={{
          position: 'absolute',
          top: 0,
          left: 0,
          color: 'white',
          margin: '80px',
          height: '100%',
          display: 'flex',
          justifyContent: 'center',
          alignItems: 'center',
          flexDirection: 'column',
        }}>
          <Typography variant='h4'>{props.service.serviceCategory}</Typography>
          <Typography variant='h6'>{props.service.categoryDesc}</Typography>

         <Button
          size='small'
          variant="contained"
          color='primary'
          onClick={navigateToServicePage}
        >
          Book Now
        </Button>
         </div>
  </div>
</Card>

The code above was created by adapting the code in Card component - MUI as shown below:

 <Card sx={{ minWidth: 275 }}>
      <CardContent>
        <Typography sx={{ fontSize: 14 }} color="text.secondary" gutterBottom>
          Word of the Day
        </Typography>
        <Typography variant="h5" component="div">
          be{bull}nev{bull}o{bull}lent
        </Typography>
        <Typography sx={{ mb: 1.5 }} color="text.secondary">
          adjective
        </Typography>
        <Typography variant="body2">
          well meaning and kindly.
          <br />
          {'"a benevolent smile"'}
        </Typography>
      </CardContent>
      <CardActions>
        <Button size="small">Learn More</Button>
      </CardActions>
    </Card>

ServiceCard.js

Lines 143-165

<Card className={classes.root}>
        <CardHeader
          title={props.services.serviceName}
          subheader={props.services.subheader}
          sx={{ textAlign: 'start' }}
        />
        <CardMedia className={classes.media} image={props.services.img} />
        <CardContent>
        <Typography align='left' variant='overline' color='textSecondary' gutterBottom component='p'>
          <b>Base price: ${props.services.price}*</b>
          </Typography>
          <Typography variant='body2' color='textSecondary' component='p'>
            {props.services.title}
          </Typography>
          
        </CardContent>
        <CardActions className={classes.cardAction} disableSpacing>
          {/* <IconButton aria-label='add to cart'>
            <ShoppingCartIcon />
          </IconButton> */}
          <Button size="small" variant='text' onClick={handleClickOpenDialog} sx={{ textDecoration: 'underline' }}>
            Book Service
          </Button>
</Card>

The code above was created by adapting the code in Card component - MUI as shown below:

 <Card sx={{ maxWidth: 345 }}>
      <CardHeader
        avatar={
          <Avatar sx={{ bgcolor: red[500] }} aria-label="recipe">
            R
          </Avatar>
        }
        action={
          <IconButton aria-label="settings">
            <MoreVertIcon />
          </IconButton>
        }
        title="Shrimp and Chorizo Paella"
        subheader="September 14, 2016"
      />
      <CardMedia
        component="img"
        height="194"
        image="/static/images/cards/paella.jpg"
        alt="Paella dish"
      />
      <CardContent>
        <Typography variant="body2" color="text.secondary">
          This impressive paella is a perfect party dish and a fun meal to cook
          together with your guests. Add 1 cup of frozen peas along with the mussels,
          if you like.
        </Typography>
      </CardContent>
      <CardActions disableSpacing>
        <IconButton aria-label="add to favorites">
          <FavoriteIcon />
        </IconButton>
        <IconButton aria-label="share">
          <ShareIcon />
        </IconButton>
        <ExpandMore
          expand={expanded}
          onClick={handleExpandClick}
          aria-expanded={expanded}
          aria-label="show more"
        >
          <ExpandMoreIcon />
        </ExpandMore>
      </CardActions>
      <Collapse in={expanded} timeout="auto" unmountOnExit>
        <CardContent>
          <Typography paragraph>Method:</Typography>
          <Typography paragraph>
            Heat 1/2 cup of the broth in a pot until simmering, add saffron and set
            aside for 10 minutes.
          </Typography>
          <Typography>
            Set aside off of the heat to let rest for 10 minutes, and then serve.
          </Typography>
        </CardContent>
      </Collapse>
    </Card>

Images Used

All images used are taken from www.unsplash.com (https://unsplash.com/) which are licensed to be downloaded and used as per -  (https://unsplash.com/license)