5 min read

Build Customer Review Section With Nextjs & Material-UI

Build Customer Review Section With Nextjs & Material-UI

You often hear about DRY (Don't Repeat Yourself) while learning to code. Many Master, Pro, Ninja, Barbarian, Magician, Monk, Code Fu Martial Artists, and some senior coder will tell you not to repeat your code in their video or tutorial.

(Forgive me for the long and cold joke above 😏)

You might worry people criticize your code is noobie. You keep finding solution after solution (after solution x N), tutorial after tutorial (You read and watch N articles and videos) to write your code clean, pro, dynamic and programming. Six months later, you can't even launch your first website - You're wasted! ~ Penta kill by the philosophy.

Should you care about your DRY code?

Not at all! Especially you just started to code. You can constantly update your code later. As long as the code work, launch the website that brings you the leads, sales and incomes.

Today, I will code without "DRY." to build a customer review section with Nextjs and Material-UI.

Let's get started~

Tutorial 6: Build a customer review section with Nextjs and Material-UI

Note: If you direct land on this page from searches, you may want to visit:-

touch components/SectionReview.jsx	

Initialize the component with section container

import { Container, Grid, Typography } from "@material-ui/core";
import * as React from "react";

const SectionTestimonial = () => {
  return (
    <Container maxWidth="md" sx={{ my: 15 }}>
      <Typography variant="h2" textAlign="center" sx={{ mb: 10 }}>
        Customer Review
      </Typography>
      <Grid container spacing={2}>
        <Grid
          container
          item
          justifyContent="center"
          xs={12}
          sm={6}
          md={4}
        ></Grid>
      </Grid>
    </Container>
  );
};

export default SectionTestimonial;
  • justifyContent set to the centre is to position the review card on the centre for mobile devices. It does not really affect tablet and desktop devices.

Save the file.

Add review section to homepage:

📝 You might already notice, my naming convention is weird. I revert "review section".

📝 It's a personal preference. You can either keep your file name as "ReviewSection", or you can create a directory of Section then save Review inside. E.g. ./components/Section/Review.jsx

📝 Find the best naming convention that works best for you.

Import the component to the homepage:

import SectionReview from "../components/SectionReview";

Add the component:

Save the file.

Start the development server.

npm run dev

You shall see:

Create review card component

Create the file:

touch components/ReviewCard/Alex.jsx

📝 I use another name and filing system here.

Add the code:

import {
  Avatar,
  Box,
  Card,
  CardContent,
  CardHeader,
  Typography,
} from "@material-ui/core";
import StarIcon from "@material-ui/icons/Star";
import { red } from "@material-ui/core/colors";

import * as React from "react";

const ReviewAlex = () => {
  return (
    <Card sx={{ maxWidth: 345 }}>
      <CardHeader
        avatar={
          <Avatar sx={{ bgcolor: red[500] }} aria-label="Alex profile letter">
            AL
          </Avatar>
        }
        title="Alex"
      />
      <CardContent>
        <Box>
          <StarIcon color="secondary" />
          <StarIcon color="secondary" />
          <StarIcon color="secondary" />
          <StarIcon color="secondary" />
          <StarIcon color="secondary" />
        </Box>
        <Typography variant="body2" color="text.secondary">
          I never taste something like this before. Japanese mix Western
          cuisine. Some good, some weird taste to me. Overall the cooking tastes
          good.
        </Typography>
      </CardContent>
    </Card>
  );
};

export default ReviewAlex;
  • Ya, I hardcoded the Avatar colour, the StarIcon, and I going to create 2 more review components.
  • If your customer allows you to use their profile picture. You can add it to the MUI avatar component.

🔗 Check out the MUI avatar component.

Add Alex review to review section:

Open ./components/SectionReview.jsx

import ReviewAlex from "./ReviewCard/Alex";

Add the component:

Save the file, you shall see:

Add second & third card review

Create the files:

touch components/ReviewCard/Mona.jsx
touch components/ReviewCard/Shanen.jsx

Add Mona review code:

import {
  Avatar,
  Box,
  Card,
  CardHeader,
  CardContent,
  Typography,
} from "@material-ui/core";
import { blueGrey } from "@material-ui/core/colors";
import StarIcon from "@material-ui/icons/Star";

import * as React from "react";

const ReviewMona = () => {
  return (
    <Card sx={{ maxWidth: 345 }}>
      <CardHeader
        avatar={
          <Avatar
            sx={{ bgcolor: blueGrey[500] }}
            aria-label="Mona profile picture"
          >
            MO
          </Avatar>
        }
        title="Mona"
      />
      <CardContent>
        <Box>
          <StarIcon color="secondary" />
          <StarIcon color="secondary" />
          <StarIcon color="secondary" />
          <StarIcon color="secondary" />
          <StarIcon color="secondary" />
        </Box>
        <Typography variant="body2" color="text.secondary">
          Sushi with gravy mushroom sauce, fried chicken with teriyaki sauce,
          watermelon with green tea ice cream. Cool! New fresh taste to me.
        </Typography>
      </CardContent>
    </Card>
  );
};

export default ReviewMona;

Add Shanen review code:

import {
  Avatar,
  Box,
  Card,
  CardHeader,
  CardContent,
  Typography,
} from "@material-ui/core";
import { orange } from "@material-ui/core/colors";
import StarIcon from "@material-ui/icons/Star";

import * as React from "react";

const ReviewShanen = () => {
  return (
    <Card sx={{ maxWidth: 345 }}>
      <CardHeader
        avatar={
          <Avatar
            sx={{ bgcolor: orange[500] }}
            aria-label="shanen profile picture"
          >
            SH
          </Avatar>
        }
        title="Shanen"
      />
      <CardContent>
        <Box>
          <StarIcon color="secondary" />
          <StarIcon color="secondary" />
          <StarIcon color="secondary" />
          <StarIcon color="secondary" />
        </Box>
        <Typography variant="body2" color="text.secondary">
          Wasabi with steak, huh? What a fusion! Taste a bit weird but
          acceptable. I reserve my last star until my next visit.
        </Typography>
      </CardContent>
    </Card>
  );
};

export default ReviewShanen;

Add these files to the review section

Open ./components/SectionReview.jsx

Add the components:

Save the file, you shall see:

You can add as many review cards as you like.

We successfully build the customer review section with Nextjs & Material-UI

Next~ We going to build a navigation card


If you need me to elaborate on the code in the tutorial, feel free to reach me out on twitter. Or if you have any feedback, improvement, suggestion or error.