@imksh/create 1.0.23 → 1.0.25

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@imksh/create",
-  "version": "1.0.23",
+  "version": "1.0.25",
   "description": "A production-ready create for scaffolding modern applications.",
   "type": "module",
   "bin": {

package/src/utils/copyTemplate.js

@@ -33,4 +33,10 @@ export async function copyTemplate(templateName, targetDir, projectName) {
   if (fs.existsSync(gitignorePath)) {
     await fs.rename(gitignorePath, path.join(targetDir, '.gitignore'));
   }
+
+  // Copy .env.example to .env if it exists
+  const envExamplePath = path.join(targetDir, '.env.example');
+  if (fs.existsSync(envExamplePath)) {
+    await fs.copy(envExamplePath, path.join(targetDir, '.env'));
+  }
 }

package/templates/mern-react-native/client/src/vite-env.d.ts

@@ -0,0 +1 @@
+/// <reference types="vite/client" />

package/templates/mern-react-native/mobile/babel.config.js

@@ -6,6 +6,7 @@ module.exports = function (api) {
       "nativewind/babel",
     ],
     plugins: [
+      ["inline-import", { "extensions": [".sql"] }],
       "react-native-reanimated/plugin" 
     ],
   };

package/templates/mern-react-native/mobile/drizzle.config.ts

@@ -0,0 +1,8 @@
+import type { Config } from 'drizzle-kit';
+
+export default {
+  schema: './src/db/schema.ts',
+  out: './drizzle',
+  dialect: 'sqlite',
+  driver: 'expo',
+} satisfies Config;

package/templates/mern-react-native/mobile/expo-env.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="expo/types" />
+
+// NOTE: This file should not be edited and should be in your git ignore

package/templates/mern-react-native/mobile/package.json

@@ -11,6 +11,7 @@
     "@react-navigation/bottom-tabs": "^7.18.10",
     "axios": "^1.18.1",
     "babel-preset-expo": "^57.0.3",
+    "drizzle-orm": "^0.45.2",
     "expo": "~57.0.7",
     "expo-blur": "~57.0.2",
     "expo-constants": "~57.0.6",
@@ -18,10 +19,12 @@
     "expo-font": "~57.0.1",
     "expo-glass-effect": "~57.0.1",
     "expo-image": "~57.0.1",
+    "expo-linear-gradient": "^57.0.1",
     "expo-linking": "~57.0.3",
     "expo-notifications": "~57.0.6",
     "expo-router": "~57.0.7",
     "expo-splash-screen": "~57.0.4",
+    "expo-sqlite": "^57.0.1",
     "expo-status-bar": "~57.0.1",
     "expo-symbols": "~57.0.1",
     "expo-system-ui": "~57.0.1",
@@ -45,11 +48,14 @@
     "react-native-toast-message": "^2.4.0",
     "react-native-web": "~0.21.0",
     "react-native-worklets": "0.10.0",
