In favor of the Hashnode x Appwrite Hackathon contest, I have come up with another side project, that I finally took to the finishing line: The Dojo Manager. A tool to manage your martial arts studios' students.
It is written with the help of React and AppWrite.
In earlier blog posts I wrote about some key components, that make the usage and extensibility of this project a dream.
But what is this project all about? And what features does it offer?
Features
Analytics page, that showcases your dojos growth. With three widgets:
Monthly Recurring Revenue in $
Total student count
New students this month
Cockpit page, to manage students, create invoices and change plan settings.
Invoice button, to create a simple invoice for the current month.
My first draft was built with mvp.css. A great no-css framework, to save me hours of work.
Originally I have just implemented mvp.css. Which is great and works for a really minimal mvp.
Since then, just a few hours before starting this blog post, I pivoted and applied the RoyalZSoftware theming to the app, to make it look more luxurious.
Clean Code
This section is purely dedicated to design patterns and clean code porn. It should highlight the great extensibility and ease of use for diverse models.
Environments - granular configure your dependencies
For once, it splits dependencies within an enivronment.js file, that can be configured freely. There are currently two environments, one for local repositories and another one for AppWrite.
This allows full integration testing of components without having to mock individual dependencies in each test.
In the above picture, you can see both environment configurations. If you now were to run npm run start:prod, you would end up with an environment.js file that has been copied from environment.prod.js.
This useDataAccess() hook then enables me to access corresponding repositories from within each hook/component.
CrudTable - data manipulation for every model
Since this project has to deal with multiple models, I thought, it would be a great thing, to have a general CrudTable.jsx component, that renders a table and deals with:
fetching
updating
deleting
and creating
models. It receives a repository and a headers property.
The query_field property is optional and only used to tell AppWrite what index to search.
I am practicing Karate and I saw old tools that my current Sensei uses to manage his dojo.
I wanted to build something that looks great and covers the most important cases: Invoicing.
Why Dojomanager X AppWrite is the perfect collab
AppWrite is an open-source serverless backend-as-a-service. Comparable to Firebase, but completely free for a long time.
The whole concept of BaaS, makes it easy for startup founders to ship new features fast. Since a lot of features often consist of models and CRUD operations.
This also saves you a lot of overhead, that you would otherwise have for deploying a secure backend instance, setting up a CI/CD instance and the starting-from-scratch problem.
I could accelerate my development time with AppWrite by a great factor and even though I signed up for the hackathon 2 weeks later, I could set up a neat project that just works.