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
- Online store businesses
- Retail businesses
- F&B businesses
- Importers & Exporters
- Dropshippers
Username: [email protected]
Password: 123
Dashboard demo (Continue developing)
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
Yarn
yarn client
NPM
npm run client
For every main directory (components, containers etc.), there should be a __tests__ directory for all unit test cases.
yarn test [test_directory]
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.
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.
Before creating a PR, you should run:
yarn lint:client
to make sure all formatting or other issues have been properly fixed.
...
Icons made by Freepik from www.flaticon.com is licensed by CC 3.0 BY
Elf Commerce is Apache-2.0 licensed.