1. create a new blank project
  2. $ npm create vite@latest
  3. Give it a project Name
  4. Select the platform
  5. $ cd project name
  6. $ npm install
  7. $ npm i mdb-react-ui-kit
  8. $ npm i @fortawesome/fontawesome-free
  9. $ code .
  10. $ code src/App.tsx
  11. Add imports to App.js:
    import 'mdb-react-ui-kit/dist/css/mdb.min.css';
    import "@fortawesome/fontawesome-free/css/all.min.css";
  12. $ code index.html
  13. Add to index.html
    <link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap" rel="stylesheet" />
  14. $ code src/index.css
  15. Change src/index.css to:
    body {
      font-family: Roboto, Helvetica, Arial, sans-serif;
    }
  16. start application:
    $ npm run dev
  17. Add authentication: https://www.webune.com/forums/add-authentication-to-react-vite-using-laravel-backend.html
  18. Download Components from Github:
    https://github.com/mdbootstrap/mdb-react-ui-kit
    or visit their site for more information:
    https://mdbootstrap.com/docs/react/getting-started/installation/
  19. Create a new Component in src/components/Card.tsx with this BASH command
  20. $ mkdir -p src/components/mdb/; touch src/components/mdb/Card.tsx; code src/components/mdb/Card.tsx
  21. Copy and paste the following code into Card.tsx
  22. import {MDBBtn,MDBCard,MDBCardBody,MDBCardText,MDBCardTitle,} from "mdb-react-ui-kit";

    function Card() {
      return (
        <MDBCard>
          <MDBCardBody>
            <MDBCardTitle>Card title</MDBCardTitle>
            <MDBCardText>
              Some quick example text to build on the card title and make up the
              bulk of the card's content.
            </MDBCardText>
            <MDBBtn>Button</MDBBtn>
          </MDBCardBody>
        </MDBCard>
      );
    }
    export default Card;
  23. $ code src/App.tsx
  24. Change App.tsx to the following:
    import 'mdb-react-ui-kit/dist/css/mdb.min.css';
    import "@fortawesome/fontawesome-free/css/all.min.css";
    import Card from './components/mdb/Card';

    function App() {
      return (
        <Card />
      )
    }

    export default App
  25. http://localhost:5173/
Different Example Of Assigning Typescript Types Arrays Objects Variables Etc.
New MDB Laravel Inertia/Breeze to Vite React Application Project