Introducing Cryptocademy: A real time virtual crypto trading simulator
Tags: product, webdev, showdev, javascript
Published: 2022-06-20 12:32:28

In this article, I will share my experience building my first solo big project that I've been working on for the past few months. My goal in creating this project was to improve my web development skills and to add something meaningful to my portfolio. It would be greatly appreciated if you could try it out and let me know what you think of it. You can comment or you can email me at webdripdev@gmail.com.

_**Cryptocademy app doesn't involve any real money and it is for educational purpose**_


## Introducing Cryptocademy

The Cryptocademy app is the perfect way to learn about cryptocurrency without any risk. With the cryptocademy virtual trading simulator, you can trade and invest in crypto 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. Plus, cryptocademy has curated resources to help you learn about cryptocurrency and blockchain from scratch. And to keep you up to date, cryptocademy sends daily cryptocurrency news right to the app. 

Check out this short video to learn more about cryptocademy.

{% embed https://www.youtube.com/watch?v=aT4LrwuvwMk %}



## Link to the app 🎉

Cryptocademy is a cross-platform application, so you can test it on your web browser or download it from play store[only 5mb]😎😎.

Website: [https://cryptocademy.webdrip.in/](https://cryptocademy.webdrip.in/)

Android App: [https://play.google.com/store/apps/details?id=com.cryptocademy.android](https://play.google.com/store/apps/details?id=com.cryptocademy.android)


## What problem it is trying to solve?

Let’s look at some of the problems this cross-platform app is trying to solve.

### Risk of losing real money.

It is difficult to predict whether the price of tens of thousands of coins will increase or decrease at a particular time or over a period of time since many of these coins are new and unstable on the market.

If people want to experiment or learn how to trade coins by investing real money. Taking this route is risky because the chances of losing well-earned money are high.

Also, crypto is in winter right now. Here is a look at my portfolio. It's a good thing I purchased the coins virtually using cryptocademy because I would've had an emotional breakdown 😅 😂.

![My sinking portfolio](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8ildc6nid733ypxfhes8.png)
 

### What is cryptocurrency?

The technology behind cryptocurrency is not well known by most people. They are unaware of the fundamentals. Investing in something you don't understand the problem it is trying to solve can be risky.

### Similar Apps🤔

Numerous apps are available that attempt to solve this issue. Several of these apps provide limited coins while others lack real market prices. The majority of these apps do not have curated resources, search coins, and much more features that cryptocademy provides.

## Talk is cheap! show me 📷

A overview of all the features of cryptocademy

### **Discover the future of digital finance.**

Real-time, risk-free trading simulator that allows you to master crypto trading at zero cost. Buy from over 10k+ coins using virtual usd and start your trading journey

![https://res.cloudinary.com/https-webdrip-in/image/upload/v1650981847/market_e7l799.png](https://res.cloudinary.com/https-webdrip-in/image/upload/v1650981847/market_e7l799.png)

### Analysis of coins

See detailed cryptocurrency price change candlestick charts, USD converter, social media trends and followers of over 10k+ coins

![https://res.cloudinary.com/https-webdrip-in/image/upload/v1650981845/showcase2_xxh0dr.png](https://res.cloudinary.com/https-webdrip-in/image/upload/v1650981845/showcase2_xxh0dr.png)

### Keep track of your virtual portfolio.

You decide how to utilize mock $100000 virutal USD! Buy, sell, trade, and profit🚀🚀🚀. Learn how to become a savvy investor with cryptocademy.

![https://res.cloudinary.com/https-webdrip-in/image/upload/v1650981846/showcase3_k3uoox.png](https://res.cloudinary.com/https-webdrip-in/image/upload/v1650981846/showcase3_k3uoox.png)

### Compete Globally

Do you have what it takes to be a better investor, compete globally with other users and become a better investor.

![https://res.cloudinary.com/https-webdrip-in/image/upload/v1650981846/showcase4_h0vitd.png](https://res.cloudinary.com/https-webdrip-in/image/upload/v1650981846/showcase4_h0vitd.png)

### Search Coins

The majority of the apps I tried did not offer this capability. You may search for and learn about any coin on Cryptocademy. Coin prices and details are provided by coingecko api.

![https://res.cloudinary.com/https-webdrip-in/image/upload/v1655537790/search-coins-mock_ak7a61.png](https://res.cloudinary.com/https-webdrip-in/image/upload/v1655537790/search-coins-mock_ak7a61.png)

### Daily Top Cryptocurrencies News

Get the latest news on Cryptocurrency and stay up-to-date on major crypto like Bitcoin, Ethereum etc..

![https://res.cloudinary.com/https-webdrip-in/image/upload/v1650981848/showcase5_pycvmp.png](https://res.cloudinary.com/https-webdrip-in/image/upload/v1650981848/showcase5_pycvmp.png)

### Curated resources to learn fundamentals.

We curated the best resources we could find on the Internet to learn about cryptocurrencies, trading, blockchain, and web 3.0. As time progresses, there will be more articles and resources available on the app.

![https://res.cloudinary.com/https-webdrip-in/image/upload/v1650981847/showcase6_cylkru.png](https://res.cloudinary.com/https-webdrip-in/image/upload/v1650981847/showcase6_cylkru.png)

## ****Tech stack****

- React Js - Frontend
- Firebase - Authentication
- Supabase - Postgres SQL database
- Framer motion - Animation
- Tailwind CSS - Styling
- Redux Toolkit - State management
- Capacitor - In order to convert the Web App to Android app and deploy it to the Play Store
- Netlify - Hosting

## Challenges Faced!

### Redux

Many would argue that I could have utilized context API for state management instead of redux. I believe redux is one of those libraries where, even if you grasp the concept, you really need to code to understand it. But, I think using the redux toolkit was a good choice because it simplified caching results, refetching, etc. Overall, I think it was a good experience.

### Authentication & Database

When I first started my project, I used Firebase authentication and hoped to use the decentralized peer-to-peer database Gun.js, but I ran into many unexpected errors. I literally wanted to give up while debugging one problem after another. I was having a hard time visualizing my data in gun.js, so I decided I needed a relational database rather than peer-to-peer. When I started working with supabase, everything started to click and I was so happy implementing one feature after another.

I really like the developer experience of supabase and would recommend other to try it out (not sponsored).

I wanted to switch my authentication from firebase to supabase, but I didn't want to write any code and logic to do so 😅

### Charts

I decided to utilise apexchart; however, the example in the documentation was written in class component, and this was the first time I transformed a class component code into a functional component. I suppose I need to work more on the candlestick chart and make it more detailed, but for now, I am pleased with the results.

## **Contributing**

PRs are always welcome.

If you want to file an issue or add a new feature to this programme, I would appreciate any collaboration and effort. You can add/contribute **[here](https://github.com/Narottam04/Cryptocademy)** :)

![https://media.giphy.com/media/xUPOqo6E1XvWXwlCyQ/giphy.gif](https://media.giphy.com/media/xUPOqo6E1XvWXwlCyQ/giphy.gif)

## **Thanks!**

Hope you like my project! Please let me know what do you think about my project.

<a href="https://www.buymeacoffee.com/narottam"><img src="https://img.buymeacoffee.com/button-api/?text=Buy me a coffee&emoji=&slug=narottam&button_colour=FFDD00&font_colour=000000&font_family=Poppins&outline_colour=000000&coffee_colour=ffffff"></a>