I’m excited today to announce the release of my latest open-source web development project Foxtrot, a digital cryptocurrency wallet application built upon the MEAN stack. It uses Angular for the front-end and NodeJs and Express for the backend. Foxtrot is a straightforward SPA designed to display the architecture and approach to a full front end Angular App with a dynamic RESTful backend behind it. The source code is available on Github. It can be extended and used as a basis for other Web applications.
NOTE: Not sure what the MEAN stack is? Head over to Slideshare and check out my presentation describing the technology.
To kick things off in this first post, I’ll review the goals and approach of the app. As I continue, I’ll examine the technical details of the features included in the initial release. I will also discuss technical challenges and ways I resolved them as well.
Goals
Any good software project, web or otherwise, must start with clear and attainable goals. My list of immediate short term goals for Foxtrot was pretty straightforward.
- Build a dynamic and engaging user interface app using the latest version of Angular and the MEAN stack.
- Include a simple set of features to complete a rapid build and release
- Build an open-ended app capable of extension with more features to be added later
- Utilize existing projects to serve as the boilerplate foundation of the application
I’m happy to say I achieve all of the goals I set for myself for the 1.0 beta release.
- I built a slick and engaging user interface using Bootstrap and a free Darkly bootstrap theme
- The main features of the beta 1.0 release include pages to send and receive cryptocurrency coin, exchange coins of different types as well as a portfolio overview screen
- The app has room to grow with more complex interface features and more tools and services in the NodeJS backend
- Foxtrot builds upon the great work done by several developers on Github to cover the boilerplate code. I’ll review more of this in the approach section.
Another Important Note: Do NOT use Foxtrot as the basis of a live cryptocurrency application. High-grade encryption and security features were not part of my goals.
Longer-term, there are several goals available to be completed:
- Build a dynamic backend that replicates blockchain actions such as proof-of-work completion and blockchain creation and management
- Make the app fully responsive and mobile-friendly. Currently the app is turned to desktop only
Do you have an idea for a feature for Foxtrot? Add it to the Issues page on Github today!
Approach
My approach to Foxtrot was straightforward. Sahat Yalkabov’s Hackathon Starter project serves as a boilerplate framework of the app. I didn’t need much more than the structure and primary display template, so I removed the unnecessary pages and API code that comes with it.
I next integrated Angular into the project. Using the Angular 5.2 CLI, I began a new project. I customized the basic Hackathon starter display template to allow it to run the Angular front end.
I next found an example of how to perform user authentication in Angular created by Jason Watmore from his Angular 2 User Registration and Login Example & Tutorial. I used this to build the login portion of the app.
For the user-interface, I took inspiration from the Exodus Cryptocurrency wallet application. My interface is not a 1-to-1 clone, but it shares similar approaches to the tools and layout of the UI.
Wrap Up
So that sums up my goals and approach to Foxtrot. In future articles, I will dive deeper into the code and some of the challenges I encountered along the way.
The source code is fully available on Github. You can fork the project and review it today. If you have feedback, ideas for more features or you think this is a cool app, please send me a note and let me know.
