Pandemiia-FRONT

Installation

$ npm install

or

$ yarn

Running the Project

After completing the installation step, you're ready to start the project!

$ npm run start 

or

$ yarn start 

Project structure

.
|-- /config                             # Global webpack variables

|-- /packages                           # Reusable packages (can be usend in other app)
|   |--/common                          # Shared components
|   |--/themes                          # Shared themes
|   |--/uikit                           # Shared custom UI elements such as text, box (grid) and form elements
|   |--/utils                           # Application utils

|-- /server                             # base Nodejs server
|   |--/bin                             # main server folder
|   |--/routes                          # server routes
|-- |--/static                          # Compiled application static files

|-- /src                                 # Application source code 
|-- |-- /pandemiainua-theme              # Project Theme name
|   |-- /js                              # Js folder
|   |   |--/components                   # Components with containers
|   |   |--/modules                      # Redux actions and reducers
|   |   |--/locales                      # i18n Localization
|   |   |--/stores                       # Application store folder
|   |   |--/pages                        # Apploication Pages (Routes)
|   |   |--main.js                       # Main app file
|   |   |--index.html                    # Main HTML page container for app

|-- /webpack                             # Webpack configs folder
|   |--/modules                          # Webpack modules folder
|   |--/plugins                          # Webpack plugins folder
|   |-- base.config.js                   # Base webpack config with default properties
|   |-- dev.config.js                    # Developement webpack config   
|   |-- prod.config.js                   # Production webpack config 

Styles

We are using CSS naming map at the webpack config. Also you can make default css variables configuration at the css-color-variables.scss and this variables will be used across all your application

const globalVariables = require('../config/global.variables.webpack');

module.exports = {
    test: /\.(css|sass|scss)$/,
    use: [
            MinCssExtractLoader.loader,
            {
                 loader: 'css-loader',
                 options: {
                   importLoaders: 1,
                   modules: true,
                   localIdentName: IS_DEV_MODE ? '[name]__[local]___[hash:base64:5]' : '[hash:base64:5]'
                 }
            },
            {
                 loader: 'sass-loader',
                 options: {
                    sourceMap: IS_DEV_MODE
                }
            }
         ]
}
           

Check our components here

Storybook