![[images/tradearena-ui-design-and-development/thumbnail.png|TradeArena - UI Design and Development]]
Trade Arena is a trading application powered by Machine Learning.
My Role
Full-Stack Developer
Project Goal
Developing web application using Python Django and integrate client trading function in the backend.
Stacks & Skills
#Python #Django #JavaScript #HTML #CSS #Bootstrap #Apache #SQLite
Client Brief
The client requires a user-friendly interface for his trading bot application so the user can modify the trading bot settings more easily. The bot itself is already developed by the client using Python programming language and that’s the reason why he requires the web application also be developed using the Python Django framework.
In the previous application, the settings data is stored in a JSON file. To modify the settings, the user has to type the value on the variables manually. That’s why he requires an interface to allow users to update the settings in a convenient way.
The client also requires the application to have features and pages such as Login and Register, Forgot Password Request, Home Page, Instruction Page, and Trading Page.
The main application is centered on the Trading Page which contain all the trading bot feature in the form of tabs like Users Management for Admin, Technical Analysis Term, Trading Bot Settings, Credential Form for the Exchange API, and Job Status to show the multithread processing on the background, and Results tab.
The database should only store the user’s email, application login password, and settings, and not allow to save of any credentials passed on the Exchange Credentials form.
Solution
To develop such a Django application first all the data exchange from the previous application should be done on the database. Here’s how I designed the database schema for the application:
As per the client’s requirement, the user exchange credentials should not be stored on the database. For the development purpose, I use SQLite as the local database. I leave what database to choose on the production level to the client’s preference.
Django application views are responsible is to storing and querying users data, running the bot in multiple threads, and sending an email to the admin for the forgot password request.
Next, I decided to develop the front end using HTML, CSS, and Bootstrap. I also add a thousand lines of vanilla JavaScript code to make the interface behave properly.
Here’s what the page looks like: ![[images/tradearena-ui-design-and-development/image1.png|Admin Panel - Users table]]
![[images/tradearena-ui-design-and-development/image2.png|Admin Panel - Add a user]]
![[images/tradearena-ui-design-and-development/image3.png|Login Page]]
![[images/tradearena-ui-design-and-development/image4.png|Forget Password Page]]
![[images/tradearena-ui-design-and-development/image5.png|Reset Password Page]]
![[images/tradearena-ui-design-and-development/image6.png|Trading Page - Settings Tab]]
![[images/tradearena-ui-design-and-development/image7.png|Trading Page - API Credentials Tab]]
![[images/tradearena-ui-design-and-development/image8.png|Trading Page - Backtesting Results Tab]]
![[images/tradearena-ui-design-and-development/image9.png|Trading Page - Returns or Results Tab]]
![[images/tradearena-ui-design-and-development/image10.png|Trading Page - Multithread Monitor Tab]]
![[images/tradearena-ui-design-and-development/image11.png|Trading Page - Technical Analysis Variable Tab]]