Version | Note | Date |
---|---|---|
1.0.0 | Init document | 04 Mar 2021 |
1.0.1 | Update product type section | 01 May 2021 |
1.0.2 | Update Technical issues and Verotel | 29 Sep 2021 |
1.0.3 | Add CCBill cancelation section | 30 Sep 2021 |
1.0.4 | Add style question point | 26 Oct 2021 |
1.0.5 | Ad banner size | 08 Nov 2022 |
1.0.6 | Custom script | 13 Sep 2023 |
2.0.0 | Logo size | 18 Nov 2023 |
xFans provides 2 sections in the Admin settings for email
Email tab
Admin email: Email address for who will receive notification from system and contact form
Sender email: Email address for who will send the email in system
SMTP tab
Host: enter SMTP host eg smtp.google.com
Port: SMTP port eg 465
Auth user: SMTP username
Auth password: SMTP password
Secure option: Enable if use port 465
Note:-
You can use format “your name” <email-address> to admin email and sender email. Eg
Admin email: “xFans Admin” <admin@myxFans.info>
Sender email: “xFans Support“ <noreply@myxFans.info
xFans provides SMTP method for email only, almost services provide SMTP config, please check with your service and common list in our document.
Note:-
You can use format “your name” <email-address> to admin email and sender email. Eg
Admin email: “xFans Admin” <admin@myxFans.info>
Sender email: “xFans Support“ <noreply@myxFans.info
xFans provides SMTP method for email only, almost services provide SMTP config, please check with your service and common list in our document.
Go to Admin panel > Settings > System settings > Google Analytics and enter your GA code.
Note: GA code usually is formatted with G-xxxxxxxxxx
Note: GA code usually is formatted with G-xxxxxxxxxx
Go to Admin panel > Settings > System settings > SEO > Custom. There are 2 section you can enter your custom script
Custom header script: website will render this content in the <head> tag
Custom body script: website will render this content before </body> tag
Note:-
You can enter your GA script to one of these sections
Make sure you entered valid HTML or Javascript script. Otherwise it might break the system
Note:-
You can enter your GA script to one of these sections
Make sure you entered valid HTML or Javascript script. Otherwise it might break the system
xFans does not provide option to change layout or style in the admin panel. However if you want to custom there are 2 solutions
Change style from source code (recommend this)
Or inspect element in xFans HTML code and get CSS class name or section then update your style to “Custom header script” section.
xFans just supports these payment gateways.
Go to Admin > Settings > System settings > CCbill and enter CCBill information in the form
CCBill webhook URL: https://[xFans-v2-api-domain]/payment/ccbill/callhook (eg https://api.xFans.info/payment/ccbill/callhook)
Approval URL: redirect link to your website after purchased successfully. You can enter https://[xFans-front-office-domain]/payment/success (eg https://xfans.info/payment/success)
Cancel URL: Redirect link after user cancelled or purchased unsuccessfully. You can enter https://[xFans-front-office-domain] (eg https://xfans.info/)
Check for CCBill setup here
Note:-
In CCBill we need 2 sub accounts for each model. one for recurring payment and one for single payment
You have to select correct payment type for that sub account when creating.
Note:-
In CCBill we need 2 sub accounts for each model. one for recurring payment and one for single payment
You have to select correct payment type for that sub account when creating.
Go to Admin > Settings > System settings > Payment settings and enter Verotel credentials there
Verotel webhook URL: https://[xFans-v2-api-domain]/payment/verotel/callhook (eg https://api.xFans.info/payment/verotel/callhook)
Success URL: It is redirect pay after payment successful. You can enter https://[xFans-front-office-domain]/payment/success (eg https://xfans.info/payment/success)
Check for Verotel setup here
Note:
Verotel Flexpay doesn’t support split payment. Admin has to pay performer manually via payout request module
By default Verotel doesn’t enable yearly subscription. Please contact with them and get approval for this option.
Cancel subscription is not available on Verotel Flexpay for now (v2.1.4)
Note:
Verotel Flexpay doesn’t support split payment. Admin has to pay performer manually via payout request module
By default Verotel doesn’t enable yearly subscription. Please contact with them and get approval for this option.
Cancel subscription is not available on Verotel Flexpay for now (v2.1.4)
Please contact us for custom requirements.
Go to Admin panel > FE Menu. Here you can see the list and create or update existing menu.
xFans provides only option to change footer menu for now
From system page: FE will reload custom script file if it is system url. if enable you can select list of static pages too
Is new tab: open link in a new tab once clicking on
Title: menu text
Path: link to the page (you can enter full url here if it is not system page)
Section: where we will show the menu
Ordering: enter sort number of menu item in the list
Sendgrid
Host: smtp.sendgrid.net
Port: 465 / 587
Auth user: the string apikey. This setting is the exact string "apikey" and not the API key itself.
Auth password: your Sendgrid API key eg: SG.xxxxx
Note:-
Sender email in Email tab must valid with domain you verified in Sendgrid dashboard.
Have to verify sender domain in sendgrid dashboard before using https://sendgrid.com/docs/ui/account-and-settings/how-to-set-up-domain-authentication/.
More details about Sendgrid SMTP, please read here.
Note:-
Sender email in Email tab must valid with domain you verified in Sendgrid dashboard.
Have to verify sender domain in sendgrid dashboard before using https://sendgrid.com/docs/ui/account-and-settings/how-to-set-up-domain-authentication/.
More details about Sendgrid SMTP, please read here.
Gmail
Host: smtp.sendgrid.net
Port: 465 / 587
Auth user: your full email address eg: youremail@gmail.com
Auth password: your Gmail password
Note:-
Sender email in Email tab must be same your gmail address.
Please enable less secure option here.
Note:-
Sender email in Email tab must be same your gmail address.
Please enable less secure option here.
M3 service
Host: m3 host url eg v2010004s.m3xs.net
Port: 587
Auth user: email username account or M3 FTP master account
Auth password: your email password or M3 FTP master password
Note:-
Go to M3 control panel and register your email address, then fill to SMTP form
For Linode user, SMTP restrictions are in place by default for Linodes on accounts created after November 5th 2019. You'll need to configure rDNS for your instance and open a Support ticket confirming CAN-SPAM compliance, and Support should lift the restrictions pretty quickly. Check here for more details
Note:-
Go to M3 control panel and register your email address, then fill to SMTP form
For Linode user, SMTP restrictions are in place by default for Linodes on accounts created after November 5th 2019. You'll need to configure rDNS for your instance and open a Support ticket confirming CAN-SPAM compliance, and Support should lift the restrictions pretty quickly. Check here for more details
xFans provide 2 product options
Physical product - Physical item such as mobile device, DVD disk, etc…
model has to ship to user once having an order
model is able to update shipping code, delivery status is needed in the control panel
Digital product - Digital item such as photo, video or audio file
user purchases digital item will receive email notification with download link of digital item
model doesn’t need to manage order status, it is completed once user purchased successfully.
Our system supports to cancel CCBill subscription for now.
In user: Login and check subscription tab and click on Cancel subscription button
In admin panel
Setup CCBill Datalink Service username and Datalink Service password in the Settings > CCBill
username could be found in the Log in to CCbill admin panel -> Account Info -> Data link services suite
password could be found in the link https://admin.ccbill.com/megamenus/ccbillHome.html#AccountInfo/DataLinkServicesSuite(234)
Important: For your ccbill account, please provide IP ranges that we should add in Datalink, for additional details, you may see our API guide, which also contains the list of other error codes and their explanation.
CCBill API: Cancel Subscription
Slider banner: 1257 x 314
Login Placeholder: 1086 x 1866
Site Logo: 300 x 87
Favicon: 16 x 16
xFans supports Local storage (single machine) for now. We use nginx http_auth_module to protect assets. The download link usually is available in 4h, and have integrated business rules in our application.
xFans supports local storage for now. If need S3 service you can customize our File module or contact for customization
xFans supports local storage for now. If need FTP service you can customize our File module or contact for customization
Yes, xFans is able to be deployed to any VPS server, include AWC EC2
We have not supported for application container image in our script yet. So you have to create image eg with Docker and deploy application to Kubernetes. Or contact us for a customization.
For now xFans does not provide Docker image yet. We will provide in future release.
Yes, we are using Jenkins for this purpose
We provide full source code, so you can do implementation if you want. Or we can provide Docker image for your customizations
We use less (https://lesscss.org/ ) to manage stylesheet. From source code you can
Check style folder, here we define common style rules in the global.less, responsive.less, vars.less
For separate component you can check related files in the components > component name > .less file. example to manage header, you can check components > common > layout > header.less
Note:- Not recommend to change style in the built .css
Note:- Not recommend to change style in the built .css
It supports but not 100%, some we need to modify. basically we have no PWA yet
We just use ant design for our component design / approach.
We do not provide server security or DDOS protection, we provide application only
Application below
Authentication Tokens:
• Secure Storage: Store tokens securely using methods like environment variables or dedicated secret management services. also support .env if needed
• Encryption: Encrypt tokens in transit and at rest to protect against interception and unauthorized access.
• Expiration and Rotation: Implement expiration dates for tokens with JWT Securing User Data:
• Data Encryption: Encrypt sensitive user data both in transit (using TLS/SSL) and at rest (using AES or similar algorithms).
• Access Controls: Enforce strict access controls and permissions to ensure that only authorized users and systems can access or modify data.
• Data Minimization: Collect and retain only the data that is necessary for the application to function, reducing the potential impact of a data breach.
Backend we have request logs and httpexception log to track issues / exception. besides that we also have log tool to use in additional case In frontend we do not apply but we provide addon for Sentry log when having request from client
No hardcoded values with configuration files or environment variables. If have we have constants file, and define all there
default system is monolithic architecture but if want we can design as microservice.
so far in our application, we just need to separate file server then we can apply load balancer without issue
have cache system on our app, use Redis
db: Have indexing, query optimization. Our DB platform supports sharding to improve database performance and scalability.
we have queue, messaging system for asynchronous Processing, message queues and event-driven architectures to handle tasks that can be processed asynchronously.
Documentation Standards:
Code Comments
README Files: we provided confluence page with all details
API Documentation: we provided api docs already
Coding Conventions:
Style Guides: we use Airbnb's JavaScript Style Guide
Naming Conventions: Use clear and descriptive names for variables, functions, and classes.
Refactoring: Regularly refactor code to improve readability and reduce complexity.
Review Processes:
Code Reviews: Implement a peer review process where every piece of code is reviewed by at least one other developer before being merged.
we do not use SQL but no-sql. and we use mongoose framework with mongodb-driver, it will prevent sql injection. CSRF is not applied on our product, we use API with authentication header. XSS we provided setup on nginx, if neeed any we can update there. Check our nginx template for details
We do not have E2E or unit test right now. manual testing whole app
==> https://ant.design/docs/spec/values
You can have a look at our portfolio - https://adent.io/portfolio
=> partial support, If you want to support auto scaling - need to customize the file server as below,
database -> there is no problem with db - scale or separate db for each module file service -> converting, transcode (eg from mov to mp4 h264), image processing (eg crop, resize...) we need to create a separate file media service otherwise we cannot support horizontal scale properly.
queue / messaging service -> we are using Redis - need a shared Redis server for all instances
=> So far it is single database but it support scaling well. check https://www.mongodb.com/basics/scaling . if needed we can design / change DB connection for each module without issue as well.
In the DB we store hashed password. 1-way hash (sha1)
Version ^18.2.0
=> Current version we are using ant design https://ant.design/(5.x) with its components
-> use scss superset to manage theme variable, theme size...
-> we can overwrite default ant design components if any (check antd custom theme https://ant.design/docs/react/customize-theme )
note: we allow 1 device (user) login 1 time only
Step 1: call login api /login
Step 2: create session record with unique random-token and return token to client side
Step 3: for auth request, send token to http header
Step 4: check / verify token before process next
Step 5: get user info and verify status (eg inactive) and allow/disallow to next step
=> Yes, it can be deployed. we can also use full AWS service if needed. step below
Upload file to s3 server directly
Listen uplaod success event and notify Lambda function
Process media convert (for instance use AWS Media convert for video processing)
=> default is nginx pseudo streaming -> for protected file we use nginx http_auth_request_module https://nginx.org/en/docs/http/ngx_http_auth_request_module.html to verify
Create aws ec2 instance
Install softwares for that instance (ffmpeg, redis, database...)
Configure nginx config
Deploy code / custom code to server
Build / compile code with build command.
Run application as normal node app with production process manager such as pm2