React admin template MUI

Table of Contents

• Installing
  • Requirements
  • Run locally
• Developing
  • Tech stack
    • Language
    • Core Frameworks
    • State Manager
    • UI Libraries
    • Chart Libraries
  • Content guide
    • Project Structure
    • Component folder structure
    • Store folder structure
    • Component Structure
• Deploying
  • Tag vX.Y.Z
  • Deploy to Dev Environment
  • Deploy to Prod Environment

Installing

Requirements:

• Node.js 16 or higher
• Yarn package manager

Run locally

1. Install dependencies

yarn install

2. Start dev server

yarn start

3. Open http://localhost:3000 in a browser

Developing

Tech stack

Language

• TypeScript

Core Frameworks

• React

UI Libraries

• MUI

Content guide

Project structure

• Atomic design

app/
  public/
    favicon.ico
  src/
    assets/
      images/
    components/
      atoms/
      molecules/
      organisms/
      templates/
    core/
      constants/
      types/
      hooks/
      hocs/
      helpers/
    pages/
    styles/
    utils/

Component folder structure

organisms/
  Modal/
    hooks/
      useModal.ts
      useModal.utils.ts
    Modal.tsx
    Modal.test.tsx
    Modal.styles.ts
    Modal.types.ts
    Modal.utils.ts

Component structure

import React from 'react';
import Auth from 'aws-cognito';
... // internal libraries

import { ... } from '@constants';
import { useValidation } from '@hooks';
... // global helpers

import { ... } from '@atoms';
import { ... } from '@molecules';
import { ... } from '@mui/material';
... // components

import { ... } from './Form.styles';
import { ... } from './Form.utils';
import { FormDataType } from './Form.types';
import { useForm } from './hooks/useForm';
... // component helpers

interface Props extends HTMLAttributes<HTMLFormElement> {
  ...
};

export const Form: React.FC<Props> = ({ onSubmit, ...attributes }) => {
  const [formData, onChange, handleOnSubmit] = useForm(onSubmit);

  if (!formData) {
    return null;
  }

  return (
    <form { ...attributes } onChange={onChange}>
      ...
    <form>
  );
};