0

Introducing Foxtrot

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.

  1. Build a dynamic and engaging user interface app using the latest version of Angular and the MEAN stack.
  2. Include a simple set of features to complete a rapid build and release
  3. Build an open-ended app capable of extension with more features to be added later
  4. 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.

  1. I built a slick and engaging user interface using Bootstrap and a free Darkly bootstrap theme
  2. 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
  3. The app has room to grow with more complex interface features and more tools and services in the NodeJS backend
  4. 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.

jfox015

Jeff Fox is an over twenty-year web developer and digital user experience technology leader. Jeff cut his teeth in the Web's early days and is mainly self-taught in his professional skills. Having worked for a broad number of companies has helped build skills in development, organization and public speaking. In addition to being a passionate developer and technical speaker, Jeff is a dedicated tech and sci-fi geek gladly indulging in Doctor Who and Star Wars marathons. He is also a talented musician, writer and proud father of three little Foxies. And don't get him started about his San Francisco Giants.

Leave a Reply

Your email address will not be published. Required fields are marked *

 

This site uses Akismet to reduce spam. Learn how your comment data is processed.