create-revo 2.0.0 → 2.0.1

package/README.md

@@ -1,24 +1,35 @@
-# Revo - Fast & Efficient React Project Setup
+# Revo - Fast & Efficient React & Next.js Project Setup
 
-**Revo** is a custom React project setup tool built on top of Vite. It’s designed to streamline your workflow by providing a clean project structure, pre-configured with **Tailwind CSS** and **Framer Motion**, so you can focus on building amazing applications.
+**Revo** is a modern project setup tool that supports both **React** and **Next.js** projects. It's designed to streamline your workflow by providing clean project structures, pre-configured with **TypeScript** and **Tailwind CSS**, so you can focus on building amazing applications.
 
 ---
 
 ## 🚀 Features
 
-- **Powered by Vite**: Enjoy blazing-fast builds and an optimized development experience.
-- **Tailwind CSS**: Fully configured for utility-first styling right out of the box.
-- **Framer Motion**: Pre-installed for creating stunning animations with ease.
-- **Better Project Layout**: Thoughtfully organized file structure to keep your code clean and maintainable.
+- **Two Framework Options**: Choose between React (Vite) or Next.js
+- **TypeScript Ready**: Pre-configured TypeScript for type safety
+- **Tailwind CSS**: Fully configured for utility-first styling right out of the box
+- **Latest Dependencies**: Always uses the latest versions of all packages
+- **Interactive Setup**: Simple CLI with progress indicators
+- **Clean Project Structure**: Thoughtfully organized file structure for maintainable code
 
 ---
 
 ## 📦 What You Get
 
-1. **Pre-configured Tailwind CSS** for styling.
-2. **Framer Motion** set up for animations.
-3. **Optimized Vite setup** for fast development and builds.
-4. A clean project directory structure:
+### React Template (Vite)
+1. **React 18** with TypeScript
+2. **Vite** for lightning-fast development
+3. **Tailwind CSS** for styling
+4. **ESLint** for code quality
+5. **Motion** for animations
+
+### Next.js Template
+1. **Next.js 15** with App Router
+2. **TypeScript** for type safety
+3. **Tailwind CSS** for styling
+4. **ESLint** for code quality
+5. **Optimized** for production
 
 ---
 
@@ -28,21 +39,29 @@
 Make sure you have Node.js (>=14.x) and npm/yarn installed.
 
 ### Create a New Project
-Run the following command to create a new project:
 
+**Option 1: With project name**
+```bash
+npx create-revo my-awesome-project
 ```
-npx create-revo [project-name]
+
+**Option 2: Interactive mode (will prompt for project name)**
+```bash
+npx create-revo
 ```
 
-### Navigate to Your Project
+### Choose Your Template
+You'll be prompted to choose between:
+1. **React.js** - Vite + TypeScript + Tailwind CSS
+2. **Next.js** - App Router + TypeScript + Tailwind CSS
 
-```
+### Navigate to Your Project
+```bash
 cd [project-name]
 ```
 
 ### Install Dependencies
-
-```
+```bash
 npm install
 ```
 
@@ -84,6 +103,8 @@ Happy coding with Revo! 🎉
 
 Revo is built on top of amazing open-source tools. A big shoutout to:  
 
