@aditokmo/create-react-project 0.2.0

package/templates/router/react-router/src/modules/auth/routes/index.tsx

@@ -0,0 +1,21 @@
+import { Login, Register, ForgotPassword } from '../pages';
+
+export const authRoutes = [
+    {
+        children: [
+            {
+                path: 'login',
+                element: <Login />
+            },
+            {
+                path: 'register',
+                element: <Register />
+            },
+            {
+                path: 'forgot-password',
+                element: <ForgotPassword />
+            }
+            // Edit or Add routes as needed
+        ]
+    }
+]

package/templates/router/react-router/src/routes/AppRoutes.tsx

@@ -0,0 +1,18 @@
+import { authRoutes } from '@/modules/auth/routes';
+import { NotFound } from '@/modules/common/pages';
+import { useRoutes } from 'react-router-dom';
+
+// Exaxmple: Import feature routes here
+// import { dashboardRoutes } from '@/features/dashboard/routes';
+
+export function AppRoutes() {
+    return useRoutes([
+        // Spread feature routes here
+        ...authRoutes,
+        {
+            path: '*',
+            element: <NotFound />
+        }
+        // ...dashboardRoutes,
+    ]);
+}

package/templates/router/react-router/src/routes/index.ts

@@ -0,0 +1,3 @@
+export * from './AppRoutes';
+export * from '../components/ProtectedRoute';
+export * from '../components/PublicRoute';

package/templates/router/tanstack-router/src/providers/TanstackRouterProvider.tsx

@@ -0,0 +1,14 @@
+import { RouterProvider, createRouter } from '@tanstack/react-router'
+import { routeTree } from '../routeTree.gen'
+
+const router = createRouter({ routeTree })
+
+declare module '@tanstack/react-router' {
+    interface Register {
+        router: typeof router
+    }
+}
+
+export function TanStackRouterProvider() {
+    return <RouterProvider router={router} />
+}

package/templates/router/tanstack-router/src/routes/__root.tsx

@@ -0,0 +1,13 @@
+import { NotFound } from '@/modules/common/pages';
+import { createRootRoute, Outlet } from '@tanstack/react-router';
+import { TanStackRouterDevtools } from '@tanstack/react-router-devtools';
+
+export const Route = createRootRoute({
+    component: () => (
+        <>
+            <Outlet />
+            <TanStackRouterDevtools />
+        </>
+    ),
+    notFoundComponent: () => <NotFound />,
+});

package/templates/router/tanstack-router/src/routes/_protected/index.tsx

@@ -0,0 +1,10 @@
+import { createFileRoute } from '@tanstack/react-router'
+
+export const Route = createFileRoute('/_protected/')({
+    // Check public files and do the same - this is only template
+    component: RouteComponent,
+})
+
+function RouteComponent() {
+    return <div>Page for authenticated users</div>
+}

package/templates/router/tanstack-router/src/routes/_protected.tsx

@@ -0,0 +1,18 @@
+import { createFileRoute, redirect, Outlet } from '@tanstack/react-router';
+import { useAuthStore } from '@/store';
+
+export const Route = createFileRoute('/_protected')({
+    beforeLoad: ({ location }) => {
+        const isAuthenticated = useAuthStore.getState().isAuthenticated;
+
+        if (!isAuthenticated) {
+            throw redirect({
+                to: '/login',
+                search: {
+                    redirect: location.href,
+                },
+            });
+        }
+    },
+    component: () => <Outlet />,
+});

package/templates/router/tanstack-router/src/routes/_public/forgot-password.tsx

@@ -0,0 +1,6 @@
+import { ForgotPassword } from '@/modules/auth/pages'
+import { createFileRoute } from '@tanstack/react-router'
+
+export const Route = createFileRoute('/_public/forgot-password')({
+    component: () => <ForgotPassword />,
+})

package/templates/router/tanstack-router/src/routes/_public/login.tsx

@@ -0,0 +1,6 @@
+import { Login } from '@/modules/auth/pages'
+import { createFileRoute } from '@tanstack/react-router'
+
+export const Route = createFileRoute('/_public/login')({
+    component: () => <Login />,
+})

package/templates/router/tanstack-router/src/routes/_public/register.tsx

