Fullstack Project Generator (fullstack-init)

Welcome to Fullstack Project Generator! This is a CLI tool that helps you quickly scaffold a full-stack project, setting up a client-side application using React and Tailwind CSS with Vite, and a backend server with Express and MongoDB. The tool will create the project structure, install the necessary dependencies, and provide you with instructions to get started.

Features

• Client-side (React + Tailwind CSS + Vite): Sets up a modern frontend with React and Tailwind CSS for styling.
• Backend (Express + MongoDB): Creates an Express server connected to MongoDB.
• Automated setup: Installs dependencies and creates the necessary folder structure for a full-stack application.
• Customization: Customize folder names and project settings during the setup process.

Installation

To install and use the fullstack-init CLI tool, follow these steps:

Install the package:

You can install the package globally to use the CLI tool anywhere on your machine.

     npm install -g fullstack-init

Alternatively, you can install it locally in a specific project:

     npm install fullstack-init

If installed locally, use npx to run the tool:

     npx fullstack-init

Install the package and execute at once:

     npm install fullstack-init; npx fullstack-init

Usage

Step 1 : Run the Generator

Once the tool is installed, run the following command to start the project setup:

fullstack-init

You’ll be prompted to provide the following information:

Base Folder Name:

The main folder where your fullstack project will be created (default: my-fullstack-app).

Client Folder Name:

The folder for the client-side application (default: client). Server Folder Name: The folder for the backend server (default: server).

Step 2 : Project Setup

The generator will:

• Create the project folders:

It will create the specified base folder and client/server subfolders.

• Initialize the client app:

A React app with Tailwind CSS will be created using Vite. Initialize the backend server: An Express server will be set up with MongoDB and essential routes. After the setup, you will be able to:

• Install Client dependencies:

    cd <client>
    npm install
    npm run dev

• Install Server dependencies:

    cd <server>
    npm install
    nodemon index.js

Project Structure

            my-fullstack-app
            ├── client
            │   ├── src
            │   ├── public
            │   ├── tailwind.config.js
            │   ├── index.css
            │   └── package.json
            └── server
                ├── models
                ├── routes
                ├── middlewares
                ├── .env
                ├── index.js
                └── package.json

Here’s what the project structure will look like after the generator completes:

Customization

You can customize the folder names during the setup process by entering your preferred names when prompted. You can also modify the generated files according to your project’s needs.

Contributing

Feel free to contribute to this project! You can fork the repository, submit issues, and pull requests.

To contribute:

1. Fork the repository
2. Clone your fork
3. Create a new branch
4. Make your changes
5. Submit a pull request with a description of what you’ve changed

About the Author

This project is developed by Pranshu. If you have any questions or feedback, feel free to connect with me!

Key Sections:

• Features: An overview of what the tool offers.
• Installation: Clear instructions on how to install and use the tool.
• Usage: A step-by-step guide to running the generator and what to expect.
• Project Structure: A description of how the project will be structured once the generator completes the setup.
• Contributing: Instructions for anyone interested in contributing to the project.
• License: Includes a standard MIT license. You can adjust it if needed.

Feel free to adjust any details as per your specific use case. This should serve as a comprehensive guide for users of the fullstack-init package!