Material-UI+ React.js + Redux [ Pug / Scss / Babel ]
Project web resource ( HTML / CSS / JS ) based on React / TypeScript / shadcn/ui. It assumes the SPA ( Single Page Application ) model.
This is a simple implementation sample using the above libraries, not the library.
We expect one of the following as an API server for sample confirmation.
Frontend Start (VSCode DevContainer)
It is necessary to do the following step.
Do the preparations for this sample in the next step.
sample-ui-react
directory.code .
Do the dev server start in the next step.
npm run dev
http://localhost:3000
sample
/ sample
Refer to the following for the package / resource constitution.
+ .devcontainer … DevContainer Related definitions
+ .vscode … VS Code Related Definitions
+ public … Vite Public Resources (Web Root)
+ src … Vite Development Resources
- .editorconfig … Format Auto-Formatting Rules (EditorConfig)
- .env … Environment Variable (Production)
- .env.development … Environment Variable (Development)
- .eslintrc.js … ES Lint Rule
- components.json … shadcn/ui Related Definitions
- index.html … Vite SPA Entry file
- package.json … NPM Package
- postcss.config.cjs … CSS-Related Definitions
- tailwind.confg.js … TailwindCSS Related Definitions
- tsconfig.json … TypeScript Related Definitions
- vite.config.ts … Vite Related Definitions
/src
+ assets … Static Resources where references via code.
+ components … UI Component Implementation (global domain)
+ auth … UI Components for Authentication
+ layout … UI Components for Site Layouts
+ ui … UI components using shadcn/ui
+ features … Feature (Domain) Specific Implementation
+ *domain* … Specific Domain Implementation
+ components … UI Component Implementation
+ hooks … Hooks Implementation for Business Processes
+ api … API Integration Implementation with Backend
+ types … Type Definitions
+ hooks … Hooks Implementation for Business Processes (global domain)
+ lib … Simple Libraries that are not Dependent on a Framework
+ providers … Infrastructure Provider
- app.ts … React Common Processes
- query.tsx … TanStack Query Common Processes
+ routes … Routing Definition using ReactRouter.
+ types … Type Definitions (global domain)
- App.tsx … Root Component
- index.css … Standard CSS Definition
- main.tsx … SPA Entry Implementation
- vite-env.d.ts … TypeScript Extension Definition for Vite
The license of this sample includes a code and is all MIT License.
Use it as a base implementation at the time of the project start using Spring Boot.