added new files for structural purpose

twistter-frontend/redux/store.js

@@ -0,0 +1,18 @@
+import { createStore, combineReducers, applyMiddleware, compose } from 'redux';
+import thunk from 'redux-thunk';
+
+import userReducer from './reducers/userReducer';
+import dataReducer from './reducers/dataReducer';
+import uiReducer from './reducers/uiReducer';
+
+const initialState = {};
+
+const middleware = {thunk};
+
+const reducers = combineReducers({
+    user: userReducer,
+    data: dataReducer,
+    UI: uiReducer
+});
+
+//const store = createStore(reducers, )

twistter-frontend/src/components/ChipsArray.js

@@ -0,0 +1,52 @@
+import React from 'react';
+import { makeStyles } from '@material-ui/core/styles';
+import Chip from '@material-ui/core/Chip';
+import Paper from '@material-ui/core/Paper';
+
+const useStyles = makeStyles(theme => ({
+  root: {
+    display: 'flex',
+    justifyContent: 'center',
+    flexWrap: 'wrap',
+    padding: theme.spacing(0.5),
+  },
+  chip: {
+    margin: theme.spacing(0.5),
+  },
+}));
+
+export default function ChipsArray() {
+  const classes = useStyles();
+  const [chipData, setChipData] = React.useState([
+    { key: 0, label: 'Angular' },
+    { key: 1, label: 'jQuery' },
+    { key: 2, label: 'Polymer' },
+    { key: 3, label: 'React' },
+    { key: 4, label: 'Vue.js' },
+  ]);
+
+  const handleDelete = chipToDelete => () => {
+    if (chipToDelete.label === 'React') {
+      alert('Why would you want to delete React?! :)');
+      return;
+    }
+
+    setChipData(chips => chips.filter(chip => chip.key !== chipToDelete.key));
+  };
+
+  return (
+    <Paper className={classes.root}>
+      {chipData.map(data => {
+
+        return (
+          <Chip
+            key={data.key}
+            label={data.label}
+            onDelete={handleDelete(data)}
+            className={classes.chip}
+          />
+        );
+      })}
+    </Paper>
+  );
+}

twistter-frontend/src/components/NavBar.js

@@ -0,0 +1,19 @@
+import React, { Component } from 'react';
+
+import AppBar from '@material-ui/core/AppBar';
+import ToolBar from '@material-ui/core/Toolbar';
+import Button from '@material-ui/core/Button';
+
+export class Navbar extends Component {
+    render() {
+        return (
+            <AppBar>
+                <ToolBar>
+                    <Button>Home</Button>
+                </ToolBar>
+            </AppBar>
+        )
+    }
+}
+
+export default Navbar;

twistter-frontend/src/pages/user.js

@@ -0,0 +1,21 @@
+import React, { Component } from 'react';
+import ReactDOM from 'react-dom';
+import NavBar from '../components/NavBar';
+import ChipsArray from '../components/ChipsArray';
+
+class user extends Component {
+  render() {
+    return (
+      <div className="container">
+        <NavBar>
+        
+        </NavBar>
+      </div>
+    )
+  }
+}
+
+//ReactDOM.render(<user />, node);
+ReactDOM.render(<ChipsArray />, document.querySelector('#root'));
+
+export default user

twistter-frontend/src/util/PostSkeleton.js

@@ -0,0 +1,73 @@
+import React, { Fragment } from 'react';
+import NoImg from '../images/no-img.png';
+import PropTypes from 'prop-types';
+// MUI
+import Card from '@material-ui/core/Card';
+import CardMedia from '@material-ui/core/CardMedia';
+import CardContent from '@material-ui/core/CardContent';
+
+import withStyles from '@material-ui/core/styles/withStyles';
+
+const styles = (theme) => ({
+  ...theme,
+  card: {
+    display: 'flex',
+    marginBottom: 20
+  },
+  cardContent: {
+    width: '100%',
+    flexDirection: 'column',
+    padding: 25
+  },
+  cover: {
+    minWidth: 200,
+    objectFit: 'cover'
+  },
+  handle: {
+    width: 60,
+    height: 18,
+    backgroundColor: theme.palette.primary.main,
+    marginBottom: 7
+  },
+  date: {
+    height: 14,
+    width: 100,
+    backgroundColor: 'rgba(0,0,0, 0.3)',
+    marginBottom: 10
+  },
+  fullLine: {
+    height: 15,
+    width: '90%',
+    backgroundColor: 'rgba(0,0,0, 0.6)',
+    marginBottom: 10
+  },
+  halfLine: {
+    height: 15,
+    width: '50%',
+    backgroundColor: 'rgba(0,0,0, 0.6)',
+    marginBottom: 10
+  }
+});
+
+const PostSkeleton = (props) => {
+  const { classes } = props;
+
+  const content = Array.from({ length: 5 }).map((item, index) => (
+    <Card className={classes.card} key={index}>
+      <CardMedia className={classes.cover} image={NoImg} />
+      <CardContent className={classes.cardContent}>
+        <div className={classes.handle} />
+        <div className={classes.date} />
+        <div className={classes.fullLine} />
+        <div className={classes.fullLine} />
+        <div className={classes.halfLine} />
+      </CardContent>
+    </Card>
+  ));
+
+  return <Fragment>{content}</Fragment>;
+};
+
+PostSkeleton.propTypes = {
+  classes: PropTypes.object.isRequired
+};

twistter-frontend/src/util/ProfileSkeleton.js

@@ -0,0 +1,64 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import withStyles from '@material-ui/core/styles/withStyles';
+import NoImg from '../images/no-img.png';
+// MUI
+import Paper from '@material-ui/core/Paper';
+// Icons
+import LocationOn from '@material-ui/icons/LocationOn';
+import LinkIcon from '@material-ui/icons/Link';
+import CalendarToday from '@material-ui/icons/CalendarToday';
+
+const styles = (theme) => ({
+  ...theme,
+  handle: {
+    height: 20,
+    backgroundColor: theme.palette.primary.main,
+    width: 60,
+    margin: '0 auto 7px auto'
+  },
+  fullLine: {
+    height: 15,
+    backgroundColor: 'rgba(0,0,0,0.6)',
+    width: '100%',
+    marginBottom: 10
+  },
+  halfLine: {
+    height: 15,
+    backgroundColor: 'rgba(0,0,0,0.6)',
+    width: '50%',
+    marginBottom: 10
+  }
+});
+
+const ProfileSkeleton = (props) => {
+  const { classes } = props;
+  return (
+    <Paper className={classes.paper}>
+      <div className={classes.profile}>
+        <div className="image-wrapper">
+          <img src={NoImg} alt="profile" className="profile-image" />
+        </div>
+        <hr />
+        <div className="profile-details">
+          <div className={classes.handle} />
+          <hr />
+          <div className={classes.fullLine} />
+          <div className={classes.fullLine} />
+          <hr />
+          <LocationOn color="primary" /> <span>Location</span>
+          <hr />
+          <LinkIcon color="primary" /> https://website.com
+          <hr />
+          <CalendarToday color="primary" /> Joined date
+        </div>
+      </div>
+    </Paper>
+  );
+};
+
+ProfileSkeleton.propTypes = {
+  classes: PropTypes.object.isRequired
+};
+
+export default withStyles(styles)(ProfileSkeleton);