This is my first post here so I hope you will be patient if I'm doing something wrong. I made a small website with create-react-app and I would like to request feedback about. This website was a test and I had a limited amount of time to complete it, hence there are no tests nor license, which for the test purposes weren't necessary.

The main things I would like to have feedback on are:

1) Are my components organized properly?

2) Is the pattern I'm using to develop components appropriate?

Although I'm posting here some code, I would like to ask if you could take a quick look at my github repository and let me know what you think about it: https://github.com/sickdyd/foriio

For the components organization I used the following structure:

To avoid having multiple nested folders, I decided to put all of the sub components that belong to a specific component on the same level. The naming should give away the function, and the folder name has the same name as the main component.

One quick question: the component src/components/body/UserProfile/UserWorks.js is reused in src/components/body/UserWork/UserWork.js; is it ok to leave them with this structure?

The components generally have the following code structure (this is one of the simplest components):

import React from 'react';

import PropTypes from 'prop-types';

import Typography from '@material-ui/core/Typography';
import Skeleton from '@material-ui/lab/Skeleton';

import { makeStyles } from '@material-ui/styles';

const useStyles = makeStyles(theme => ({
  bio: {
    display: "flex",
    justifyContent: "center",
    marginTop: theme.spacing(2),
    color: theme.palette.text.primary,
  },
}));

export default function UserBio(props){

  const classes = useStyles();

  const {
    loading,
    profile,
  } = props;

  return (

    loading ?

      <div className={ classes.bio }>

        <Skeleton variant="rect" style={{ marginBottom: 12, width: 315 }} />
        <Skeleton variant="rect" style={{ marginBottom: 12, width: 315 }} />
        <Skeleton variant="rect" style={{ marginBottom: 12, width: 315 }} />

      </div>

    :

      <div className={ classes.bio }>

        <Typography>
          { profile.bio }
        </Typography>

      </div>
  )
}

UserBio.propTypes = {
  loading: PropTypes.bool.isRequired,
  profile: PropTypes.object,
}

Thank you!

This is my first post here so I hope you will be patient if I'm doing something wrong. I made a small website with create-react-app and I would like to request feedback about. This website was a test and I had a limited amount of time to complete it, hence there are no tests nor license, which for the test purposes weren't necessary.

The main things I would like to have feedback on are:

1) Are my components organized properly?

2) Is the pattern I'm using to develop components appropriate?

Although I'm posting here some code, I would like to ask if you could take a quick look at my github repository and let me know what you think about it: https://github.com/sickdyd/foriio

For the components organization I used the following structure:

To avoid having multiple nested folders, I decided to put all of the sub components that belong to a specific component on the same level. The naming should give away the function, and the folder name has the same name as the main component.

One quick question: the component src/components/body/UserProfile/UserWorks.js is reused in src/components/body/UserWork/UserWork.js; is it ok to leave them with this structure?

The components generally have the following code structure (this is one of the simplest components):

import React from 'react';

import PropTypes from 'prop-types';

import Typography from '@material-ui/core/Typography';
import Skeleton from '@material-ui/lab/Skeleton';

import { makeStyles } from '@material-ui/styles';

const useStyles = makeStyles(theme => ({
  bio: {
    display: "flex",
    justifyContent: "center",
    marginTop: theme.spacing(2),
    color: theme.palette.text.primary,
  },
}));

export default function UserBio(props){

  const classes = useStyles();

  const {
    loading,
    profile,
  } = props;

  return (

    loading ?

      <div className={ classes.bio }>

        <Skeleton variant="rect" style={{ marginBottom: 12, width: 315 }} />
        <Skeleton variant="rect" style={{ marginBottom: 12, width: 315 }} />
        <Skeleton variant="rect" style={{ marginBottom: 12, width: 315 }} />

      </div>

    :

      <div className={ classes.bio }>

        <Typography>
          { profile.bio }
        </Typography>

      </div>
  )
}

UserBio.propTypes = {
  loading: PropTypes.bool.isRequired,
  profile: PropTypes.object,
}