✨[Idea] - Website with live playground + Generator #5
Description
Idea ✨
Interactive demo (Live playground) website with configuration generator.
How it should work?
- Live playground for package testing
- Configuration generator with real-time preview
- Ability to partially modify default settings
What it gonna solve? Why we should add this?
Users will have a dedicated space to use, test, and create their own configurations.
How it should be implemented?
-
Homepage with main "Logo" and Live Playground below (If it's possible, try to change font if app "design" is bugged)
-
Config Generator Page - Configuration form on the left, live preview on the right (You should keep in mind, package have defaultConfig which can be merged with user config and partially filled [Add option to use defaultConfig or not] + config parsers + Support many exports (in commitsmile README.md) )
-
Try make it "auto update" (Especially with Config Generator)
Tech Stack:
- Framework: React
- MetaFramework: NextJS (App, with src, TailwindCSS)
- Development TypeSafety: TS +
@ineedj/tsconfig(Example in commitsmile package) - Runtime TypeSafety: Typia (Try it instead zod, if possible) (Example in commitsmile package) (Maybe you will need
@ryoppippi/unplugin-typia) - Linter: Eslint +
@ineedj/eslintrc(Example in commitsmile package, can be problem in nextjs) - Formatter: Prettier +
@ineedj/prettierrc(Example in commitsmile package) - Error Handler:
oh-my-error(If Needed)
(Create new workspaces dir "apps" and there "website")
Check CONTRIBUTING.MD
Example of usage / I have seen it in other library
No response