ElfCommerce

ElfCommerce is a headless ecommerce dashboard written in ReactJS + ExpressJS. Here is the developer guide for you to start with this project.

Demo account

Username: [email protected]

Password: 123

Installation

Step 1, clone this repo

Step 2, add the .env file in server 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

cd server && yarn install

Step 4, install all dependancies for ReactJS

cd client && yarn 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.

cd server && 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?

cd client && yarn start

Unit Test

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

cd clint && yarn test [test_directory]
cd server && yarn test [test_directory]

Project structure

Project restructured based on Fractal + ducks for greater scalability

├── .circleci                    # CircleCI config file
├── 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)
├── scripts                      # Scaffolding & automation scripts
│   └── installation.js          # Script to restore database, generate .env file etc.
├── server                       # The web server part
│   ├── 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)
│   └── .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.
│   └── package.json             # All project dependancies
│   └── middlewares.js           # Middlewares for ExpressJS routes
└── .eslintrc.json               # **Don't change settings here.
└── .prettierrc                  # **Don't change settings here.
└── LICENSE                      # Project license file, **Don't change contents here.
└── README.md                    # **Don't change contents here.

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.