Stonks - Realtime Trading Simulator [Linode DEV Hackathon]
Tags: linodehackathon, javascript, react, android
Published: 2023-02-20 18:19:16


## What I built

I created a stock trading simulator in which users can practice trading stocks with virtual USD. Users can buy and sell any stock, compete with other users, and improve their investing skills. 
It uses linode managed Postgres SQL, Node JS for backend and React Js for frontend.
<br />

### Category Submission:
<br />

- **Smooth Shifters:** I migrated my project from Supabase to Linode's PostgreSQL and Express server hosted on linode server, resulting in significant performance improvements for the app, as well as a reduction in the bundle size and complexity of the frontend code.
<br />

- **Integration Innovators**: Linode managed Postgres SQL was used as the main backend to handle stock buying and selling.
<br />

- **Wacky Wildcard:**: I had a great time developing this project. As a college student with limited funds, I have been hesitant to invest in stocks in the past, but this app provides me with the opportunity to learn and compete alongside others. I am eager to develop my investing skills and test them against other users on the app.
<br />

### App Link
Link to web app: https://stonks-app.webdrip.in/  **OFFLINE FOR NOW, COMING SOON!!!**

Link to Android APK: https://drive.google.com/file/d/1Le1Hy_RFhBCnmT3wBeEs5KNihzy6SjNy/view?usp=sharing

Download the app through above link and test it on android phone.
Coming soon on playstore😍😍

<br />

### Screenshots

**Login Page:**


![Login page](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/dj87hv54afhsyyfb2san.png)



**Dashboard:**

![Dashboard page](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qeo84j7quuiovo4ros11.png)

**Search Page:**

![Search page](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/jk7oslmlryr2plaeqrxt.png)

**Stock Details page - Candlestick chart:**

![Candlestick chart](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/dv8us2sryjckpkkw45z9.png)

**Stock Details page - Line chart:**

![Line Chart](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ewwxsj7y3hlf19rdj55w.png)

**Buy Stock:**

![Buy Stock](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/p2dommk1yzea17cw4in9.png)

**Buy Stock:**

![Sell Stock](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/oojz5r0ozzlvue54013q.png)


**Portfolio:**

![Portfolio](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/yrnualxzm7ydv5i7ndtx.png)

**Watchlist:**

![Watchlist](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/cmvdobnn9v8rc7fskc8q.png)

### Android App Demo

{% vimeo 801321010 %}


### Description
The Stonks app is the perfect way to learn about Stocks trading without any risk. With the Stonks virtual trading simulator, you can trade and invest in stocks without spending any real money. Plus, detailed candlestick charts and USD converter will help track prices and trends. And if you want to compete with others, global leaderboard will let you see how you stack up.
<br />

### Link to Source Code

https://github.com/Narottam04/Stonks
<br />

### Permissive License
MIT

## Background
I have always wanted to learn stock trading, but being a college student with limited funds has made it difficult to pursue. This motivated me to create an app that not only enables me to learn to trade before I invest real money but also allows me to have fun and compete with others.

This is my first project as a frontend developer where I used TypeScript with Express.js and hosted my server on a Linode Nanode. Additionally, I worked with backend packages like PM2 and Nginx, and learned how to use the Nano editor and copy files from my local machine to the remote server. This was my first experience working with backend technologies, and I would like to express my gratitude to Linode for providing me with the opportunity and motivation to learn and upskill.


### How I built it

I chose this project because I want to learn TypeScript and Node.js, as well as learn how to host an API on a virtual server.

The Express server is connected to a managed PostgreSQL database on Linode, which handles user transactions such as buying and selling stocks, user net worth, watchlists, and other related activities. The Express server is then hosted on a Linode Nanode server.

**Linode nanode server**
![linode server](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/kg34edjfjqoe2i2b675d.png)

**Linode Manged postgres database**

![Linode managed postgres db](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/d3xmub1e7ea9xvl9kfmz.png)




The frontend of the application was created using React.js, and for authentication, Firebase was used due to its better integration with the Ionic Capacitor library. The resulting frontend app was then converted to an Android app using CapacitorJS from Ionic.


### Additional Resources/Info
Tutorial to host express server on linode:
https://www.youtube.com/watch?v=sD8X4CApdpo&ab_channel=TheFullStackJunkie