/platypus

[Clean code that works] A full-stack CRUD web app with a React frontend and Java + Kotlin backend using Quarkus and Spring Boot, designed for end-to-end development practice with database integration.

Primary LanguageHTML

Platypus

Table of Contents

Platypus

Platypus is a full-stack CRUD web app with a React frontend and Java + Kotlin backend using Quarkus and Spring Boot, designed for end-to-end development practice with database integration.

Platypus Backend

Backend API server based on Quarkus in Kotlin and Java

Creating platypus-backend

$ quarkus create app --maven --kotlin --java=21 --refresh --verbose \
    --extension='kotlin,resteasy-reactive,resteasy-reactive-jackson,smallrye-openapi,hibernate-orm,hibernate-orm-panache,hibernate-orm-rest-data-panache,hibernate-orm-panache-kotlin,jdbc-postgresql,rest-client-jackson,cache,hibernate-search-orm-elasticsearch' --package-name=au.platypus.quarkus \
    platypus:platypus-backend-quarkus:0.1.0-SNAPSHOT
$ cd platypus-backend

Change the default port:

  • Modifying the platypus-backend/src/main/resources/application.properties file:

quarkus.http.port=2412

Platypus Frontend

Frontend web UI server built with Next.js and Material UI (MUI) in React, utilizing TypeScript for enhanced type safety and maintainability.

Creating platypus-frontend

$ npx create-next-app@latest

Install packages

$ cd platypus-frontend
$ npm install @mui/material @emotion/react @mui/x-data-grid @emotion/styled @mui/icons-material dayjs

Change the default port in a Next.js application:

  • Modifying the platypus-frontend/package.json file:

"scripts": {
  "dev": "next dev -p 2612"
}

Run platypus-frontend app in dev mode

cd platypus-frontend
npm run dev