+    "socket.io-client": "^4.8.3",
     "tailwindcss": "^3.4.19",
     "zustand": "^5.0.14"
   },
   "devDependencies": {
     "@types/react": "~19.2.2",
+    "babel-plugin-inline-import": "^3.0.0",
+    "drizzle-kit": "^0.31.10",
     "eslint": "^9.0.0",
     "eslint-config-expo": "~57.0.0",
     "typescript": "~6.0.3"

package/templates/mern-react-native/mobile/src/app/(auth)/_layout.tsx

@@ -0,0 +1,12 @@
+import { Stack } from 'expo-router';
+
+export default function AuthLayout() {
+  return (
+    <Stack screenOptions={{ headerShown: false }}>
+      <Stack.Screen name="login" />
+      <Stack.Screen name="forgot-password" />
+      <Stack.Screen name="edit-profile" options={{ presentation: 'modal' }} />
+      <Stack.Screen name="change-password" options={{ presentation: 'modal' }} />
+    </Stack>
+  );
+}

package/templates/mern-react-native/mobile/src/app/(auth)/change-password.tsx

@@ -0,0 +1,112 @@
+import React, { useState , useCallback } from "react";
+import { View } from "react-native";
+import { useAuthStore } from "../../store/useAuthStore";
+import { Txt } from "../../components/common/Typography";
+import { router, useFocusEffect } from "expo-router";
+import ScrollContainer from "../../components/ui/layout/ScrollContainer";
+import Input from "../../components/ui/inputs/Input";
+import Button from "../../components/ui/buttons/Button";
+import ScreenHeader from "@/components/common/ScreenHeader";
+
+export default function ChangePasswordScreen() {
+  const { changePassword, loading, error, clearError } = useAuthStore();
+
+  useFocusEffect(
+    useCallback(() => {
+      return () => clearError();
+    }, [clearError])
+  );
+
+  const [oldPassword, setOldPassword] = useState("");
+  const [newPassword, setNewPassword] = useState("");
+  const [confirmPassword, setConfirmPassword] = useState("");
+
+  const [showOldPassword, setShowOldPassword] = useState(false);
+  const [showNewPassword, setShowNewPassword] = useState(false);
+  const [showConfirmPassword, setShowConfirmPassword] = useState(false);
+
+  const [validationError, setValidationError] = useState("");
+
+  const handleSave = async () => {
+    setValidationError("");
+    if (!oldPassword || !newPassword || !confirmPassword) {
+      setValidationError("Please fill all fields");
+      return;
+    }
+
+    if (newPassword !== confirmPassword) {
+      setValidationError("New passwords do not match");
+      return;
+    }
+
+    const success = await changePassword(oldPassword, newPassword);
+    if (success) {
+      router.back();
+    }
+  };
+
+  return (
+    <>
+      <ScreenHeader title="Change Password" />
+      <ScrollContainer
+        contentContainerStyle={{
+          flexGrow: 1,
+          padding: 16,
+        }}
+        className="bg-base-100"
+      >
+        {error || validationError ? (
+          <View className="bg-error/10 border border-error/20 rounded-2xl p-3 mb-4">
+            <Txt variant="md" className="text-error text-xs text-center">
+              ⚠️ {validationError || error}
+            </Txt>
+          </View>
+        ) : null}
+
+        <View className="gap-4">
+          <Input
+            leftIcon="lock-closed"
+            rightIcon={showOldPassword ? "eye-off" : "eye"}
+            onRightIconPress={() => setShowOldPassword(!showOldPassword)}
+            placeholder="Current Password"
+            value={oldPassword}
+            onChangeText={setOldPassword}
+            secureTextEntry={!showOldPassword}
+          />
+
+          <Input
+            leftIcon="key"
+            rightIcon={showNewPassword ? "eye-off" : "eye"}
+            onRightIconPress={() => setShowNewPassword(!showNewPassword)}
+            placeholder="New Password"
+            value={newPassword}
+            onChangeText={setNewPassword}
+            secureTextEntry={!showNewPassword}
+          />
+
+          <Input
+            leftIcon="checkmark-circle"
+            rightIcon={showConfirmPassword ? "eye-off" : "eye"}
+            onRightIconPress={() =>
+              setShowConfirmPassword(!showConfirmPassword)
+            }
+            placeholder="Confirm New Password"
+            value={confirmPassword}
+            onChangeText={setConfirmPassword}
+            secureTextEntry={!showConfirmPassword}
+          />
+
+          <View className="mt-4">
+            <Button
+              label="Update Password"
+              onPress={handleSave}
+              isLoading={loading}
+              variant="primary"
+              isFullWidth
+            />
+          </View>
+        </View>
+      </ScrollContainer>
+    </>
+  );
+}

package/templates/mern-react-native/mobile/src/app/(auth)/edit-profile.tsx

@@ -0,0 +1,160 @@
+import React, { useState , useCallback } from "react";
+import { View, TouchableOpacity } from "react-native";
+import { useAuthStore } from "../../store/useAuthStore";
+import { Txt } from "../../components/common/Typography";
+import { router, useFocusEffect } from "expo-router";
+import * as ImagePicker from "expo-image-picker";
+import { Ionicons } from "@expo/vector-icons";
+import Avatar from "../../components/ui/data-display/Avatar";
+
+import ScrollContainer from "../../components/ui/layout/ScrollContainer";
+import Input from "../../components/ui/inputs/Input";
+import Button from "../../components/ui/buttons/Button";
+import ScreenHeader from "@/components/common/ScreenHeader";
+import { toast } from "@/utils/toast";
+import { authService } from "@/services/auth.service";
+
+export default function EditProfileScreen() {
+  const { user, error, setUser, clearError } = useAuthStore();
+  const [loading, setLoading] = useState(false);
+
+  useFocusEffect(
+    useCallback(() => {
+      return () => clearError();
+    }, [clearError])
+  );
+
+  const [name, setName] = useState(user?.name || "");
+  const [phone, setPhone] = useState(user?.phone || "");
+  const [avatarUri, setAvatarUri] = useState<string | null>(null);
+
+  const pickImage = async () => {
+    const result = await ImagePicker.launchImageLibraryAsync({
+      mediaTypes: ImagePicker.MediaTypeOptions.Images,
+      allowsEditing: true,
+      aspect: [1, 1],
+      quality: 0.8,
+    });
+
+    if (!result.canceled && result.assets[0]) {
+      setAvatarUri(result.assets[0].uri);
+    }
+  };
+
+  const handleSave = async () => {
+    const formData = new FormData();
+    try {
+      setLoading(true);
+      if (name !== user?.name) formData.append("name", name);
+      if (phone !== user?.phone) formData.append("phone", phone);
+
+      if (avatarUri) {
+        const filename = avatarUri.split("/").pop() || "avatar.jpg";
+        const match = /\.(\w+)$/.exec(filename);
+        const type = match ? `image/${match[1]}` : `image`;
+
+        formData.append("file", {
+          uri: avatarUri,
+          name: filename,
+          type,
+        } as any);
+      }
+
+      // Only update if something changed
+      if (
+        (formData as any).getParts &&
+        (formData as any).getParts().length === 0
+      ) {
+        router.back();
+        return;
+      }
+
+      const res = await authService.updateMe(formData);
+      if (res.data.success) {
+        setUser(res.data.data);
+        toast.success("Profile updated successfully");
+        router.back();
+      } else {
+        toast.error(res.data.message);
+      }
+
+      console.log(res.data.data);
+    } catch (error: any) {
+      toast.error(error.response?.data?.message || error.message);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  return (
+    <>
+      <ScreenHeader title="Edit Profile" />
+      <ScrollContainer
+        contentContainerStyle={{
+          flexGrow: 1,
+          padding: 16,
+        }}
+        className="bg-base-100"
+      >
+        <View className="items-center mb-8">
+          <View className="relative">
+            <View className="w-28 h-28 rounded-full items-center justify-center border-4 border-base-100 shadow-sm shadow-base-content/20 overflow-hidden">
+              {avatarUri ? (
+                <Avatar url={avatarUri} size={104} />
+              ) : (
+                <Avatar
+                  url={
+                    user?.avatar?.url ||
+                    `https://placehold.co/600x400?text=${user?.name?.charAt(0).toUpperCase() || "U"}`
+                  }
+                  size={104}
+                />
+              )}
+            </View>
+            <TouchableOpacity
+              onPress={pickImage}
+              className="absolute bottom-0 right-0 bg-primary p-2 rounded-full border-2 border-base-100"
+            >
+              <Ionicons name="camera" size={18} color="#fff" />
+            </TouchableOpacity>
+          </View>
+        </View>
+
+        {error ? (
+          <View className="bg-error/10 border border-error/20 rounded-2xl p-3 mb-4">
+            <Txt variant="md" className="text-error text-xs text-center">
+              ⚠️ {error}
+            </Txt>
+          </View>
+        ) : null}
+
+        <View className="gap-4">
+          <Input
+            leftIcon="person"
+            placeholder="Full name"
+            value={name}
+            onChangeText={setName}
+          />
+
+          <Input
+            leftIcon="call"
+            placeholder="Phone number"
+            value={phone}
+            onChangeText={setPhone}
+            keyboardType="phone-pad"
+          />
+
+          <View className="mt-4">
+            <Button
+              label="Save Changes"
+              onPress={handleSave}
+              isLoading={loading}
+              variant="primary"
+              isFullWidth
+            />
+          </View>
+        </View>
+      </ScrollContainer>
+    </>
+  );
+}

package/templates/mern-react-native/mobile/src/app/(auth)/forgot-password.tsx

@@ -0,0 +1,191 @@
+import React, { useState, useEffect , useCallback } from "react";
+import { View } from "react-native";
+import { useAuthStore } from "../../store/useAuthStore";
+import { Txt } from "../../components/common/Typography";
+import { router, useFocusEffect } from "expo-router";
+import ScrollContainer from "../../components/ui/layout/ScrollContainer";
+import Input from "../../components/ui/inputs/Input";
+import Button from "../../components/ui/buttons/Button";
+
+export default function ForgotPasswordScreen() {
+  const { genOtp, verifyOtp, resetPassword, loading, error, clearError } = useAuthStore();
+  const [step, setStep] = useState<"email" | "otp" | "password">("email");
+
+  useFocusEffect(
+    useCallback(() => {
+      return () => clearError();
+    }, [clearError])
+  );
+
+  const [email, setEmail] = useState("");
+  const [otp, setOtp] = useState("");
+  const [newPassword, setNewPassword] = useState("");
+  const [showPassword, setShowPassword] = useState(false);
+
+  const [timer, setTimer] = useState(0);
+
+  useEffect(() => {
+    let interval: ReturnType<typeof setInterval>;
+    if (timer > 0) {
+      interval = setInterval(() => {
+        setTimer((prev) => prev - 1);
+      }, 1000);
+    }
+    return () => clearInterval(interval);
+  }, [timer]);
+
+  const handleSendOtp = async () => {
+    if (!email) return;
+    const success = await genOtp(email);
+    if (success) {
+      setStep("otp");
+      setTimer(60);
+    }
+  };
+
+  const handleVerifyOtp = async () => {
+    if (!otp) return;
+    const success = await verifyOtp(email, otp);
+    if (success) {
+      setStep("password");
+    }
+  };
+
+  const handleResetPassword = async () => {
+    if (!newPassword) return;
+    const success = await resetPassword(newPassword);
+    if (success) {
+      router.replace("/(auth)/login");
+    }
+  };
+
+  return (
+    <ScrollContainer
+      contentContainerStyle={{
+        flexGrow: 1,
+        justifyContent: "center",
+        padding: 16,
+      }}
+      className="bg-base-100"
+    >
+      <View className="w-full p-6">
+        <View className="items-center mb-8 w-full">
+          <Txt variant="xl" className="text-2xl mb-1 text-center">
+            {step === "email" && "Forgot Password"}
+            {step === "otp" && "Verify Email"}
+            {step === "password" && "Reset Password"}
+          </Txt>
+          <Txt
+            variant="sm"
+            className="text-xs text-base-content/50 text-center px-2"
+          >
+            {step === "email" && "Enter your email to receive an OTP"}
+            {step === "otp" && `Enter the OTP sent to ${email}`}
+            {step === "password" && "Enter your new password"}
+          </Txt>
+        </View>
+
+        {error ? (
+          <View className="bg-error/10 border border-error/20 rounded-2xl p-3 mb-4">
+            <Txt variant="md" className="text-error text-xs text-center">
+              ⚠️ {error}
+            </Txt>
+          </View>
+        ) : null}
+
+        <View className="gap-2">
+          {step === "email" && (
+            <>
+              <Input
+                leftIcon="mail"
+                placeholder="Email address"
+                value={email}
+                onChangeText={setEmail}
+                autoCapitalize="none"
+                keyboardType="email-address"
+              />
+              <View className="mt-2">
+                <Button
+                  label="Send OTP →"
+                  onPress={handleSendOtp}
+                  isLoading={loading}
+                  variant="primary"
+                  isFullWidth
+                />
+              </View>
+            </>
+          )}
+
+          {step === "otp" && (
+            <>
+              <Input
+                leftIcon="key"
+                placeholder="Enter OTP"
+                value={otp}
+                onChangeText={setOtp}
+                keyboardType="numeric"
+              />
+              <View className="mt-2">
+                <Button
+                  label="Verify OTP →"
+                  onPress={handleVerifyOtp}
+                  isLoading={loading}
+                  variant="primary"
+                  isFullWidth
+                />
+              </View>
+              <View className="mt-4">
+                <Button
+                  label={timer > 0 ? `Resend OTP in ${timer}s` : "Resend OTP"}
+                  onPress={handleSendOtp}
+                  disabled={timer > 0 || loading}
+                  variant="outline"
+                  isFullWidth
+                />
+              </View>
+            </>
+          )}
+
+          {step === "password" && (
+            <>
+              <Input
+                leftIcon="lock-closed"
+                rightIcon={showPassword ? "eye-off" : "eye"}
+                onRightIconPress={() => setShowPassword(!showPassword)}
+                placeholder="New Password"
+                value={newPassword}
+                onChangeText={setNewPassword}
+                secureTextEntry={!showPassword}
+              />
+              <View className="mt-2">
+                <Button
+                  label="Reset Password →"
+                  onPress={handleResetPassword}
+                  isLoading={loading}
+                  variant="primary"
+                  isFullWidth
+                />
+              </View>
+            </>
+          )}
+        </View>
+
+        <View className="mt-8">
+          <Txt
+            variant="sm"
+            className="text-sm text-base-content/50 text-center"
+          >
+            Remember your password?{" "}
+            <Txt
+              variant="md"
+              className="text-primary text-sm"
+              onPress={() => router.push("/(auth)/login")}
+            >
+              Sign in
+            </Txt>
+          </Txt>
+        </View>
+      </View>
+    </ScrollContainer>
+  );
+}