sanayafai / elfcommerce

ElfCommerce, a data-driven open source Ecommerce backoffice dashboard. ReactJS + ExpressJS

ElfCommerce

ElfCommerce is an open source ecommerce dashboard written in ReactJS + ExpressJS and curretly under active development. The goal of this project is to provide a data-driven backoffice solution for SMEs. It will allow yout to manage your inventory, orders, supply chain, shipments, payments and everything else in one place with intuitive UI.

Please join me to work on this special project together. I'm looking for volunteers:

• Coders: React, Node
• UX designers
• Supply Chain domain experts

ElfCommerce is suitable for

• Online store businesses
• Retail businesses
• F&B businesses
• Importers & Exporters
• Dropshippers

Demo account

Username: [email protected]

Password: 123

Dashboard demo (Continue developing)

Installation

Step 1, clone this repo

Step 2, add the .env file in root directory with environment settings:

tokenSecret=REPLACE_THIS_WITH_ANY_LONG_RANDOM_STRING
dbHost=MYSQL_SERVER_CONNECTION_STRING
dbUser=MYSQL_USER
dbPassword=MYSQL_USER_PASSWORD
dbName=MYSQL_DATABASE_NAME
testDbName=MYSQL_DATABASE_NAME_FOR_INTEGRATION_TEST
sendgridApiKey=SENDGRID_API_KEY
sendgridDailyLimit=SENDGRID_DAILY_LIMIT_FOR_FREETIER
elasticemailApiKey=ELASTICEMAIL_API_KEY
elasticemailDailyLimit=ELASTICEMAIL_DAILY_LIMIT_FOR_FREETIER
passwordCallbackUrl=https://www.example.com
senderEmail=SYSTEM_EMAIL_SENDER_EMAIL

Step 3, install all dependancies for ExpressJS

Yarn

yarn install

NPM

npm install

Step 4, install all dependancies for ReactJS

Yarn

cd client && yarn install

NPM

cd client && npm install

Step 5, create your own config.js in client/src directory with following settings:

const config = {
  apiDomain: 'API_DOMAIN',
  accessTokenKey: 'THE_KEY_FOR_LOCAL_STORAGE_TO_STORE_ACCESS_TOKEN',
  googleApiKey: 'GOOGLE_API_KEY',
  mediaFileDomain: 'http://localhost:8080', //If you allow images to be uploaded to your local server
  saveMediaFileLocal: false, //Set this to true if you allow images to be uploaded to your local server
  sendgridApiKey: 'SENDGRID_API_KEY',
  sendgridDailyLimit: 'SENDGRID_DAILY_LIMIT_FOR_FREETIER',
  elasticemailApiKey: 'ELASTICEMAIL_API_KEY',
  elasticemailDailyLimit: 'ELASTICEMAIL_DAILY_LIMIT_FOR_FREETIER',
  passwordCallbackUrl: 'https://www.example.com',
  senderEmail: 'SYSTEM_EMAIL_SENDER_EMAIL'
};

export default config;

Step 6, set up database

Before run the following command, make sure you already created a database and have it configured in your .env file.

yarn db:migrate

Step 7 (Optional), if you wanna deploy the RESTful API to AWS lambda function using ClaudiaJS, please make sure you follow the instructions.

ClaudiaJS doesn't create a Lambda function with environment variables from the .env file, thus you'll need to put all environment varibles in a .json file and run the following command when creating a Lambda function for the first time:

claudia create --handler lambda.handler --deploy-proxy-api --region AWS_REGION_NAME --set-env-from-json FILE_PATH

How to run this?

Yarn

yarn client

NPM

npm run client

Unit Test

For every main directory (components, containers etc.), there should be a __tests__ directory for all unit test cases.

yarn test [test_directory]

How to contribute to this project?

Your contribution is appreicated. For the purpose of having good project management, I encourage you to understand the project structure and way of working before you start to contribute to this project.

Project restructured based on Fractal + ducks for greater scalability

├── client                       # The web frontend written in ReactJS
│   ├── public                   # Static public assets and uploads
│   ├── src                      # ReactJS source code
│   │   ├── components           # Shared components, like Button, Input etc.
│   │   │   ├── __tests__        # Unit test for components
│   │   ├── pages                # Top level components
│   │   │   ├── __tests__        # Unit test for containers
│   │   │   ├── ...              # Sub components of top level components
│   │   ├── modules              # Actions + Reducers using ducks file structure
│   │   │   ├── __tests__        # Unit test for reducers
│   │   ├── utils                # Utilities like language, date utils, string utils etc.
│   │   │   ├── languages        # All language translation .json files
│   │   │   │   └── en.json      # Language file
│   │   └── App.css              # Your customized styles should be added here
│   │   └── App.js               # ** Where React webapp routes configured.
│   │   └── index.js             # React webapp start point
│   │   └── config.js            # All global configurations(not included in this repo)
├── db                           # Directory for database raw sql file, migration script etc. 
├── exceptions                   # Directory for all API exception types
├── models                       # Directory for all API models
│   ├── tests                    # Directory for all API models test cases
│   └── account.js               # User model
│   └── auth.js                  # Authentication model
│   └── categorty.js             # Category model
│   └── index.js                 # Aggregates all model files
│   └── manufacturer.js          # Manufacturer model
│   └── order.js                 # Order model
│   └── product.js               # Product model
│   └── public.js                # Public data model
│   └── report.js                # Report model
│   └── store.js                 # Store model
│   └── supplier.js              # Supplier model
│   ├── vendor                   # For 3rd party modules
├── routes                       # Directory for all router files
│   └── auth.js                  # Router for authentication endpoints
│   └── category.js              # Router for category endpoints
│   └── common.js                # Router for public data endpoints
│   └── index.js                 # Aggregates all router files
│   └── manufacturer.js          # Router for manufacturer endpoints
│   └── order.js                 # Router for order endpoints
│   └── product.js               # Router for product endpoints
│   └── store.js                 # Router for store endpoints
│   └── supplier.js              # Router for supplier endpoints
│   ├── vendor                   # For 3rd party modules
├── uploads                      # Directory for image uploading, will be created automatically(not included in this repo)
└── .travis.yml                  # Travis CI config file
└── .eslintrc.json               # **Don't change settings here.
└── .env                         # Global environment variables(not included in this repo)
└── app.js                       # Restful APIs written in ExpressJS
└── app.local.js                 # Wrapper file for claudia.js
└── lambda.js                    # Used by claudiajs for severless deployment, **Don't change contents here.
└── LICENSE                      # Project license file, **Don't change contents here.
└── package.json                 # All project dependancies
└── middlewares.js               # Middlewares for ExpressJS routes
└── README.md                    # **Don't change contents here.

1. Always work on your own feature or bugfix branch.

You will need to follow the naming convention if it's a new feature: feature/xxx-xxx-xx

or fix/xxx-xxx-xx if it's a bug or other type of fixing branch.

2. Always run eslint

Before creating a PR, you should run:

yarn lint:client

to make sure all formatting or other issues have been properly fixed.

...

About the logo

Icons made by Freepik from www.flaticon.com is licensed by CC 3.0 BY

License

Elf Commerce is Apache-2.0 licensed.