AtomKit — Project Scaffolder

🚀Getting Started ⬡Atomic Design ⚡React Query

🚀

Getting Started

Scaffold, download, install, and run your project

AtomKit generates a production-ready project as a downloadable zip file. Configure your stack, hit create, and you'll get a zip containing a complete project with all the boilerplate files — ready to install and run.

📦The zip includes package.json with all dependencies listed. You need to run npm install after extracting to download the actual packages.

Step 1 — Configure Your Project

On the home page, fill in the project form:

✦

Project Name — Lowercase letters, numbers, and hyphens. Must start with a letter.

✦

Framework — Next.js (App Router) or React (Vite).

✦

Language — JavaScript (JSX) or TypeScript (TSX).

✦

Tailwind CSS — Toggle to include Tailwind CSS with PostCSS config.

✦

React Query — Toggle to include the full 5-layer data architecture.

Step 2 — Download the Zip

Click Create Project. A zip file will automatically download to your browser's default downloads folder.

Step 3 — Extract and Install

Extract the zip, navigate into the project folder, and install dependencies:

📄Terminal

# Extract the zip (or double-click it on macOS/Windows)
unzip my-project.zip

# Navigate into the project
cd my-project

# Install dependencies
npm install

Step 4 — Run the Dev Server

📄Next.js

npm run dev
# → http://localhost:3000

📄React (Vite)

npm run dev
# → http://localhost:5173

What's in the Zip

The generated project includes everything you need to start building:

📄Next.js project structure

my-project/
├── package.json            ← dependencies (run npm install)
├── next.config.mjs
├── jsconfig.json           ← @/* path alias
├── eslint.config.mjs
├── postcss.config.mjs      ← (if Tailwind enabled)
├── .gitignore
├── public/
└── src/
    ├── app/
    │   ├── layout.jsx
    │   ├── page.jsx
    │   ├── globals.css
    │   └── items/          ← (if React Query enabled)
    │       └── page.jsx
    ├── common/             ← (if React Query enabled)
    ├── repositories/
    ├── providers/
    ├── queries/
    ├── controller/
    └── components/
        ├── atoms/
        ├── molecules/
        ├── organisms/
        ├── templates/
        └── pages/

📄React (Vite) project structure

my-project/
├── package.json            ← dependencies (run npm install)
├── vite.config.js
├── index.html
├── tailwind.config.js      ← (if Tailwind enabled)
├── postcss.config.js       ← (if Tailwind enabled)
├── .gitignore
├── public/
└── src/
    ├── main.jsx
    ├── App.jsx
    ├── index.css
    ├── pages/              ← (if React Query enabled)
    ├── common/
    ├── repositories/
    ├── providers/
    ├── queries/
    ├── controller/
    └── components/
        ├── atoms/
        ├── molecules/
        ├── organisms/
        ├── templates/
        └── pages/

📖Check the Atomic Design guide to learn about the component folder structure, and the React Query guide to understand the 5-layer data architecture.