⚡ Step 4: Using Material-UI (MUI) and Building the Navigation Bar

In this step, we will introduce Material-UI (MUI), a popular React component library that provides pre-built, fully responsive, and accessible UI components. By using MUI, we don’t have to write all the CSS from scratch, which speeds up development and ensures a consistent design.

Installing Material-UI

To get started with MUI, run the following commands in your project folder:

npm install @mui/material @emotion/react @emotion/styled
npm install @mui/icons-material

• @mui/material: Core Material-UI components.
• @emotion/react and @emotion/styled: Required for styling MUI components.
• @mui/icons-material: Pre-built icons to use in your components.

Once installed, you can import components like Button, AppBar, Toolbar, and icons such as LoginIcon or MenuIcon into your React components.

Creating the Navigation Bar

Now that MUI is installed, let’s create our first frontend component: a Navigation Bar for the Gather2Gether app. This navbar will include the app title/logo and navigation buttons for Login and Register.

Navbar Implementation

import React from "react";
import AppBar from "@mui/material/AppBar";
import Toolbar from "@mui/material/Toolbar";
import Typography from "@mui/material/Typography";
import Button from "@mui/material/Button";
import IconButton from "@mui/material/IconButton";
import MenuIcon from "@mui/icons-material/Menu";
import { Link } from "react-router-dom";
import LoginIcon from "@mui/icons-material/Login";
import HowToRegIcon from "@mui/icons-material/HowToReg";
import Box from "@mui/material/Box";

export default function Navbar() {
  return (
    <AppBar position="fixed">
      <Toolbar sx={{ justifyContent: "space-between" }}>
        {/* Logo / Title */}
        <Typography variant="h6" component="div">
          Gather2Gether
        </Typography>

        {/* Desktop Buttons */}
        <Box sx={{ display: { xs: "none", sm: "block" } }}>
          <Button color="inherit" startIcon={<LoginIcon />} component={Link} to="/">
            Login
          </Button>
          <Button color="inherit" startIcon={<HowToRegIcon />} component={Link} to="/register">
            Register
          </Button>
        </Box>

        {/* Mobile Hamburger */}
        <Box sx={{ display: { xs: "block", sm: "none" } }}>
          <IconButton size="large" edge="start" color="inherit" aria-label="menu">
            <MenuIcon />
          </IconButton>
        </Box>
      </Toolbar>
    </AppBar>
  );
}

Key Features

• Responsive Design: Switches to a hamburger menu on mobile devices.
• Pre-built Components: AppBar, Toolbar, Button, and icons save time and ensure consistent styling.
• React Router Integration: Buttons link to / (Login) and /register pages using Link from React Router.

With this setup, you now have a fully functional, responsive navigation bar using Material-UI. In the next step, we will create the Login and Register pages that the navbar buttons will link to, building the core authentication UI for Gather2Gether.