Koinbase is full stack single-page web application similar to Coinbase, one of the largest digital currency exchange. It's been built using using Ruby on Rails (version 6) and mainly React.js/Redux on the frontend. Koinbase is hosted on a Heroku server as of Jan. 10th 2020, here are the following main feature a users can do:
- Create an account
- Log in and out
- Follow tradable crypto assets in real time
- Add and remove crypto assets from their personal watchlist
- Search a list of available crypto assets to follow
- View a graphic representation of these assets
Feel free to explore Koinbase or get in touch with me here.
The app is hosted on Heroku as of Jan. 2020
The app is using PostgreSQL as its database.
The app relies on Ruby on Rails (v.6) on the back end with a postgreSQL database. The Back end is design to be RESTful complaint.
The front end is built using in JavaScript and mainly the React.js and Redux framework.
Koinbase uses:
As stated Koinbase uses React/Redux on the frontend, so an obvious choice for navigating the app was to leverage the power of the React-Router library for the fontend routing. Let's explore the different routes and features more in depth:
User authentication both for registration and sign up has been implemented using Bcrypt for hashing sensitive data and follows best practice such as not storing passwords to the database.
Submit process
handleSubmit(event) {
event.preventDefault();
const user = this.state;
store.dispatch(signup(user))
.then(()=>{
loggedInUi();
this.props.history.push('/dashboard');
})
}
Demo function from the Sign in page
handleDemo() {
setTimeout(() => {
const emailField = document.getElementById('email').value = 'demo@demo.demo';
const password = document.getElementById('password').value = 'password';
const sub = document.getElementById('sub');
sub.click();
}
, 2000);
}
On a successful sign up/sign in, a user will be directed to his dashboard where he will be able to view a graphical representation of the evolution of his followed crypto assets (or the 6 most popular ones if it is his first sign in on the platform) over a set period of time.
Dashboard's Card Element
render() {
const arr = [BTC,BCH,ETH,XLM,EOS,XRP];
const arr_double = ['BTC', 'BCH', 'ETH', 'XLM', 'EOS', 'XRP'];
const idx = (arr_double.indexOf(this.props.symbol) !== -1) ? arr_double.indexOf(this.props.symbol) : 1;
const divRed = {color:'red'};
const divGreen = { color:'green' };
const percentIsPos = (this.props.percentage>0);
return (
<>
<div className="card-container">
<div className="card-sub-info">
<div>
<img src={arr[idx]} alt="btc" width='28px' height='28px'/>
<span className='card-name'>{this.props.name}</span>
</div>
<div>{this.props.time}</div>
</div>
<div className='card-sub-info'>
<div className='card-price'>${this.props.price.toFixed(2)}</div>
<div style={percentIsPos ? divGreen : divRed }>{this.props.percentage.toPrecision(2)}%</div>
</div>
<div className="card-chart">
{SimpleLineChart()}
</div>
</div>
</>
)
}
The price component contains the list of all assets. They are searchable by name and the star icon allows users to add them on their watchlist.
The Search was built using plain JavaScript.
const handleSearch = (event) => {
let assets = document.querySelectorAll('.price-element-border');
let input = event.target.value.toUpperCase();
assets.forEach((crypto) => {
if(crypto.textContent.toUpperCase().indexOf(input) > -1){
crypto.style.display = '';
}else{
crypto.style.display = 'none';
}
});
}
How stars are changed once followed
star = () =>{
const followed = {
color: '#F4C623',
};
const style = {
color: 'grey',
}
if (Object.keys(this.props.wallets).includes(this.props.symbol)){
return followed;
}else{
return style;
}
}
- Host on AWS using Docker
- fully refactor for higher scalability
- Audit for better security and best practice
Feel free to reach out if you have any questions, critiques or feedbacks you'd like to share, it is always appreciated. my email