Goal

Create a lean business canvas form Inspired by: Ash Maurya

Acceptance criteria:

• Must contain the following fields
  1. Customer Segments (with subset "Early Adopters")
     • List your target customers and users
     • List the characteristics of your ideal customers
  2. Problem (with subset "Existing alternatives")
     • List your customer's top 3 problems
     • List how these problems are solved today
  3. Revenue Streams
     • List your sources of revenue
  4. Solution
  5. Unique Value Proposition (with subset "High-Level Concept")
     • Single, clear, compelling message that turns an unaware visitor into an interested prospect
     • List your X for Y analogy (e.g. Youtube = FLickr for videos)
  6. Channels
     • List your path to customers
  7. Key Metrics
     • List the key numbers that tell you how your business is doing
  8. Cost Structure
     • List your fixed and variable costs
  9. Unfair Advantage
     • Something that can not be easily copied or bought

Strech goals:

• The form can be exported to PDF
• Add link to YouTube videos explaining each

Getting Started

First, run the development server:

npm run dev
# or
yarn dev

Open http://localhost:3000 with your browser to see the result.

You can start editing the page by modifying pages/index.js . The page auto-updates as you edit the file.

Learn More

To learn more about Next.js, take a look at the following resources:

• Next.js Documentation - learn about Next.js features and API.
• Learn Next.js - an interactive Next.js tutorial.

You can check out the Next.js GitHub repository - your feedback and contributions are welcome!

Deploy on Vercel

The easiest way to deploy your Next.js app is to use the Vercel Platform from the creators of Next.js.

Check out our Next.js deployment documentation for more details.

Typescript & Jest Support

#Typescript
yarn add --dev typescript @types/react @types/node

#Jest
yarn add --dev jest @types/jest @testing-library/react @testing-library/jest-dom ts-jest jest-transform-css

tsconfig.jest.json

{
    "compilerOptions": {
        "jsx": "react",
        "allowJs": true,
        "allowSyntheticDefaultImports": true,
        "esModuleInterop": true,
        "noImplicitAny": true,
        "sourceMap": true,
        "target": "es5"
    }
}

jest.config.js

module.exports = {
    preset: 'ts-jest',
    testPathIgnorePatterns: ["<rootDir>/.next/", "<rootDir>/node_modules/"],
    setupFilesAfterEnv: ["<rootDir>/setupTests.ts"],
    transform: {
        "^.+\\.tsx?$": "ts-jest"
    },
    testRegex: "(/__tests__/.*|(\\.|/)(test|spec))\\.(jsx?|tsx?)$",
    moduleFileExtensions: [
        "ts",
        "tsx",
        "js",
        "jsx",
        "json",
        "node",
        "module.css"
    ],
    moduleNameMapper: {
        "\\.(css|less|scss|sass)$": "jest-transform-css"
    },
    globals: {
        'ts-jest': {
            tsconfig: '<rootDir>/tsconfig.jest.json',
        },
    },
};

TailwindCSS

Installation guide - here

AnimXYZ

Installation guide - here