This post was originally published on my blog at legobox.
So it's been a little over 3 weeks since I started building out spectre. 2 weeks ago, all designs were completed and it was time to get into the nitty-gritty of implementation. In this phase starting out with the front end was the most reasonable idea to me, it usually is the most reasonable idea.
Most would vouch for building out your APIs first, but that requires some real significant foresight, in this case, the app has a simple core.
- Managing projects deployments to servers.
- Managing processes run via ssh and keeping logs.
- Managing users and collaborators.
These are the major points that required an API, therefore I’ve decided to take on frontend first so as to be able to get a proper view of how these APIs would be used.
Thought process
My development process is largely deep in the scrum methods, but I combine with the use of KPIs to get the most out of myself, Therefore over weeks I set out tasks to accomplish on scrum board and attach KPI scores to them and proceed to try my best to reach a target KPI score, sometimes I hit it, sometimes I don’t, but it always get’s the ball rolling.
Tools and stack
Being an advocate for the SPA (Single page application) I really love them in terms of structure. an SPA provides several benefits, for those of us who are not familiar with the term, let's start from the beginning.
SPA are applications whose entire frontend is loaded in a single file (index.html typically) this allows them to load all their resources once and have the frontend operate seamlessly without the need to load other pages from the servers.
The only data loaded after loading an SPA app is JSON response and data that might be required in different areas around the entire application.
Framework
In this case, my SPA tool is the react javascript framework. I only started coding on react about a year plus, for the most part, It's been a really cool tool to use, good structure in terms of features and allow for real quick prototyping.
I also combine react with a few other libraries which serve different purposes in the development process. a few of these include
- Reactstrap - A react based alternative to traditional bootstrap (quick prototyping here 😒 )
- Chart.js - A javascript library for displaying charts (as the name implies)
- Redux - The almighty redux, state management in react doesn’t come better than that.
Servers
I’m using a VPS box to serve the project for live preview.
At the moment the following pages have been implemented.
- Homepage
- Login
- Signup
- Dashboard
These were created in direct accordance to the design specs, all implementations can be found on the server preview site
Deployment
The project is set up to use gitlab’s CI integrations to set up a CI system which deploys to the servers whenever I push to master. To learn about that, I wrote a piece once upon a time about that.
Setting up the servers was accomplished using ansible, using docker on the project is just overkill to me cause all other projects on my VPS running on the same stack most of the time, except for custom software or situations that warrant them.
The way forward.
During the course of the week, I’ll be implementing the other interfaces as designed, in order to get a clear idea of what it means to be a user using the application. would likely call for some A/B testing and some site analysis to get a clear glimpse of all pressure points using the tool. Being a saas app it's important the project focuses deeply on the workings and functionality since it, not a social facing system.
Conclusion
By the end of the new week, I should have all the interfaces implemented and ready to go, alongside the basic setup for the authentication features.
Building out a platform is always fun at some points and for the most part, it opens a partway to a whole lot more. In terms of work habits ethics and time management, maybe I’d write about that some other time, but at the moment we are making good progress.
Top comments (0)