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.

Demo

Discover it yourself

url: https://dojo-manager-3be0a.web.app/
email: test@royalzsoftware.de
password: test1234

Here is a quick demo video, that shows the general features.

Screenshots

Manage your plans with the CRUD table

Journey

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.

Which will result in the following table.

I have already written a separate blog post about the Crud table. Have a look at this

ResourceForm component

My resource form component allows me to define a few fields, that can be validated by a formValidator class and rendered.

Defining the fields looks like this.

How Repositories, CrudTables and EditResourceForms intertwine

Defining the repositories looks like this:

you can tell: the first argument takes a ModelDefinition. This object tells how a certain model is defined.

• modelName is used for UI texts.

• fields is used, to build and validate the form.

• populateForView is needed in order to populate certain fields, like the pricing column in the table.

Navigation

I also rebuilt react-navigation in its most simplistic manner

Why I built this?

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.

All the code

• GitHub https://github.com/ijustdev/dojo-manager

What's left to say?

1. If you want to build a new side project, consider using AppWrite. It's free and speeds up your development for any MVP development by a great factor.

2. Check out my GitHub repository. You might find something interesting for your App, that you might reuse.

3. I hope you enjoyed this post, showing my latest side project.