create-revo 2.0.0 → 2.0.2

package/README.md

@@ -1,24 +1,35 @@
-# Revo - Fast & Efficient React Project Setup
+# revo
 
-**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
 ```
 
@@ -73,17 +92,19 @@ npm run preview
 
 ## 🌟 Feedback & Support
 
-If you like Revo or have suggestions for improvement, let me know!
+If you like revo or have suggestions for improvement, let me know!
 You can reach out to me on [Twitter](https://twitter.com/MaybeTarun).
 
-Happy coding with Revo! 🎉
+Happy coding with revo! 🎉
 
 ---
 
 ## 🙏 Credits
 
-Revo is built on top of amazing open-source tools. A big shoutout to:  
+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.2",
   "description": "Project setup tool for ReactJS and NextJS",
   "main": "cli.js",
   "bin": {

package/template-nextjs/public/revo.svg

@@ -0,0 +1,4 @@
+<svg width="500" height="500" viewBox="0 0 500 500" fill="none" xmlns="http://www.w3.org/2000/svg">
+<circle cx="250" cy="250" r="225" fill="#EFF0EF" stroke="#2D2A32" stroke-width="50"/>
+<path d="M247 347L362.5 222.5M362.5 222.5H265M362.5 222.5V317.5" stroke="#2D2A32" stroke-width="50" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

package/template-nextjs/src/app/layout.tsx

@@ -13,8 +13,8 @@ const geistMono = Geist_Mono({
 });
 
 export const metadata: Metadata = {
-  title: "Revo",
-  description: "Generated by Revo",
+  title: "revo",
+  description: "Generated by revo",
 };
 
 export default function RootLayout({

package/template-nextjs/src/app/page.tsx

@@ -2,21 +2,23 @@ import Image from 'next/image';
 
 export default function Home() {
   return (
-    <div className="bg-black w-screen h-screen flex flex-col justify-center items-center select-none">
+    <div className="bg-[#EFF0EF] w-screen h-screen flex flex-col justify-center items-center select-none">
       <div className="flex flex-col items-center space-y-2">
-        <Image 
-          src="/revo.png" 
-          alt="Revo" 
-          width={160}
-          height={160}
-          className="w-32 h-32 md:w-40 md:h-40 transition-transform duration-300 hover:scale-105"
-          priority
-        />
-        <h1 className="text-white text-4xl md:text-6xl font-bold tracking-wider">
-          Revo
-        </h1>
-        <p className="text-gray-400 text-lg md:text-xl text-center max-w-md">
-          Your project is ready to go
+        <div className="flex justify-center items-center space-x-4">
+          <Image 
+            src="/revo.svg" 
+            alt="revo" 
+            width={128}
+            height={128}
+            className="w-32 h-32 md:w-32 md:h-32"
+            priority
+          />
+          <h1 className="text-[#2D2A32] text-6xl md:text-[10rem] font-semibold leading-none -mt-10">
+            revo
+          </h1>
+        </div>
+        <p className="text-[#2D2A32] text-base md:text-lg uppercase text-center max-w-md">
+          your project is ready to go
         </p>
       </div>
     </div>

package/template-reactjs/index.html

@@ -4,7 +4,7 @@
     <meta charset="UTF-8" />
     <link rel="icon" type="image/x-icon" href="/favicon.ico" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Revo</title>
+    <title>revo</title>
     <meta name="author" content="Tarun Gupta" />
     <!-- <meta name="keywords" content="" /> -->
     <!-- <meta name="description" content=""/> -->

package/template-reactjs/src/App.tsx

@@ -2,18 +2,20 @@ import revo from './assets/revo.svg';
 
 function App() {
   return (
-    <div className="bg-black w-screen h-screen flex flex-col justify-center items-center select-none">
+    <div className="bg-[#EFF0EF] w-screen h-screen flex flex-col justify-center items-center select-none">
       <div className="flex flex-col items-center space-y-2">
-        <img 
-          src={revo} 
-          alt="Revo" 
-          className="w-32 h-32 md:w-40 md:h-40 transition-transform duration-300 hover:scale-105" 
-        />
-        <h1 className="text-white text-4xl md:text-6xl font-bold tracking-wider">
-          Revo
-        </h1>
-        <p className="text-gray-400 text-lg md:text-xl text-center max-w-md">
-          Your project is ready to go
+        <div className="flex justify-center items-center space-x-4">
+          <img 
+            src={revo} 
+            alt="revo" 
+            className="w-32 h-32 md:w-32 md:h-32" 
+          />
+          <h1 className="text-[#2D2A32] text-6xl md:text-[10rem] font-semibold leading-none -mt-10">
+            revo
+          </h1>
+        </div>
+        <p className="text-[#2D2A32] text-base md:text-lg uppercase text-center max-w-md">
+          your project is ready to go
         </p>
       </div>
     </div>

package/template-reactjs/src/assets/revo.svg

@@ -0,0 +1,4 @@
+<svg width="500" height="500" viewBox="0 0 500 500" fill="none" xmlns="http://www.w3.org/2000/svg">
+<circle cx="250" cy="250" r="225" fill="#EFF0EF" stroke="#2D2A32" stroke-width="50"/>
+<path d="M247 347L362.5 222.5M362.5 222.5H265M362.5 222.5V317.5" stroke="#2D2A32" stroke-width="50" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

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 test.
+
+## 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;