A bilingual web application designed to help users practice Nonviolent Communication (NVC). This tool guides you through the process of identifying your observations, feelings, and needs to gain clarity on your inner state.
- 5-Step Process:
- Topic: Describe the situation objectively.
- Emotions: Identify your emotions from a categorized list (Satisfied/Unsatisfied).
- Needs: Discover the underlying needs behind your emotions.
- Feedback: Review the constructed NVC statement.
- Summary: View the complete content with options to Save as Image or Print.
- Bilingual Support: Seamlessly switch between English and Traditional Chinese via URL (e.g.,
/en-US,/zh-TW). - URL-Based Routing: Application state and language are reflected in the URL for easy sharing and navigation.
- Responsive Design: Optimized for both desktop and mobile use, featuring a modern UI with Tailwind CSS.
- Image Export: Save the summary card as an image for easy sharing and printing.
- Core: React 19, Vite, TypeScript
- Styling: Tailwind CSS v4 (using CSS Variables & OKLCH colors),
class-variance-authority,clsx - Routing: React Router v7
- Icons: Lucide React
- Internationalization: react-i18next
- Utilities:
html-to-imagefor capturing summary cards.
src/
├── components/ # Reusable UI components (buttons, cards, layout)
├── data/ # Static data for emotions and needs
├── i18n/ # Localization configurations and translation files
├── layouts/ # Application layout wrappers
├── pages/ # Main route components (Topic, Emotions, Needs, Summary)
├── lib/ # Utility functions (utils.ts)
└── index.css # Global styles and Tailwind v4 configuration
-
Clone the repository
git clone https://github.com/your-username/fcrb-nvc-app.git cd fcrb-nvc-app -
Install dependencies
npm install # or pnpm install -
Run the development server
npm run dev # or pnpm dev
This project is licensed under the MIT License - see the LICENSE file for details. Copyright (c) 2025 FcrbPeter