React Website Development with MUI

Guide for working with React-based websites built using Create React App, Material-UI (MUI), React Router, and custom Babel configuration. This skill helps you understand the architecture, make changes safely, and follow project conventions.

Project Architecture Pattern

This skill applies to React projects with the following structure:

**Framework**: Create React App with `react-app-rewired` for custom configuration

**UI Library**: Material-UI (MUI) v5+ with custom theming

**Routing**: React Router DOM for client-side navigation

**Build Customization**: Babel configuration via `.babelrc` and `config-overrides.js`

**Organization**: Pages-based architecture with reusable components

Development Workflow

1. Understanding the Codebase

Before making changes, familiarize yourself with:

**Entry point** (`src/index.js`): Check theme provider setup and global styles

**Router configuration** (`src/Router.js`): Understand navigation structure and route definitions

**Theme file** (`src/assets/theme.js`): Review color palette, typography, and breakpoints

**Component structure** (`src/components/` and `src/pages/`): Identify reusable components vs page-specific code

2. Making Changes Safely

When modifying code:

1. **Read existing files first**: Always use the Read tool to examine current implementation before proposing changes

2. **Check dependencies**: Review `package.json` to understand available libraries

3. **Test locally**: Run `npm start` and verify changes at `http://localhost:3000`

4. **Follow existing patterns**: Match the coding style, component structure, and naming conventions already in use

5. **Respect custom config**: Don't modify `.babelrc` or `config-overrides.js` unless explicitly requested

3. Common Tasks

#### Adding a New Page

1. Create page component in `src/pages/NewPage/index.js`

2. Add route in `src/Router.js` using `<Route path="/new-page" element={<NewPage />} />`

3. Import necessary MUI components: `import { Container, Typography, Box } from '@mui/material';`

4. Use theme breakpoints for responsive design: `theme.breakpoints.down('sm')`

#### Adding a New Project/Content Item

1. Create component in appropriate subfolder (e.g., `src/pages/Projects/ProjectList/NewProject.js`)

2. Add assets to corresponding folder (e.g., `src/assets/photos/projects/new-project/`)

3. Import and include in parent component's list/grid

4. Ensure modal or detail view follows existing CardModal pattern if applicable

#### Styling Components

1. Use MUI's `sx` prop for inline styles: `<Box sx={{ padding: 2, margin: 'auto' }}>`

2. Reference theme values: `sx={{ color: 'primary.main', backgroundColor: 'background.paper' }}`

3. Use MUI breakpoints: `sx={{ fontSize: { xs: '14px', md: '16px' } }}`

4. For complex styles, consider creating a styled component with `@mui/material/styles`

#### Adding Icons

1. Import from FontAwesome: `import { faIconName } from '@fortawesome/free-solid-svg-icons';`

2. Use FontAwesomeIcon component: `<FontAwesomeIcon icon={faIconName} />`

3. Style with `sx` prop or `style` attribute

#### Working with Images

1. Place images in appropriate `src/assets/photos/` subfolder

2. Import in component: `import imageName from '../../assets/photos/path/to/image.jpg';`

3. Use in `<img>` tag or MUI `<CardMedia>` component

4. For carousels, use the installed `react-responsive-carousel` package

4. Build and Deployment

**Development**: `npm start` (auto-reloads on changes)

**Production build**: `npm run build` (creates optimized bundle in `build/` directory)

**Testing**: `npm test` (runs test suite if tests exist)

**Eject warning**: Never run `npm run eject` unless absolutely necessary and explicitly requested (irreversible)

Key Constraints

**Do not modify build configuration** without explicit user request (`config-overrides.js`, `.babelrc`, Babel plugins)

**Do not add error handling** or validation for scenarios that can't happen with internal components

**Do not refactor** working code unless specifically asked

**Do not add comments or docstrings** to unchanged code

**Follow existing patterns**: If the project uses functional components with hooks, continue that pattern

**Respect MUI conventions**: Use MUI components and theming system rather than custom CSS where possible

Security Considerations

**Sanitize user input** if adding forms or user-generated content

**Validate external data** from APIs or file uploads

**Use environment variables** (`.env` files) for sensitive configuration, never hardcode

**Check for XSS vulnerabilities** when rendering dynamic content or HTML

Troubleshooting

**Build errors after adding dependencies**: Run `npm install` to ensure dependencies are installed

**Styling not applying**: Check MUI theme is imported and ThemeProvider wraps app

**Routing not working**: Verify `<Router>` wraps routes in `src/Router.js` and `react-router-dom` is installed

**Babel errors**: Check `.babelrc` syntax and ensure `react-app-rewired` is configured in `package.json`

**Assets not loading**: Verify import path is correct and file exists in `src/assets/`

Best Practices

1. **Component organization**: Keep page components in `src/pages/`, reusable components in `src/components/`

2. **Asset management**: Organize images by feature/project in `src/assets/photos/`

3. **Responsive design**: Always test at different breakpoints (mobile, tablet, desktop)

4. **Theme consistency**: Use theme values from `src/assets/theme.js` rather than hardcoding colors/spacing

5. **Code simplicity**: Avoid over-engineering; keep solutions minimal and focused on the requested task

6. **Git commits**: Only commit when explicitly asked; stage specific files rather than using `git add .`

Example: Adding a New Section to Home Page

```javascript

// 1. Read the existing Home page component

// Use Read tool: src/pages/Home/index.js

// 2. Add new section using MUI components

import { Container, Typography, Grid, Card, CardContent } from '@mui/material';

// 3. Insert new section following existing pattern

New Section Title

</Typography>

<Card>

Description text

</Typography>

</CardContent>

</Card>

</Grid>

</Container>

// 4. Test locally with npm start

// 5. Commit only if user requests it

```

React Website Development with MUI

React Website Development with MUI

Project Architecture Pattern

Development Workflow

1. Understanding the Codebase

2. Making Changes Safely

3. Common Tasks

4. Build and Deployment

Key Constraints

Security Considerations

Troubleshooting

Best Practices

Example: Adding a New Section to Home Page

Reviews (0)