Business Model Canvas

A modern, interactive Business Model Canvas application built with Next.js, React, and Tailwind CSS. This digital tool allows entrepreneurs, product managers, and business strategists to create, edit, and export business model canvases with a clean, intuitive interface.

Features

• Interactive Canvas: Edit all 9 sections of the Business Model Canvas in real-time
• Modern UI: Built with shadcn/ui components for a polished, professional look
• Export Functionality: Export your canvas as PDF or image
• Responsive Design: Works seamlessly on desktop and mobile devices
• Dark Mode Support: Toggle between light and dark themes
• Auto-save: Local storage integration to prevent data loss
• Keyboard Shortcuts: Productivity shortcuts for power users

The Business Model Canvas Sections

1. Key Partners - Who helps you succeed?
2. Key Activities - What do you do?
3. Key Resources - What do you need?
4. Value Propositions - What do you offer?
5. Customer Relationships - How do you interact?
6. Channels - How do you reach customers?
7. Customer Segments - Who do you serve?
8. Cost Structure - What are your costs?
9. Revenue Streams - How do you make money?

Tech Stack

• Framework: Next.js 16
• Language: TypeScript
• Styling: Tailwind CSS
• UI Components: shadcn/ui
• Icons: Lucide React
• Export: html2canvas & jsPDF

Getting Started

Prerequisites

• Node.js 18+
• npm, yarn, pnpm, or bun

Installation

1. Clone the repository:

git clone https://github.com/yourusername/business-model-canvas.git
cd business-model-canvas

2. Install dependencies:

npm install
# or
yarn install
# or
pnpm install
# or
bun install

3. Run the development server:

npm run dev
# or
yarn dev
# or
pnpm dev
# or
bun dev

4. Open http://localhost:3000 in your browser.

Usage

1. Edit Sections: Click on any section to start typing your business model content
2. Export Canvas: Use the export button to save your canvas as PDF or PNG
3. Toggle Theme: Switch between light and dark modes using the theme toggle
4. Auto-save: Your work is automatically saved to browser local storage

Scripts

• npm run dev - Start development server
• npm run build - Build for production
• npm run start - Start production server
• npm run lint - Run ESLint

Contributing

Contributions are welcome! Please feel free to submit a Pull Request. For major changes, please open an issue first to discuss what you would like to change.

Development Guidelines

• Follow the existing code style and conventions
• Use TypeScript for type safety
• Ensure all components are properly typed
• Test your changes before submitting

License

This project is licensed under the MIT License - see the LICENSE file for details.

Acknowledgments

• Business Model Canvas concept by Strategyzer
• Built with Next.js
• UI components from shadcn/ui

Support

If you encounter any issues or have questions, please open an issue on GitHub.