@@ -0,0 +1,6 @@
+import { Register } from '@/modules/auth/pages'
+import { createFileRoute } from '@tanstack/react-router'
+
+export const Route = createFileRoute('/_public/register')({
+    component: () => <Register />,
+})

package/templates/router/tanstack-router/src/routes/_public.tsx

@@ -0,0 +1,13 @@
+import { createFileRoute, redirect, Outlet } from '@tanstack/react-router';
+import { useAuthStore } from '@/store';
+
+export const Route = createFileRoute('/_public')({
+    beforeLoad: () => {
+        const isAuthenticated = useAuthStore.getState().isAuthenticated;
+
+        if (isAuthenticated) {
+            throw redirect({ to: '/' });
+        }
+    },
+    component: () => <Outlet />,
+});

package/templates/state/react-query/src/hook/useAuth.ts

@@ -0,0 +1,43 @@
+import { getAPIErrorMessage } from "@/utils/api-error-handler";
+import { AuthService } from "../services"
+import { useMutation } from '@tanstack/react-query';
+
+export const useAuth = () => {
+    const login = useMutation({
+        mutationFn: AuthService.login,
+        onSuccess: (res) => {
+            // Handle mutation success
+        },
+        onError: (error) => {
+            const errorMessage = getAPIErrorMessage(error);
+            console.error(errorMessage)
+            // Display error message to user
+        },
+    });
+
+    const register = useMutation({
+        mutationFn: AuthService.register,
+        onSuccess: (res) => {
+            // Handle mutation success
+        },
+        onError: (error) => {
+            const errorMessage = getAPIErrorMessage(error);
+            console.error(errorMessage)
+            // Display error message to user
+        },
+    });
+
+    const logout = useMutation({
+        mutationFn: AuthService.logout,
+        onSuccess: (res) => {
+            // Handle mutation success
+        },
+        onError: (error) => {
+            const errorMessage = getAPIErrorMessage(error);
+            console.error(errorMessage)
+            // Display error message to user
+        },
+    });
+
+    return { login, register, logout }
+}

package/templates/state/react-query/src/provider/ReactQueryProvider.tsx

@@ -0,0 +1,22 @@
+import { useState } from "react";
+import { QueryClientProvider, QueryClient } from '@tanstack/react-query';
+import { ReactQueryDevtools } from '@tanstack/react-query-devtools';
+
+export function ReactQueryProvider({ children }: { children: React.ReactNode }) {
+    const [queryClient] = useState(() => new QueryClient({
+        defaultOptions: {
+            queries: {
+                refetchOnWindowFocus: false,
+                retry: 1,
+                staleTime: 5 * 1000,
+            },
+        },
+    }));
+
+    return (
+        <QueryClientProvider client={queryClient}>
+            {children}
+            <ReactQueryDevtools initialIsOpen={false} />
+        </QueryClientProvider>
+    );
+}

package/templates/state/react-query/src/provider/index.ts

@@ -0,0 +1 @@
+export * from './ReactQueryProvider'

package/templates/state/zustand/src/auth/useAuthStore.ts

@@ -0,0 +1,29 @@
+import { create } from 'zustand';
+
+interface User {
+    id: string;
+    email: string;
+    name?: string;
+}
+
+interface AuthState {
+    user: User | null;
+    isAuthenticated: boolean;
+    setAuth: (user: User) => void;
+    clearAuth: () => void;
+}
+
+export const useAuthStore = create<AuthState>((set) => ({
+    user: null,
+    isAuthenticated: false,
+
+    setAuth: (user) => set({
+        user,
+        isAuthenticated: true
+    }),
+
+    clearAuth: () => set({
+        user: null,
+        isAuthenticated: false
+    }),
+}));

package/templates/state/zustand/src/index.ts

@@ -0,0 +1,2 @@
+export * from './theme/useThemeStore';
+export * from './auth/useAuthStore';

package/templates/state/zustand/src/theme/useThemeStore.ts

@@ -0,0 +1,27 @@
+import { create } from 'zustand';
+import { persist, devtools } from 'zustand/middleware';
+
+interface Theme {
+    theme: 'light' | 'dark';
+    setTheme: (theme: 'light' | 'dark') => void;
+    toggleTheme: () => void;
+}
+
+export const useThemeStore = create<Theme>()(
+    devtools(
+        persist((set) => ({
+            theme: 'light',
+            setTheme: (theme) => set({ theme }),
+            toggleTheme: () => set((state) => ({
+                theme: state.theme === 'light' ? 'dark' : 'light'
+            })),
+        }),
+            {
+                name: 'theme'
+            }
+        ),
+        {
+            name: 'ThemeStore'
+        }
+    )
+)

