⭐ Check out this app presentation on YouTube ⭐
This playful and feature-rich application, named without hesitation by the developer's eight-year-old stepson, was styled for mobile and built to aid in the demystification the role of cryptocurrency in the advanced financial world of today.
A user is able to see an expanse of realtime market data as well as add assets to and track their own virtual portfolio.
**Please note that Magic Beans does not require, encourage or even allow a user to spend real money. Any actual cryptocurrency purchases must be made on qualifying exchanges which follow national and international regulations and adhere to KYC standards. The developer behind the app is not now nor will he ever be a qualified financial planner, accountant, CPA, astronaut, cowboy or ninja.
(this image represents the detailed, original, conceptual application flowchart. Several days were spent meticulously peeling back layers of API data and planning data paths as well as designing routes. The final product featured the majority of stretch functionality and implemented a few extra features to boot)
- Create a database using the provided .sql file (title the DB
magic_beans) - Run the queries in the included
database.sqlfile - Run
npm installfrom the project root directory - Run
npm run serverto run the node server - In a separate terminal tab, run
npm run clientto launch the React app
-
In order to proceed to the app content, you will need to
to the disclaimerlanding page. -
Create an accountorloginwith your username and password to advance. -
If you see a
logo, this means that the real-time market data - as well as your stored portfolio and position information - is loading/calculating. Depending on the status of the market, this could take a few seconds (you can view CoinGecko's APIstatus HERE). -
At any time, tap the
menu to open a drawer of navigation options. -
This
actual hamburger menufeatures a
which will navigate to the about page. This page features some developer acknowledgments and links (also found at the bottom of this README). -
If you have not added any crypto holdings yet, you'll be greeted by an empty
positions table. You can scroll down to browse the top 250 cryptocurrencies (ordered descending by market capitalization) at that particular time. Tapping on anyrowwill bring you to adetails pagewith a wealth of current market data as well as a 24-hour price chart. The line will be red if the price is lower than it was 24 hours prior and green if it's higher. -
On this
details page, you can enter any amount of that particular cryptocurrency that you'd like to add to
to your portfolio. The following dialogue will allow you to
or 
(don't sweat it too much - you can always change this later). -
If you do
the addition of an asset holding, you'll see a friendly successdialogue that indicates that you now own a little more of the future of global currency! It even crunches the numbers for you 😃 -
From this page, you can always press the
button to navigate to the search pageor the
button to navigate back to the home pagewhere you can see your current portfolio and market data. -
On the
search page, you can enter any coin byname,tickeror by asingle letter. The single letter option will return every currency in the current top 250 that BEGINS WITH THAT LETTER. Pressing the
button will launch the search. Please note that it is possible to return multiple results and continuing to search will stack results on the page. -
At any time, once results are populated, you can click the
button to navigate to the coin details page. -
Alternatively, you can clear the entire search queue by pressing the
button. -
From the
home page, you canremovea position by tapping the
button. -
You can also
modifya position by tapping the
button. This will bring to a page that allows you to enter a new position amount entirely if you made a mistake, would like to add more or would like to remove some, but not all, from your position.
- At any time, inside the menu, you can tap the
button to sign out.
Visual Studio Code
Pixelmator Pro
Material UI
Moment.js
date-fns
react-chartjs-2
Gifox
CoinGecko API
Font Awesome
Google Fonts
Lucid Chart
Postico
I'd like to extend my sincere thanks to my instructors and everyone at Prime Digital Academy - especially Chris Black and the Proth cohort - for giving me the tools to do amazing things with amazing technology. Thanks also to my little family, especially After years of juggling upwards of 40 cryptocurrency applications and thinking of all the fun stuff I'd love to do if I ever made my own, bringing this to life was a truly amazing experience. I absolutely cannot wait to do more.
If you have any questions - or would like to leave feedback - please do not hesitate to email me at: [email protected] or visit me via one of the links below. I'd love to hear from you!
My Website
My LinkedIn
My Twitter (@HolyMosesMusic)
My GitHub