# justNow Web App 🚀

Runs the app in the development mode.<br />
Open [http://localhost:3000](http://localhost:3000) to view it in the browser.



## **Maps**
Maps is the main component of our application :

https://react-google-maps-api-docs.netlify.app/

    npm i @react-google-maps/api


### Maps direction
https://stackoverflow.com/questions/44503665/react-google-maps-render-directions


### Customization Google Maps
https://mapstyle.withgoogle.com/
https://snazzymaps.com/


### Google Place
https://github.com/hibiken/react-places-autocomplete#load-google-library

    npm install --save react-places-autocomplete

###### Solution for loading script when necessary
https://stackoverflow.com/questions/58152613/how-to-load-the-google-places-js-api-library-in-a-react-project


## **API Calls**
Api call are made with Axios
-Events Management:

    - scr/api/eventActions
-Users Management:

    - scr/api/authActions


# Image cropper
#### Sandbox
https://codesandbox.io/s/72py4jlll6?file=/src/App.css
#### Npmjs
https://www.npmjs.com/package/react-image-crop

#### Update Quality with this:
Due to quality issue I found a solution here:
https://github.com/DominicTobias/react-image-crop/issues/263#issuecomment-522721633

Alternative V2 (dev. futur.)
https://pqina.nl/doka/

#Image cropper alternative
https://ricardo-ch.github.io/react-easy-crop/
https://codesandbox.io/s/react-easy-crop-custom-image-demo-y09komm059?from-embed=&file=/src/index.js


#
# MultiStep Form
Dependances : formik, yup, materialUI

#### WARNING @date-io/date-fns@1.x date-fns give an error
Waiting for resolution install instead @date-io/moment@1.x moment


#### Tutorial
https://medium.com/@nphivu414/build-a-multi-step-form-with-react-hooks-formik-yup-and-materialui-fa4f73545598
#### Sandbox
https://https://codesandbox.io/s/building-multi-step-form-with-formik-yup-3ro0d
.io/s/72py4jlll6?file=/src/App.css
#### github
https://github.com/nphivu414/react-multi-step-form

## Register form (base) 
https://codesandbox.io/s/2oow9n5p7r?file=/src/SignUpForm.js:704-713

## React Validator
https://www.npmjs.com/package/validator-react

        npm i validator-react
        
## Password strength estimator  zxcvbn
https://www.npmjs.com/package/zxcvbn


## Recaptcha
Google recaptcha V2

## Cookies Consent

    npm i react-cookie-consent
    
## Custom Image loader
https://www.npmjs.com/package/material-ui-image
    
    npm install material-ui-image    

## Share Options 
###### (Button multi share options)
https://www.npmjs.com/package/react-share

    npm install react-share --save


## Alert et Confirm Message
https://www.npmjs.com/package/react-confirm-alert

    npm i react-confirm-alert


## React Spinners
https://www.davidhu.io/react-spinners/
    
    npm i react-spinners


## React phone input
https://www.npmjs.com/package/react-phone-input-2#style

use:

    import PhoneInput from 'react-phone-input-2'
    import 'react-phone-input-2/lib/material.css'


## CSS Animation
https://www.jag-conseil.com/english/20-styles-of-animated-borders-in-css-for-a-modern-site/
https://codepen.io/Huhtamaki/pen/GPzwPY
https://codepen.io/ZachSaucier/pen/kyGqm


## WebSite icons
! https://stackoverflow.com/questions/5110776/apple-touch-icon-for-websites

https://realfavicongenerator.net/


## React Pdf 
template : https://kags.me.ke/post/generate-dynamic-pdf-incoice-using-react-pdf/

## Console logging
    console.todo("This is something that’ s need to be fixed")
    console.important("This is an important message"")
    console.table(response.data)
https://stackoverflow.com/questions/40647361/console-logging-for-react


# WARNING
After npm run build, need to check id .htacces is still there and contains:

        RewriteEngine On
        RewriteCond %{DOCUMENT_ROOT}%{REQUEST_URI} -f [OR]
        RewriteCond %{DOCUMENT_ROOT}%{REQUEST_URI} -d
        RewriteRule ^ - [L]
        RewriteRule ^ ./index.html

Also Check package.json homepage --> https://justnow.app/
    
    https://stackoverflow.com/a/64629580/7225869

For mailing contact pb please check url in file about/index.php


remove from package.json
"proxy": "http://localhost/justnowApi/public/",