package/templates/styles/css/src/404.css

@@ -0,0 +1,101 @@
+@import "./variables.css";
+
+.not-found-wrapper {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  min-height: 100vh;
+  padding: 20px;
+  text-align: center;
+  font-family: var(--font-main);
+  background: var(--bg-light);
+}
+
+.not-found-content {
+  padding: 100px 70px;
+  background: var(--white);
+  max-width: 700px;
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  border-radius: var(--radius-lg);
+  box-shadow: var(--shadow-main);
+}
+
+.not-found-content span {
+  color: var(--text-muted);
+  font-weight: 700;
+  font-size: 6rem;
+  line-height: 1;
+}
+
+.not-found-content h1 {
+  font-size: 2.5rem;
+  font-weight: 600;
+  margin: 0;
+  color: var(--text-dark);
+}
+
+.not-found-content p {
+  font-size: 1rem;
+  color: var(--text-muted);
+  max-width: 360px;
+  width: 100%;
+  margin: 10px 0;
+}
+
+.not-found-content a {
+  font-size: 0.9rem;
+  color: var(--white);
+  background-color: var(--primary);
+  padding: 10px 30px;
+  margin-top: 20px;
+  border-radius: var(--radius-sm);
+  transition: 0.2s;
+  cursor: pointer;
+  text-decoration: none;
+  display: inline-block;
+}
+
+.not-found-content a:hover {
+  background: var(--primary-hover);
+}
+
+@media (max-width: 768px) {
+  .not-found-content {
+    padding: 60px 40px;
+    max-width: 90%;
+  }
+  .not-found-content span {
+    font-size: 4.5rem;
+    margin-bottom: 20px;
+  }
+  .not-found-content h1 {
+    font-size: 2rem;
+  }
+}
+
+@media (max-width: 480px) {
+  .not-found-content {
+    padding: 40px 20px;
+    border-radius: var(--radius-md);
+  }
+  .not-found-content span {
+    font-size: 3.5rem;
+    margin-bottom: 20px;
+  }
+  .not-found-content h1 {
+    font-size: 1.5rem;
+  }
+  .not-found-content p {
+    font-size: 0.9rem;
+  }
+  .not-found-content a {
+    width: 100%;
+    box-sizing: border-box;
+    text-align: center;
+  }
+}

package/templates/styles/css/src/main.css

