↓Skip to main content

Okami101 Works! 🎉

Conduit Apps Collection

Main purpose of this projects is to have personal extensive API training on multiple backend languages or framework. It’s following the very known Conduit project, a Medium clone. Each project respect following conditions :

  • VS Code as only main editor !
  • 100% compatible by the official OpenAPI Spec
  • Proper OpenAPI documentation
  • Testable with last Postman collection of Conduit
  • Fully tested
  • High QA by following best practices for linting, formatting, with static analyzers for non strongly typed languages
  • Community-driven with usage of the most well-known packages
  • PostgreSQL as main databases
  • Use ORM whenever possible that follows any DataMapper or Active Record patterns
  • Proper seeder / faker for quick starting with filled DB
  • Separated RW / RO database connections for maximizing performance between these 2 contexts
  • Proper suited QA + production Dockerfile
  • Complete CI on Kubernetes with Concourse CI
  • Automatic CD on Kubernetes using Flux

Frontend

Instead of using outdated Bootstrap v4 alpha 2 theme, I rewrite it on UnoCSS, an awesome efficient Tailwind-like utility-first CSS framework, with Dark Mode support.

For API communication, as we have full proper OpenAPI spec, it’s a real benefit to have a generated Typescript client for full autocompletion feature. The well known OpenAPI Generator is okay for this task but generate massive amount of code as it generates a complete client SDK.

Thankfully this openapi-typescript package is a for more lightweight solution. It simply translates the OpenAPI spec to a simple Typescript file, with only types. No code generation involved ! In order to work, we need to use a specific fetch tool which will use all advanced features of Typescript 4 in order to guess type all the API with only a single TS file in runtime !

Common packages involved :

  • Vite as main bundler
  • ESLint with Prettier for linting and code formatting
  • Iconify as universal icons
  • TanStack Query, compatible with Vue and React for nice API communication and powerful caching system

To sum up, at the time of Vue 2 (Options API) and React <16.8 (class components), it was a complete different DX and each framework have their own unique way to develop components. But now with Composition API and React Hooks, the gap is much smaller and became just a matter of taste, JSX vs Vue template, tooling, community, etc.

Vue 3 TS Realworld

Vue 3 TS implementation written with Composition API. Main packages involved :

  • Pinia as main store system
  • vue-tsc as main TS checker and compiler for Vue components, with full VS Code support with Volar plugin
  • VueUse for many composition function helpers

Additional packages that reduce boilerplate and improve DX :

Demo

React TS Realworld

React TS implementation. It uses only pure function components thanks to React Hooks, which can be more or less related to Vue 3 Composition API.

It uses React Context as minimalistic store system, without extra complexity from external libraries like Redux or MobX.

Additional packages :

  • Generouted, file based routing system with layout support, compatible with Vite

Compared to Vue implementation, it seems a bit less magical and more explicit, as it likes for Symfony VS Laravel. Don’t require heavy Typescript IDE tooling like Volar, because it’s just pure TS function components.

Demo

Backend

Not less than 6 different backend implementations using best practices on C#, Java, PHP, Python, Typescript, highly up to date, with complete integrated automated tests suite.

ASP.NET Core Realworld

ASP.NET Core 8 implementation, using minimal APIs, mature since 8.0, following DDD principle, implemented with Hexa architecture and CQRS pattern. Swashbuckle is used as default main OpenAPI generator.

Main packages involved :

  • Carter for seamless endpoints grouping
  • EF Core as strongly typed ORM
  • MediatR for easy mediator implementation. It allows strong decoupling between all ASP.NET controllers and the final application which is cutted into small queries and commands
  • Fluent Validation for strongly typed validation
  • dotnet-format as official formatter
  • xUnit.net as framework test
  • Fluent Assertions for strongly typed assertions within the API
  • Respawn as for optimal integration tests isolation
  • Bogus for strongly typed fake data generator
  • Bullseye as a nice CLI publisher tool with dependency graph
Demo

Spring Boot Realworld

Spring Boot 3.2 implementation using Gradle 8 & Java 21. Similar to the official Spring Boot implementation but with usage of Spring Data JPA instead of MyBatis. Here is another nice one that explicitly follows DDD.

Main packages involved :

Demo

Symfony Realworld

Symfony 7 implementation on PHP 8.3 that supports PHP 8 attributes, using API Platform.

Contrary to Laravel, the usage of DataMapper pattern ORM involve classic POPO models. The additional usage of plain PHP DTO classes facilitates the OpenAPI spec models generation without writing all schemas by hand. On the downside the Nelmio package is far more verbose than the Laravel OpenAPI version.

Main packages involved :

Demo

Laravel Realworld

Laravel 11 implementation on PHP 8.3 with extensive usage of last attributes support. The particularity of this framework is to give you almost of all you need for quickly develop any complex application. So minimal external packages need.

