Bluejacketeer

Bluejacketeer Description

Bluejacketeer is an e-learning platform that helps Hospital Corpsman and Sailors study for the Navy-wide Advancement Exam.

Our client reached us when he was in troubles with his website in 2015, several technical issues and non-responsive design were harming expected behavior and user experience. That's why we started fixing the issues from previous development.

The key feature of the website is to offer to members a strong tool to study and increase their chance of getting promoted, that's only possible if users can easily follow the study program but at that moment the user experience was not good, glitches time to time and this didn't look as professional as our client expected. In 2016 we have released a first redesign using a new responsive web design under the old PHP platform and we have also developed a first version of the mobile app using Angular and Phonegap (cordova). 

In 2018 we were involved in the migration from the old PHP website to a new platform using React web for the web app and Node.JS for the REST API. This new version was launched using Heroku but it wasn't good enough to handle the traffic, especially during exam season. By increasing resources, it became an expense situation for the client. At the end of 2018 and during Q1 2019, we've assisted our client in another website redesign but this time Serfe was in charge. We have included the server infrastructure as a key part to improve the User Experience (UX), at the same time, keeping cost under control for running the platform in a proper way.

A graphic design agency was in charge of the look and feel. Based on given assets, our developer team has develop the entire web app accordingly. We have built another React App combining a new responsive template with the existing backend API. During the redesign, we've also started redoing the mobile app using native technologies. After 7 month of hard work, we finally released the new website and new mobile app in November 2019

Website Structure

Due to the nature of this application, and the needs form a marketing perspective, we advised to separate a "Sales Site" using Wordpress and the "Web application" under a subdomain using React web framework. 

The sales website is key for promoting the e-learning tool, engage new students and providing help to existing users. This site needs to be easy to edit and stay really fast. Therefore we've chosen Wordpress which is one of the best CMS, easy to use for any non-technical person and really fast thanks to our optimization and performance improvements. We hosed this site in a VPS server. 

The e-learning platform is running in a subdomain. This site needs to be fast, but we didn't need SEO here, then we have chosen React web and Node.JS API to have this application developed, keeping everything dynamic in a SPA (single-page app). The react app is hosted in AWS using a bucket in S3 and the nodeJS app in a separated VPS server (a droplet in Digital Ocean) with a cluster for PostgreSQL database. This structure allowed as to use and combine in a really smart way different hostings and services, with redundancy and performance as the most important aspect.

Additionally, we integrate a simple admin panel to allow the company staff to update and keep all content up-to-date. The admin app includes basic features to create and manage admin users, assign different permission and of course the ability to manage the bibliography to be used under the study program. One of the challenge in this panel was the search panel, we have defined a fast and organized page for search results.

The platform also includes the following integrations

  • Stripe: the online payment gateway that allow customer to pay with most popular credit cards (AmEx, Visa, Master Cards). In the admin panel, our client can check all payment history for every user
  • Intercom: instant message platform for live chat, help section and customer care service. 
  • Apple Store / iTunes: for recurring payments, when customers signed up from iPhone or iPad

Responsive Design

After release a new stable version of the website, we started working on the new web design, with a modern look and feel and 100% mobile-friendly. We installed Bootstrap v4 framework and performed a complete redo using React web framework without compromise existing features; and for sure we improved the user experience.

The existing API has been also optimized. When we have helped to create it in 2018, we were in charge of the QA process, detecting designs issues and just reporting them. So, when we had the chance to apply real changes in the backend app, we took our previous reports and started working on several improvements. We have changed several tables in the PostgreSQL database but also changing more than 30 endpoints in the backend system, in order to speed up all of them. Our team has focused on UX from the beginning of the redesign, we know that a key part of the improvements are related to page load and speed.

Mobile app

Simultaneously with the new website implementation, we started planning a new mobile app using React Native but including exacting the same features. Of course, we have also kept the ability to take quizzes everywhere, even offline!

In the same way we did the old Phonegap mobile app in 2015, our client send to us access to Adobe XD with the new design for this app. We took them and defined all technical requirements for our developer team, taking advantages of existing HTML+Javascript module we had implemented for website and reuse part of it on the mobile application, that is why we've chosen React Web and React Native. 

The users need to hire a membership to be able to login in the mobile app. This membership can be purchased in the website or in the app if you use iPhone. We have implemented Stripe gateway with single and recurring payments for the web and IAP (In-App Purchases) for Apple users.

The advantage of using React Native is that we can use Javascript, which is a technology we are plenty familiar with, but in the the end of the build process we compile the code and publish a real native app for every platform. This is faster to code, includes better native effects and far more reliability in terms of the user experience. 

Additionally to basic features, we've also implemented the logic to detect Internet connection (mobile data or wifi) so we can switch online or offline mode. When offline, the user can still use 100% of app features thanks to an SQLite database we integrated in order to save user progress internally in the device. As soon as the app "detects" connection again, the sync module will activate automatically to send progress to the cloud.

With the mobile app, Bluejacketeer members can study exactly in same way they do on website. Even better, they can use both, synchronize their study path progress and continue learning in their favourite device. The mobile app was built mainly using React Native and NativeBase which provide built-in components for responsive design that ensure compatibility with a large list of devices. The mobile app is compiled to be native iOS and Android that, of course, are being published in Apple Store and Google Play accordingly.

Mobile app support on iOS +10, Android +8 versions.

Apple StoreGoogle Play

Flashcards, study program and Quals

We implemented a new study program including old flashcards system to provide to members a better approach to remember easily the answers to thousands of advancement questions. This included the flashcards manager, an administrative section in the backend to create a flashcard and associate it to an existing question, that way the user can choose the regular question-answer interface or flashcard to complete a study path.

Quals will introduce another approach for improving skills. This was implemented as a new module that allow administrators to create, update and remove bibliography, chapters and books that every student can follow in the different study program paths.  

Technologies

The website was developed by a previous provider, it was a custom PHP framework with just a handful of features. We improved framework security and extended the server API. The server API is key part of the mobile app development, as it needs to handle all requests and serve results for the app. This RESTful API was implemented using Slim framework.

We have redo the old website using NodeJS + React web platform. We improved API and server security using CloudFlare. The server API is key part of the mobile app development, as it needs to handle all requests and serve results for the app. This RESTful API was implemented using SailsJS.

  • React: It's a frontend open source framework developed and supported by Facebook.
  • Bootstrap: It's a responsive frontend framework for implementing cross-browser and cross-devices web designs
  • React Native: It's an open source framework for mobile apps. It is also supported by Facebook.
  • SailsJS: This is a javascript framework that runs on Node.JS. We have used it for the backend REST API
  • Wordpress: We used the self-hosted version of this great open-source CMS.
  • AWS: We have deployed all frontend apps using S3 services
  • Digital Ocean: We have deployed the REST API combining a CentOS VPS server and PostgreSQL cluster for the database.
  • CloudFlare: 24/7 service that increase security and stability for the API server reporting automatically any incident.
  • New Relic: 24/7 service for the web app that reports automatically any incident.
  • Sentry: 24/7 service for the mobile app that reports automatically any incident.

Visit live site here


Tagged under

Tags

Serfe info(at)serfe.com https://www.serfe.com/images/serfe_logo_text.png https://www.serfe.com/images/serfe_logo_text.png FALUCHO 2032, S3016LDB, SANTO TOME, SANTA FE, ARGENTINA 1-305-5375397