@@ -0,0 +1,70 @@
+@import "./variables.css";
+
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+html {
+  scroll-behavior: smooth;
+}
+
+body {
+  font-family: var(--font-main);
+  background-color: var(--white);
+  color: var(--text-dark);
+  line-height: 1.6;
+  min-height: 100vh;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  color: var(--text-dark);
+  font-weight: 600;
+  line-height: 1.2;
+}
+
+p {
+  color: var(--text-muted);
+}
+
+.container {
+  width: 100%;
+  max-width: 1200px;
+  margin: 0 auto;
+  padding: 0 20px;
+}
+
+.flex-center {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+a {
+  text-decoration: none;
+  color: var(--primary);
+  transition: 0.3s ease;
+}
+
+a:hover {
+  color: var(--primary-hover);
+}
+
+button {
+  font-family: inherit;
+  cursor: pointer;
+}
+
+img {
+  max-width: 100%;
+  height: auto;
+  display: block;
+}

package/templates/styles/css/src/variables.css

@@ -0,0 +1,15 @@
+:root {
+  --primary: #37538a;
+  --primary-hover: #263c67;
+  --bg-light: #e6edfc;
+  --white: #ffffff;
+  --text-dark: #111111;
+  --text-muted: #666666;
+
+  --font-main: "Arial", sans-serif;
+
+  --shadow-main: 0px 0px 14px -14px rgba(0, 0, 0, 0.75);
+  --radius-lg: 24px;
+  --radius-md: 16px;
+  --radius-sm: 10px;
+}

package/templates/styles/scss/src/404.scss

@@ -0,0 +1,103 @@
+@use "./index.scss" as *;
+
+.not-found-wrapper {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  min-height: 100vh;
+  padding: 20px;
+  text-align: center;
+  font-family: $font-main;
+  background: $bg-light;
+
+  .not-found-content {
+    padding: 100px 70px;
+    background: $white;
+    max-width: 700px;
+    width: 100%;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    border-radius: $radius-lg;
+    box-shadow: $shadow-main;
+
+    span {
+      color: $text-muted;
+      font-weight: 700;
+      font-size: 6rem;
+      line-height: 1;
+    }
+
+    h1 {
+      font-size: 2.5rem;
+      font-weight: 600;
+      margin: 0;
+      color: $text-dark;
+    }
+
+    p {
+      font-size: 1rem;
+      color: $text-muted;
+      max-width: 360px;
+      width: 100%;
+      margin: 10px 0;
+    }
+
+    a {
+      font-size: 0.9rem;
+      color: $white;
+      background-color: $primary;
+      padding: 10px 30px;
+      margin-top: 20px;
+      border-radius: $radius-sm;
+      transition: 0.2s;
+      cursor: pointer;
+      text-decoration: none;
+      display: inline-block;
+
+      &:hover {
+        background: $primary-hover;
+      }
+    }
+
+    @media (max-width: 768px) {
+      padding: 60px 40px;
+      max-width: 90%;
+
+      span {
+        font-size: 4.5rem;
+        margin-bottom: 20px;
+      }
+
+      h1 {
+        font-size: 2rem;
+      }
+    }
+
+    @media (max-width: 480px) {
+      padding: 40px 20px;
+      border-radius: $radius-md;
+
+      span {
+        font-size: 3.5rem;
+        margin-bottom: 20px;
+      }
+
+      h1 {
+        font-size: 1.5rem;
+      }
+
+      p {
+        font-size: 0.9rem;
+      }
+
+      a {
+        width: 100%;
+        box-sizing: border-box;
+        text-align: center;
+      }
+    }
+  }
+}

package/templates/styles/scss/src/_index.scss

@@ -0,0 +1,2 @@
+@forward "variables";
+@forward "mixins";

package/templates/styles/scss/src/_mixins.scss

@@ -0,0 +1,27 @@
+$breakpoint-tablet: 768px;
+$breakpoint-mobile: 480px;
+
+@mixin tablet {
+  @media (max-width: #{$breakpoint-tablet}) {
+    @content;
+  }
+}
+
+@mixin mobile {
+  @media (max-width: #{$breakpoint-mobile}) {
+    @content;
+  }
+}
+
+// helpers
+@mixin flex-center {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+@mixin text-truncate {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}

package/templates/styles/scss/src/_variables.scss

@@ -0,0 +1,28 @@
+// Brand Colors
+$primary: #37538a;
+$primary-hover: #263c67;
+$primary-dark: #263c67;
+$accent: #e6edfc;
+
+// Text
+$text-dark: #111111;
+$text-muted: #666666;
+
+// Background
+$bg-light: #e6edfc;
+
+// Radius
+$radius-sm: 10px;
+$radius-md: 16px;
+$radius-lg: 24px;
+
+// Shadows
+$shadow-main: 0px 0px 14px -14px rgba(0, 0, 0, 0.75);
+
+// Neutrals
+$white: #ffffff;
+$black: #111111;
+$gray: #666666;
+
+// Fonts
+$font-main: "Arial", sans-serif;

package/templates/styles/scss/src/main.scss

@@ -0,0 +1,20 @@
+@use "index" as *;
+
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+body {
+  font-family: $font-main;
+  background-color: $white;
+  color: $black;
+  line-height: 1.5;
+  -webkit-font-smoothing: antialiased;
+}
+
+a {
+  text-decoration: none;
+  color: inherit;
+}

package/templates/styles/tailwind/config/_vite.config.ts

@@ -0,0 +1,14 @@
+import path from "path"
+import tailwindcss from "@tailwindcss/vite"
+import react from "@vitejs/plugin-react"
+import { defineConfig } from "vite"
+
+// https://vite.dev/config/
+export default defineConfig({
+    plugins: [react(), tailwindcss()],
+    resolve: {
+        alias: {
+            "@": path.resolve(__dirname, "./src"),
+        },
+    },
+})