I obviously made usage of Eloquent as a very expressive Active Record ORM, and the Laravel factories system based on PHP Faker is already perfect for dummy data generator.

Contrary to most others projects, there is no usage of DTO classes, so it’s required to write all schema declarations for proper OpenAPI models generation.

Main packages involved :

Demo

NestJS Realworld

NestJS 10 implementation under Node.js 20 using Typescript 5 and pnpm as fast package manager. It relies by default on express as NodeJS HTTP server implementation. NestJS offers a nice OpenAPI documentation generator thanks to Typescript which provides strong typing.

Main packages involved :

  • Prisma 5 as ORM entirely built up for Typescript. Include migrations, models generator based on specific schema specification
  • Faker for generating seeders
  • ESLint with Prettier for linting and code formatting
  • Jest as main test framework
Demo

FastAPI Realworld

FastAPI implementation under last Python 3.12 with Poetry as package manager.

It’s based on pydantic, an essential component that allows proper OpenAPI generation and data validations while bringing advanced type hints.

Main packages involved :

  • Pydantic 2, for any data validation
  • SQLAlchemy 2 with Alembic for schema migration
  • python-jose as JWT implementation
  • Faker as dummy data generator
  • Ruff as extremely fast linter and code formatter written in rust, a perfect drop-in replacement for flake8, isort and black
  • mypy as advanced static analyzer
  • pytest as main test framework
Demo

Other projects

Main purpose of this projects is to have personal extensive API training on multiple backend languages or framework. It’s following the very known Conduit project, a Medium clone. Each project respect following conditions :

  • VS Code as only main editor !
  • 100% compatible by the official OpenAPI Spec
  • Proper OpenAPI documentation
  • Testable with last Postman collection of Conduit
  • Fully tested
  • High QA by following best practices for linting, formatting, with static analyzers for non strongly typed languages
  • Community-driven with usage of the most well-known packages
  • PostgreSQL as main databases
  • Use ORM whenever possible that follows any DataMapper or Active Record patterns
  • Proper seeder / faker for quick starting with filled DB
  • Separated RW / RO database connections for maximizing performance between these 2 contexts
  • Proper suited QA + production Dockerfile
  • Complete CI on Kubernetes with Concourse CI
  • Automatic CD on Kubernetes using Flux

Vuetify Admin

Date : 11/2020

My most personal open-source 2020 Mammoth project. It’s a full admin framework similar as React Admin but for VueJS 2 and using Vuetify 2 as material frontend framework.

It’s a complete frontend project mainly written in Javascript, with multiple usable NPM packages, a backend Laravel bridge, all inside a mono-repo managed by Lerna. A Vue CLI plugin was also created for quick starting.

I put many efforts into writing a complete documentation on VuePress, with complete tutorials, including integration within Laravel and Symfony API Platform. This documentation has clearly represented not far from 80% of all work ! It also has many samples and a complete demo.

But I had to decide to stop this project after a couple of months because multiple reasons :

  • Less time available
  • Too much effort to maintain and evolve it
  • Not written on Typescript that allows proper refactoring
  • No unit tests from the beginning, what has proved to be HUGE mistake
  • Vite, Vue 3 with real Typescript support and Vuetify 3 are in the corner, which necessitates full rewrite and new next repo

Nevertheless, it was a very instructive project that shows me the real amount work for a good documentation and the cost of missing proper unit/integration/e2e tests.

Demo Docs

Laravel RAD Stack

Date : 10/2021

A heavily customized Laravel 8 boilerplate starter-kit with complete BO solution, with posts management as main demo feature. On frontend/assets side it’s relies on last technologies, i.e. pnpm + Vue 3 + Typescript with nice template setup as default syntactic sugar, and finally Windi CSS as CSS utility framework. You can easily ditch Windi CSS for Tailwind if you prefer, as it’s almost the same API.

The BO dev API is similar to my last Vuetify Admin project but rewritten in more customizable components. You have complete DataTable with pagination, sorts, global search, filters, Excel export, customizable row actions with nice Dev-side API. It has a nice BaseForm which reduces forms code boilerplate, with a few supported form inputs (you can easily create your own). It’s also support direct right-aside editing with proper URL context (see users management on demo). All BO relies on Inertia for minimal API glue boilerplate.

This project has full covered test suite written in Pest and uses the most known Dev tools for proper QA assurance as :

  • Larastan as static analyszer,
  • PHP CS Fixer as code formatter
  • Laravel IDE Helper for proper IDE integration
  • Clockwork for debugging (notably N+1 SQL problems)
  • PHPUnit Watcher for full TDD experience
  • Perfect VS Code integration with recommended plugins
  • Docker support
Demo