Installation

How to install and use feature101 in your project.

Prerequisites

Before using feature101, make sure you have:

Next.js 14+ with App Router
TypeScript configured
MongoDB database (local or Atlas)

Add a Feature

Use the CLI to add features to your project. Dependencies will be installed automatically:

npx feature101@latest add like

This will create the following structure in your project:

features/like/
├── index.ts             # Barrel export
├── like.actions.ts      # Server actions
├── like.hooks.ts        # React hooks
├── like.store.ts        # Zustand store
├── like.model.ts        # MongoDB schema
├── like.types.ts        # TypeScript types
├── README.md            # Documentation
└── components/
    └── LikeButton.tsx   # Ready-to-use component
lib/db.ts                # Database connection
types/global.d.ts        # Mongoose connection caching for dev mode

Database Connection

The CLI will also create a database connection helper at lib/db.ts if it doesn't exist. Make sure to set your MONGODB_URI environment variable:

MONGODB_URI=mongodb://localhost:27017/your-database

Usage

Import and use the feature in your components:

import { LikeButton } from "@/features/like";

export default function PostPage() {
  return (
    <article>
      <h1>My Post</h1>
      <p>Post content...</p>
      
      <LikeButton
        userId="user_123"
        targetId="post_123"
        targetType="post"
      />
    </article>
  );
}

Manual Installation

Prefer to copy-paste? Each feature page includes all the code files. Just copy them into your project and you're ready to go.