filipenatanael / reactnd-project-readable

Users can post content to predefined categories, comment on their posts and other users' posts, and vote on posts their. Users are be able to edit and delete posts and comments as well.

Readable Project - Udacity Nanodegree

Project Overview

For the Readable project, you will build a content and comment web app. Users will be able to post content to predefined categories, comment on their posts and other users' posts, and vote on posts and comments. Users will also be able to edit and delete posts and comments.

Stack

• React & Redux
• Redux Thunk
• Material UI
• Jest & Enzime - Unit Testing
• Storybook - Interactive UI component

Running & StoryBook

If you do not know the Storybook, is a development environment for UI components. It allows you to browse a component library, view the different states of each component, and interactively develop and test components.

  git clone [email protected]:filipenatanael/reactnd-project-readable.git
  cd reactnd-project-readable
  npm install
  npm start

  /* Running API (The frontEnd are listeneing at ::5001 PORT)*/
  cd reactnd-project-readable/api-server
  npm install
  node server


  /* Check out storybook */
  npm run storybook
  npm run cov
  npm run test

Architecture

This application was built looking for the best abstraction possible of the functionalities, in order to facilitate the understanding and future maintenance.

Author

@filipenatanael

reactnd-project-readable's Issues

Failed prop type: The prop theme is marked as required in App

Fix bug busting on console:

index.js:1452 Warning: Failed prop type: The prop `theme` is marked as required in `App`, but its value is `undefined`.
    in App (created by WithStyles(App))
    in WithStyles(App) (at src/index.js:23)
    in Provider (at src/index.js:22)

The default value of the non-post selector

The default value of the non-post selector is not setting a default value and it is too small to view.

@component/PostsList

<Grid container spacing={8} alignItems="flex-end">
     <Grid item>
        <CheckCircle />
         </Grid>
         <Grid item>
            <Select
               value={'0'}
                onChange={() => false}
                 className={classes.textfield}
              >
                <MenuItem value="0">
                  <em>React</em>
                  </MenuItem>
                  <MenuItem value={1}>Redux</MenuItem>
                   <MenuItem value={2}>Udacity</MenuItem>
             </Select>
        </Grid>