Building software for cattle farmers. Week 0.

Introduction

• A couple of months ago I created and published a basic android app, HERE, which is essentially a simple CRUD application that cattle farmers can use to track calves(baby cows) during calving season. As we speak it has 5 downloads, which is pretty cool considering I originally built it with only my dad in mind.
• However, I now believe the next logical step is to create a web based application which the mobile app can talk to. This series will be weekly and contain the progress I make each week building the web application

YouTube version of this blog post

HERE

Product Review

• First, we should talk about what this product actually is. The vision is to create an application based SAAS product where individuals can sign up to pay a monthly tier based fee and get access to software products.
• Version 1 has been officially deployed to AWS beanstalk and can be found HERE.Version 1 is a simple design meant to act as a place holder and inform anyone of the future intent of the site. I have not bought a domain name or a security certificate yet, so that is why the URL looks a little weird.

About page

• the About page lists 3 tiers:

Support tier

• a monthly subscription, where for $5/month an individual will be able to receive weekly updates via email about the current and future state of the project.

Farmer tier

• a monthly subscription, where for $25/month an individual will get access to a web based version of my calving tracker, which will sync with the mobile version. It will also grant access to any future software products to be produced.

Partner tier

• a monthly subscription, where for $100/month an individual will get access internal APIs and access to raw data sets that about cattle prices being scrapped from local auction marts. However, this part of the project is an end goal and will not be completed anytime soon.

Roadmap page

• This is meant to give people a sense of where in the software development cycle process I am. Ultimately, just trying to be as transparent as possible.

Software Products page

• Meant to give a clear visual representation of the products that are currently deployed. Since I have only created one product, There is only one item showing. There is current demo of the mobile application but it is live.

Developer review

• For any fellow devs out there, this section will be a brief overview of my tech stack, some of the problems I have faced and problems I will most likely see in the future.

The tech stack

• I am using React for the front end, Spring Boot for the backend and Java with Android for the mobile application. I have no particular reasons for using this tech stack other than, I like JavaScript and I like Java.

Frontend specifics

• I am using React with functional components and the styled-components library to handle the organization of my css. As well as the react router dom library to handle client side routing

Frontend problems

• 1) libraries : The first problem I have been faced with is libraries, specifically UI libraries. There are so many and they are very confusing to set up. My solution is to use as few libraries as possible. Yes this will slow down development time and my UI will definitely suffer for it. However, as I scale up I will be forced to deal with creating software that will actually scale. Which means versioning, testing, devops, the real grimy stuff of software development.

• 2) Forms : Form creation and form validation have been a very specific headache for me. To deal with the form creation I have favoured React's component composition. For form validation, I have abstracted all the logic into a custom hook. However, in the future I will need to refactor the validation code as it is growing more and more brittle.

• 3) SVGs In creating my forms, I wanted to have some simple icons for errors. However, I did not want to download an entire library just for one simple icon. I decided to create my own and this is how I did it:

-1) find picture on unDraw: I would recommend heading over to unDraw and find an image you like. Try searching for alert. You can then download your desired image as an SVG.

-2) Sign up for figma: Next, head over to figma and sign up for a free account. Then drag and drop your svg. Finally edit it as you wish and export it as an SVG.

-3) Turn SVG into react component: You create a normal react component and put the svg tags into the component. Now React will yell at you, saying it does not support things like namespaces. which is ok and just delete what says it does not support. You now have your own reusable SVG icon. Which is kind of cool

Future problems

• My biggest problem moving forward with the frontend is going to be forms and form validation. These applications are going to be very form heavy. I need to be able to design code that is flexible and portable enough to handle multiple validation requirements. To solve this problem I will try to find some small open source form validation libraries and see what I can learn from looking at their code base.

Backen specifics

• I am using Spring boot on the backend with Maven as the build tool.

backend problems

• 1) database schema : the design of the database, has been a difficult topic for me, specifically because there is just a lot to consider. However, I have just decided to deal with the relationships and not worry about optimization for the moment. A book that has helped me a lot with database relationship mapping is Pro JPA 2 by Mike Keith and Merrick Schnicariol. It's a pretty big book but I only focused on chapter 4, which deals with the database schema and how implement database relationships.

2) Spring Security : This by far has been the most confusing and dealing with it actually make me delete everything twice. However, the book Spring Security in Action by Laurentiu Spilca is an absolute gold mine. Saved me countless hours when trying to deal with authentication and filters.

3) Bunding into a .jar file : packaging the frontend with the backend into a single JAR file was very confusing. I found the solution using two maven plugins. The first plugin was frontend-maven-plugin which down loads everything that our frontend needs and runs the build command. The second plugin was the Apache Maven Resources Plugin which handles the copying of project resources to the output directory. The combination of these two plugins will give us the ability to run the command of mvnw clean package and have an executable JAR file in the output directory, which we can then execute.

4) Making Spring boot and React router work together : with the previous step we have packaged our React application into the static folder of our backend application. Which basically means Spring boot will only serve the index.html file and ignore the client side routing. So to get around this we can get a little hacky and create a controller that takes in all request and returns the default index.html, which means react router will be able to work. The controller looks like this:

@Controller
public class ReactAppController {

    @RequestMapping(value = { "/", "/{x:[\\w\\-]+}", "/{x:^(?!api$).*$}/*/{y:[\\w\\-]+}","/error"  })
    public String getIndex(HttpServletRequest request) {
        return "/index.html";
    }

}

5) Deployment : At the moment it is just a single monolithic deployment to AWS elastic bean stalk, which is not ideal. In the future I really wanted to create a cool docker based deployment pipeline with GitHub actions and all the fancy devops stuff. For deployment just make sure your port for spring boot is set to 5000 and not the default 8080. AWS looks for the 5000 port.

Future problems

• Integrating a subscription service, for that I have decided to choose Stripe. Mainly because they have a lot of cool developer resources. Thankfully I have found a Github tutorial by Stripe,HERE, on how to create a subscription on the frontend and the backend.
• You can find their developer YouTube channel HERE
• Also, database migrations and devops are probably going to be the biggest source of my future problems

Mobile specifics

• This is where I am lacking the most, there are so many things left to do with the mobile application. But until I have created the subscription service, I will not work on the mobile app

Mobile problems

1) Move to Kotlin? : The Android mobile community has shifted to favour Kotlin for mobile development. Google even officially recommends Kotlin over Java but it will not stop supporting Java any time soon. The smart move would be to switch over to Kotlin. However, I have decided to stick with Java. I like Java and I want to become good with Java, so I am sticking with Java.

2) Hooking up to the webserver : I am not sure how I am going to do this but it is definitely possible. I want to be able to sync the mobile with the web client and allow multiple users using the same account at the same time.

Future problems

• My biggest concern with future deployment is the free vs payed version. I always want there to be a free version of my applications, with the exact same features. The only difference being that the payed subscribers will have access to webservers and will not have to rely on their phones memory for storage.

Conclusion

• Thank you for taking the time out of your day to read this blog post of mine. If you have any questions or concerns please comment below or reach out to me on Twitter.