this system is a point of sale system that is built to work both online and offline . the front end made with react.js and packed with webpack.js . written in es6 utilizing react-boilerplate for the frontend file structure and basic configurations and material-ui as its basic ui components . alongside a local store that is based on redux with a redux-saga as its asynchronouse actions layer , which uses pouchdb.js as a local database that can be synced on demand.
the routes apearing on the
leftDrawer
menu, are stated in the/data.js
file .
npm run generate route
or yarn run generate route
, follow the instructions afterward .
more informations can be found in
react-boilerplate/react-boilerplate
##pos Routes theroutes.js
file has the navigation and dependencies injection necessary for each route. go read it to know more about what routes are available for you to enable in thedata.js
file.
-
if they are not in
data.js
they wont apear in theleftDrawer
menu. -
the menu id should follow
app.pages.{routename}
convention, -you should observe the previous routes- . and thats because you will need to add a translation using that id in thetranslations
folder locales (en.json, ar.json). for that route name to be modified in multiple languages . -
the reason why the routes are stated in the
data.js
file . is because later on the allowed routes for users may vary . and that information will have to be moved to its own storage . either in the user object you get after login or some other place.
here i'll segment the bussiness logic relative to app interfaces
user should login if he has an account ... pretty straight forward right ? nope. atleast in its final form . the point of sale should verify if the user is authorized to login from that tenant or not .
this interface should be seperated into two new main interfaces
1. crud for users (the actual employees)
2. crud for the customers (the customers)
>both of these interfaces have pretty common features . your job to make it as dry(dont repeat yourself) as possible.
you should revise with the project manager aka abu fares on what should apear in this interface .
### 1. `checkoutBench/index.js`
no desc provided revise the code.
### 2. `paymentModal/index.js`
no desc provided revise the code.
### 3. `invoiceReport/index.js`
no desc provided revise the code.
`productsManagement/index.js` this is the container that has the two previously mentioned components . what you need to understand is . any action that affects the global state of the app should be made as a function here . then passed to the corresponding component of the child components . ooh
and go read the file to know exactly how it propagates actions .
> 1. now this component will include barcode into its search as soon as it gets implemented to the system .
> 2. this component is redundunt (has a lot of shared code with the component `checkoutBench/index.js` . work your way into making it dry . > 3. if the products size is less than 7 . it will display them in 2 columns rather than 7 . (can you make it responsive friendly pls?)
> 4.there is no paging whatsoever . if you have 1000 products they will be rendered . after making the generic component shared between `items.js` and `checkoutBench.js` go for making the products lazy load .
it has forms . to create/edit the product . your role is to comeup with a mechanism to validate those forms .
to run this project you need to have your package manager of choice out of npm/yarn while yarn is the one used during the early development of this project . thats it.
-
first you need the project files .
$ git clone http://[email protected]
-
install the packages . and wait for the webpack dll to build
$ npm i
or$ yarn
whatever suits you ... -
start the project for a first test run
- for development
$ npm run start
or$ yarn start
- for production
$ npm run start-prod
or$ yarn start-prod
- for development
Attention: there are thre places where your expertise may vary yet you can distribute loads according to what you already know . and what you're willing to learn. but it all comes down to being fluent in Js and mainly es6, hence because this project was written by it. when you need something concerning the app structure and how it works . consult react-boilerplate/react-boilerplate, for material-ui tho,most of the components if not all use
material-ui @0.20.1
, read that to know how their components api works. hence am not using theirwithStyles
thingy and i manipulate the styles mainly from/global-styles.js
file .
- React.js (components , pureComponents , lifecycle , Composed Components ,Hoc)
- react router v3. (and if you're free you can tinker how to update to v4 without breaking the universe)
- Redux & Redux-saga (containers , enhancers)
- PouchDb (map/reduce ? , mongo-find) (how indexing work?) (how sync work) (why cant we edit) (how to avoide conflicts)
For basic structure . see
react-boilerplate/react-boilerplate
documentation.
- all the presentation components are in
app/components
directory - all the containers (components that have logic and pass data) are in
app/containers
. - idealy components that are contained by a container should be in a folder carrying its name . for example a container with the name
Auth
contains components fromapp/components/Auth
directory. when you see any inconsistancies with this rule . make an effort to apply it .
you can only give the localization ability to a component in two ways
- by injecting a prop with the name
intl
using the HOCinjectIntl
like this :import React from 'react'; import {injectIntl} from 'react-intl'; class MyComponent extends React.Component { render(){ const {intl} =this.props return (intl.formatMessage({id:'message.key.in.locale.json.file'})); } } export injectIntl(MyComponent);
- by using
react-intl
built-in components
import React from 'react';
import {FormattedMessage} from 'react-intl';
class MyComponent extends React.Component {
render(){
const {intl} =this.props
return(
<FormattedMessage id='message.key.in.locale.json.file' />
);
}
}
export (MyComponent);
by default mui is configured to convert render its components in
RTL
. this means that all the css rules you give to any component through react . will flip the right and left of that css . for example . if you give an elementstyle={{right:0}}
the output will bestyle={{left:0}}
. so watchout . further enhancements could be made . like working on two project configurations where we compile a special version for bidirectional or ltr only languages.
see react-boilerplate/react-boilerplate translations docs.