Merry-Money is a clone of Robinhood, an app that allows you to invest in the stock market for free. You can research companies, put them on a watchlist to keep an eye on performance, and buy and sell.
-
Dashboard: Track Port
-
Asset/Stock Detail
-
Watchlist
-
Asset/Stock Search
-
New account creation, login, and guest/demo login
- Detailed portfolio information
- More stock detail for analysis
- Tags and collections to find/compare similar companies
- Realtime portfolio value tracking
- Dashboard news tailored to portfolio holdings
- Responsive site
- Optimize batch requests to IEX API for faster loading
Debouncing on search to prevent an AJAX call for each key press. Uses timeout to wait .5 seconds after the last key stroke to fetch data.
handleInput(e){
e.preventDefault();
this.setState({inputVal: e.currentTarget.value});
if (this.timeoutId) {
clearTimeout(this.timeoutId);
}
this.timeoutId = setTimeout(()=> {
this.props.fetchSearch(this.state.inputVal).then((action)=> {
this.setState({searched:Object.values(action.companies)});
});},500);
}Highlighting selected search option based on up and down arrow presses as well as hovering with the mouse and submitting correct search on enter or click.
handleKeyDown(e){
if (e.key === "Enter") {
let newId = this.state.searched[this.state.searchIdx].id;
this.props.history.push(`/stocks/${newId}`);
this.setState({inputVal:''});
this.setState({searched: []});
} else if (e.key === "ArrowDown") {
if (this.state.searchIdx < this.state.searched.slice(0,10).length-1) {
let newIdx = (this.state.searchIdx + 1);
this.setState({searchIdx: newIdx});
}
} else if (e.key === "ArrowUp") {
if (this.state.searchIdx === 0) {
this.setState({searchIdx: 0});
} else {
let newIdx = (this.state.searchIdx - 1);
this.setState({searchIdx: newIdx});
}
} else {
this.setState({searchIdx: 0});
}
}handleMouse(e){
let idx = parseInt(e.currentTarget.attributes.class.value);
if (!isNaN(idx)) {
this.setState({searchIdx: idx});
}
}