Tim's Stack Anystack

If you want to rapidly build hyper-dynamic modular progressive web apps this is the stack for you. Comes with all rest-api tooling admin pannel full code and api docs and all pipelines you'll need!

Comment

Updates since 09.06.2023 first deadline

  • portet to docker-compose ( completely runs & builds on the bunnyshell cluster now )
  • integrated android build ( app can be downloaded once environment is deployed )
  • finished db level update manager ( selected model updated are automatically transmitted to connected users )
  • build simple dynamic app framework on-top of dasyui ( mobile layout fully working )
  • added full example chat implementation ( so basically this is also fully usable chat application now! :P )
  • added better automatically created test profiles and admin user
  • added a bunch of UI
  • developed dynamic ad-don for react-json-schema-form that can automatically generate / render & submit forms based on a simple openapi schema
  • recorded new video better demonstrating the stacks features

Inspiration

Two yeas ago I've started working on a messaging / video call platform for a startup which I then founded with a friend in the past year.

Due to very limited budged and frequent changes in freelancers and hosting providers I've developed a stack that can easily be collaborated on and that can be deployed on any hosting provider.

Especially since we are a non-profit it was quite important for us that we can always switch hosting providers and have very predictable cloud costs. Also we needed a stack where components can be developed independently.

Since then I've developed several iteration of the stack and used in in multiple game jams and hackathons; It's perfect for very rapid prototyping!

What it does

The stack also defines the whole deployment infrastructure via helm ( except sometimes we prefer a managed db for production ). The stack and easily be deployed on microk8s and since microk8s runs on almost all devices you can even develop locally within the microk8s environment, so you can test the full infrastructure locally as well.

Also we can easily provide pre-build images for some of the components while still working on individual components, so e.g.: we can easily give a chart with a one-line install to our frontnend egineers and they can start working immediately with full api access, authentication, and all other gimics.

This stack is designed for dynamic real-time web apps with mobile clients. Backend changes can be directly sent to clients using a live WebSocket connection, state in the client is managed with Redux. This allows automatically updating all affected clients on any backend changes.

For the web-application setting, the Django backend dynamically requests Next.js pages, this includes dynamic page data so we get full SSR for all pages.

The Next.js frontend is integrated with Capacitor and directly exports to Android and iOS. In a native setting, the frontend will try to request user data from the backend, if it fails it can fallback to a cached version allowing the user to view the full state of the app in an 'offline' mode.

The stack is setup with several additional helper and framework libraries, for a full overview of all components check the repo.

Bunnyshell templates:

  1. Docker Compose template, for development and feature testing: Main Video
  2. Helm template for advanced and production use: Old Video (Helm Chart Template)

How we built it

I've build the stack myself with some input of friends and other developers, generally I was also trying to follow best practices as I learned to integrate the stack components.

Challenges we ran into

Most notably:

  • cross pod communication concurrency | solution: redis server
  • long running or scheduled tasks | solution: celery works ( & celery single-beat for cross pod communication )
  • initial page load and bundles sizes | solution: optimized nextjs setup and full SSR by requesting rendered pages with user data via the backend
  • static export not possible with serverside props | solution: custom build pipeline developed more generating static mobile apps using capacitor
  • directly reflecting state changes in clients | solution: websocket consumer implementation using django channels can be used to dynamicly send data updates to any connected client
  • offline use of mobile app | solution: automatic data caching and connectivity checking, allows the app also the be used when not connected to the internet
  • frontend backend collaboration and api usage | drf-spectacular integration for automatic api view generation
  • development speed and introducing new developers | solution: automatic code documentation using pdoc3

Accomplishments that we're proud of

  • Reacing 2000+ users in the first 4 monts
  • Stack was successfully used in multiple hackathons and gamejams so it suitable for rapid development!
  • successful load and scalability tests: performed load tests with up to 1000+ concurrent users ( individually making request / connecting to web-socket channels at the same time ) and successfully tested tested automatic horizontal scaling of back and frontend pods.
  • stack is also suitable for microservice environments so another accomplishment ist my development for msgmate.io which relies on dynamically spinning up bot workers and using the kubernetes api for creating and destroying the bot-pods: Overall the stack is very extensible!

What we learned

Django, Kubernetes, Helm, AWS, EKS, Digital Ocean Kubernetes, Microk8s, Typescript, Next.js, React, Capacitor.

Aaand a lot for about CI/CD collaborative work, management, linux environments aaaaaandd a lot lot more :D

What's next for Tim's Stack Anystack

Since the stack is actively being used you can expect this stack to be further refactored and advanced in the coming months.

I'm also planning to advance this stack by some framework for automatic dynamic microservice creating / destruction as it is used by msgmate.io

Add a production deployment guide and some more security practice documentation to the stack. Scale our startup to the next 10.000 and then 50.000 users! Publish the mobile app version of msgmate.io and for second quarter 2024 publish the little-world.com mobile app!

Built With

+ 1 more
Share this project:

Updates