ibraheemz/product-hunt

Product hunt tutorial app

product-hunt's Issues

Login modal

Problem:

I think its better for the content to be centered

Expected view:

reportWebVitals.js

Product-hunt/src/reportWebVitals.js

Line 1 in afa0d88

const reportWebVitals = (onPerfEntry) => {

What's the purpose of this file?

Files/folders structure

• Move static images to src/assets/images
• Components structure could be grouped by modules/scope or grouped by its function; We could have something like this src/modules/product/ProductList.js, src/modules/product/ProductModal.js or we can have something like this src/components/lists/productList.js , src/components/lists/UsersList.js , src/components/modals/productModal.js.
  I like more the first approach cause its more readable and scalable
• Move app.js and store.js to src/app
• Move reducer.js to src/reducers
• Move Header.js to src/modules/shared/layout/header/index.js
• Move SideDiv.js to src/modules/shared/layout/SideDiv/index.js
• Move LoginModal.js to src/modules/login/LoginModal.js

Upvote buttons aligning

Problem:

Upvote's icon and label alignment is not as expected

Expected view:

Destructing props

Product-hunt/src/Product.js

Line 5 in afa0d88

const Product = (props) => {

You can destruct this props directly like this const Product = ({ ProductVotes, id, ProductImg, ProductName, ProductDescription, CategoryLink, ProductCategory, CommentsNum }) => {

This way make it more descriptive

== operator

Product-hunt/src/Product.js

Line 18 in afa0d88

elementType == 'BUTTON' ||

Its recommended to always use === operator, as it doesn't do type conversion before comparing unlike the == operator which will do a type conversion before comparing.

For example;
5 === '5' // false Why? Cause they're different types
5 == '5' // true Why? Cause it converts both to the same type before comparing. JS will convert '5' (string) to 5 (integer) and then compare the two integers 5 and 5 hence it returns true.

imports statements

Product-hunt/src/LoginModal.js

Line 2 in afa0d88

import 'bootstrap/dist/css/bootstrap.min.css'

no need to this import as we already import this at src/index.js