-- [Vite](https://vitejs.dev/) - The lightning-fast frontend build tool.  
-- [Tailwind CSS](https://tailwindcss.com/) - Utility-first CSS framework for rapid UI development.  
-- [Framer Motion](https://www.framer.com/motion/) - The library for creating smooth and delightful animations.
+- [React](https://react.dev/) - The library for building user interfaces
+- [Next.js](https://nextjs.org/) - The React framework for production
+- [Vite](https://vitejs.dev/) - The lightning-fast frontend build tool
+- [Tailwind CSS](https://tailwindcss.com/) - Utility-first CSS framework for rapid UI development
+- [TypeScript](https://www.typescriptlang.org/) - Typed JavaScript at any scale

package/cli.js

@@ -64,6 +64,20 @@ function replacePlaceholders(content, placeholderValues) {
   return content;
 }
 
+function updateProgress(percentage, message) {
+  const barLength = 20;
+  const filledLength = Math.round((percentage / 100) * barLength);
+  const bar = '█'.repeat(filledLength) + '░'.repeat(barLength - filledLength);
+  
+  // Clear the current line and move cursor to beginning
+  process.stdout.write('\r\x1b[K');
+  process.stdout.write(`[${bar}] ${percentage}% - ${message}`);
+  
+  if (percentage === 100) {
+    process.stdout.write('\n');
+  }
+}
+
 function copyTemplateFiles(templateType, projectName, targetDir) {
   const templateDir = path.join(__dirname, `template-${templateType}`);
 
@@ -73,14 +87,27 @@ function copyTemplateFiles(templateType, projectName, targetDir) {
     process.exit(1);
   }
 
+  console.log("\nSetting up project...");
+  
+  // Step 1: Create directory
+  updateProgress(10, "Creating project directory...");
   fs.mkdirSync(targetDir, { recursive: true });
 
+  // Step 2: Copy template files
+  updateProgress(30, "Copying template files...");
   copyRecursive(templateDir, targetDir);
 
+  // Step 3: Replace placeholders
+  updateProgress(60, "Configuring project files...");
   replacePlaceholdersInDirectory(targetDir, { projectName });
   
-  // Create .gitignore file
+  // Step 4: Create .gitignore file
+  updateProgress(80, "Creating .gitignore file...");
   createGitignoreFile(targetDir);
+
+  // Step 5: Finalizing
+  updateProgress(100, "Project setup complete!");
+  console.log(""); // New line after progress
 }
 
 function createGitignoreFile(projectDir) {
@@ -140,6 +167,11 @@ function copyRecursive(source, target) {
       const files = fs.readdirSync(source);
       
       for (const file of files) {
+        // Skip node_modules and other system directories
+        if (file === 'node_modules' || file === '.git' || file === 'dist' || file === 'build' || file === '.next') {
+          continue;
+        }
+        
         const sourcePath = path.join(source, file);
         const targetPath = path.join(target, file);
         copyRecursive(sourcePath, targetPath);
@@ -168,6 +200,11 @@ function replacePlaceholdersInDirectory(directory, placeholderValues) {
     for (const file of files) {
       const filePath = path.join(directory, file);
       
+      // Skip node_modules and other system directories
+      if (file === 'node_modules' || file === '.git' || file === 'dist' || file === 'build' || file === '.next') {
+        continue;
+      }
+      
       if (fs.statSync(filePath).isDirectory()) {
         replacePlaceholdersInDirectory(filePath, placeholderValues);
       } else {
@@ -252,7 +289,6 @@ async function main() {
     console.log(`Project created successfully at ${finalTargetDir}`);
     process.chdir(finalTargetDir);
     
-    console.log("\nProject setup complete!");
     console.log("\nNext steps:");
     console.log("1. Run: npm install");
     console.log("2. Run: npm run dev");

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "create-revo",
-  "version": "2.0.0",
+  "version": "2.0.1",
   "description": "Project setup tool for ReactJS and NextJS",
   "main": "cli.js",
   "bin": {

package/test/README.md

@@ -0,0 +1,36 @@
+This is a [Next.js](https://nextjs.org) project bootstrapped with [`create-revo`](https://www.npmjs.com/package/create-revo) for {{projectName}}.
+
+## Getting Started
+
+First, run the development server:
+
+```bash
+npm run dev
+# or
+yarn dev
+# or
+pnpm dev
+# or
+bun dev
+```
+
+Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
+
+You can start editing the page by modifying `app/page.tsx`. The page auto-updates as you edit the file.
+
+This project uses [`next/font`](https://nextjs.org/docs/app/building-your-application/optimizing/fonts) to automatically optimize and load [Geist](https://vercel.com/font), a new font family for Vercel.
+
+## Learn More
+
+To learn more about Next.js, take a look at the following resources:
+
+- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
+- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
+
+You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js) - your feedback and contributions are welcome!
+
+## Deploy on Vercel
+
+The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.
+
+Check out our [Next.js deployment documentation](https://nextjs.org/docs/app/building-your-application/deploying) for more details.

package/test/eslint.config.mjs

@@ -0,0 +1,25 @@
+import { dirname } from "path";
+import { fileURLToPath } from "url";
+import { FlatCompat } from "@eslint/eslintrc";
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = dirname(__filename);
+
+const compat = new FlatCompat({
+  baseDirectory: __dirname,
+});
+
+const eslintConfig = [
+  ...compat.extends("next/core-web-vitals", "next/typescript"),
+  {
+    ignores: [
+      "node_modules/**",
+      ".next/**",
+      "out/**",
+      "build/**",
+      "next-env.d.ts",
+    ],
+  },
+];
+
+export default eslintConfig;

package/test/next.config.ts

@@ -0,0 +1,7 @@
+import type { NextConfig } from "next";
+
+const nextConfig: NextConfig = {
+  /* config options here */
+};
+
+export default nextConfig;