Documentation

Getting Started

Create a new app using the following commands. Choose the package manager you prefer:

Terminal
1
2
3
4
5
6
7
8
9
10
11
12
13
# Using npm
npm create app-booster@latest my-app

# Using yarn
yarn create app-booster my-app

# Using pnpm
pnpm create app-booster my-app;

#Or
npm i create-app-booster -g
create-app-booster
Output
Creating a new app-booster project in /Users/username/my-app... > npx > create-app-booster my-app šŸš€ Welcome to App Booster! Let's set up your project. ? What type of project do you want to create? React with Vite ? Which package manager do you want to use? npm ? Which language option do you want to use? JavaScript ? You selected javascript. Is this correct? Yes ? Select additional setup options: ESLint and Prettier, Jest for testing, GitHub Actions for CI/CD, Snyk for security scanning, Husky for Git hooks, Git initialization ? Which deployment platform would you like to configure? Vercel ? Would you like to proceed with these settings? Yes šŸ› ļø Creating your project... ā ¹ Installing dependencies... āœ” Project my-app created successfully in 100 seconds! āœ… Everything is set up and ready to go! šŸš€ You can start coding right away. To get started: cd my-app npm run dev Available commands: npm run dev npm run build npm test npm run lint npm run lint:fix Happy coding! šŸŽ‰

Component Examples

Here is an example of a reusable Button component for your Next.js application:

components/Button.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
// components/Button.js
import React from 'react';

const Button = ({ children, onClick, variant = 'primary' }) => {
  return (
    <button 
      onClick={onClick}
      className={`px-4 py-2 rounded font-medium 
        ${
          variant === 'primary' 
            ? 'bg-blue-600 text-white hover:bg-blue-700' 
            : 'bg-gray-200 text-gray-800 hover:bg-gray-300'
        }`}
    >
      {children}
    </button>
  );
};

export default Button;

You can use this Button component in your pages or other components:

app/page.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
import Button from '../components/Button';

export default function HomePage() {
  return (
    <div className="p-8">
      <h1 className="text-2xl font-bold mb-4">Welcome to My App</h1>
      <div className="flex space-x-4">
        <Button onClick={() => console.log('Primary clicked')}>
          Primary Button
        </Button>
        <Button variant="secondary" onClick={() => console.log('Secondary clicked')}>
          Secondary Button
        </Button>
      </div>
    </div>
  );
}
Output
// Renders as: Welcome to My App [Primary Button] [Secondary Button]

React Hooks

Create custom hooks to reuse stateful logic between components:

hooks/useWindowSize.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
import { useState, useEffect } from 'react';

function useWindowSize() {
  const [windowSize, setWindowSize] = useState({
    width: undefined,
    height: undefined,
  });
  
  useEffect(() => {
    // Handler to call on window resize
    function handleResize() {
      setWindowSize({
        width: window.innerWidth,
        height: window.innerHeight,
      });
    }
    
    // Add event listener
    window.addEventListener("resize", handleResize);
    
    // Call handler right away so state gets updated with initial window size
    handleResize();
    
    // Remove event listener on cleanup
    return () => window.removeEventListener("resize", handleResize);
  }, []); // Empty array ensures effect runs only on mount and unmount

  return windowSize;
}

You can use this custom hook in any component:

components/ResponsiveComponent.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
import useWindowSize from './hooks/useWindowSize';

function ResponsiveComponent() {
  const { width, height } = useWindowSize();
  
  return (
    <div>
      <p>Window width: {width}px</p>
      <p>Window height: {height}px</p>
      {width < 768 ? (
        <p>You are on a mobile device</p>
      ) : (
        <p>You are on a desktop</p>
      )}
    </div>
  );
}
Output
// Rendered output (will vary based on browser size) Window width: 1024px Window height: 768px You are on a desktop

Additional Resources