organize template better & add .cursorrules

app-creative · Sep 2, 2024 · 69d3820 · 69d3820
1 parent 2cfcc1d
commit 69d3820
Show file tree

Hide file tree

Showing 9 changed files with 68 additions and 33 deletions.
diff --git a/.cursorrules b/.cursorrules
@@ -0,0 +1,19 @@
+You are an expert in TypeScript, Next.js App Router, React, and Tailwind. Follow @Next.js 14 App Router docs for Data Fetching, Rendering, and Routing. Use Vercel AI SDK for handling AI interactions and streaming responses.
+
+- All project files are saved in the /src folder. 
+  - src/app has the page.tsx and layout.tsx files
+  - src/app/api has the API routes
+  - src/app/components has all the React components
+  - src/app/lib has all the other code like helpers, hooks, and contexts
+
+There are some pre-configured APIs in this template that can be used but only if required by the current project:
+- Firebase
+  - In src/lib/firebase there is a firebase.ts configuration file as well as firebaseUtils.ts for various utility functions when interacting with Firebase Database, Storage, and Authencation
+  - In src/lib/contexts there is an AuthContext.tsx file that has user authentication with Firebase set up with the onAuthStateChanged listener.
+  - In src/lib/hooks there is a useAuth.ts hook
+- OpenAI 
+  - src/app/api/openai has chat/route.ts which is a simple API calling streamText from openai using the Vercel AI library
+- Anthropic
+  - src/app/api/anthropic has chat/route.ts which is a simple API calling streamText from Anthropic using the Vercel AI library
+- Replicate
+  - src/app/api/replicate has generate-image/route.ts which is a simple API calling the Stable Diffusion model hosted on Replicate to generate images
diff --git a/.replit b/.replit
@@ -5,7 +5,8 @@ run = "npm run dev"
 channel = "stable-24_05"
 
 [deployment]
-run = ["sh", "-c", "npm run dev"]
+run = ["sh", "-c", "npm run start"]
+build = ["sh", "-c", "npm run build"]
 
 [[ports]]
 localPort = 3000

diff --git a/src/app/api/generate-image/route.ts → ...app/api/replicate/generate-image/route.ts b/src/app/api/generate-image/route.ts → ...app/api/replicate/generate-image/route.ts
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
@@ -1,12 +1,13 @@
-import { AuthProvider } from "../contexts/AuthContext";
 import "./globals.css";
 
-export default function RootLayout({ children }: { children: React.ReactNode }) {
+export default function RootLayout({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
   return (
     <html lang="en">
-      <body>
-        <AuthProvider>{children}</AuthProvider>
-      </body>
+      <body>{children}</body>
     </html>
   );
 }
diff --git a/src/components/SignInWithGoogle.tsx b/src/components/SignInWithGoogle.tsx
@@ -1,7 +1,7 @@
 "use client";
 
 import { signInWithPopup, GoogleAuthProvider } from "firebase/auth";
-import { auth } from "../lib/firebase";
+import { auth } from "../lib/firebase/firebase";
 
 export default function SignInWithGoogle() {
   const signIn = () => {
@@ -39,7 +39,9 @@ export default function SignInWithGoogle() {
             <path fill="none" d="M0 0h48v48H0z"></path>
           </svg>
         </div>
-        <span className="gsi-material-button-contents">Sign in with Google</span>
+        <span className="gsi-material-button-contents">
+          Sign in with Google
+        </span>
         <span style={{ display: "none" }}>Sign in with Google</span>
       </div>
     </button>

diff --git a/src/contexts/AuthContext.tsx → src/lib/contexts/AuthContext.tsx b/src/contexts/AuthContext.tsx → src/lib/contexts/AuthContext.tsx
@@ -1,15 +1,18 @@
 "use client";
 
-import React, { createContext, useContext, useEffect, useState } from "react";
-import { auth } from "../lib/firebase";
+import React, { createContext, useEffect, useState } from "react";
+import { auth } from "../firebase/firebase";
 import { User } from "firebase/auth";
 
 interface AuthContextType {
   user: User | null;
   loading: boolean;
 }
 
-const AuthContext = createContext<AuthContextType>({ user: null, loading: true });
+const AuthContext = createContext<AuthContextType>({
+  user: null,
+  loading: true,
+});
 
 export function AuthProvider({ children }: { children: React.ReactNode }) {
   const [user, setUser] = useState<User | null>(null);
@@ -24,7 +27,11 @@ export function AuthProvider({ children }: { children: React.ReactNode }) {
     return () => unsubscribe();
   }, []);
 
-  return <AuthContext.Provider value={{ user, loading }}>{children}</AuthContext.Provider>;
+  return (
+    <AuthContext.Provider value={{ user, loading }}>
+      {children}
+    </AuthContext.Provider>
+  );
 }
 
-export const useAuth = () => useContext(AuthContext);
+export { AuthContext };
diff --git a/src/lib/firebase.ts → src/lib/firebase/firebase.ts b/src/lib/firebase.ts → src/lib/firebase/firebase.ts
diff --git a/src/lib/firebaseUtils.ts → src/lib/firebase/firebaseUtils.ts b/src/lib/firebaseUtils.ts → src/lib/firebase/firebaseUtils.ts
@@ -6,23 +6,36 @@ import {
   GoogleAuthProvider,
   signInWithPopup,
 } from "firebase/auth";
-import { collection, addDoc, getDocs, doc, updateDoc, deleteDoc } from "firebase/firestore";
+import {
+  collection,
+  addDoc,
+  getDocs,
+  doc,
+  updateDoc,
+  deleteDoc,
+} from "firebase/firestore";
 import { ref, uploadBytes, getDownloadURL } from "firebase/storage";
 
 // Auth functions
-export const loginUser = (email: string, password: string) =>
-  signInWithEmailAndPassword(auth, email, password);
-
-export const registerUser = (email: string, password: string) =>
-  createUserWithEmailAndPassword(auth, email, password);
-
 export const logoutUser = () => signOut(auth);
 
+export const signInWithGoogle = async () => {
+  const provider = new GoogleAuthProvider();
+  try {
+    const result = await signInWithPopup(auth, provider);
+    return result.user;
+  } catch (error) {
+    console.error("Error signing in with Google", error);
+    throw error;
+  }
+};
+
 // Firestore functions
 export const addDocument = (collectionName: string, data: any) =>
   addDoc(collection(db, collectionName), data);
 
-export const getDocuments = (collectionName: string) => getDocs(collection(db, collectionName));
+export const getDocuments = (collectionName: string) =>
+  getDocs(collection(db, collectionName));
 
 export const updateDocument = (collectionName: string, id: string, data: any) =>
   updateDoc(doc(db, collectionName, id), data);
@@ -36,15 +49,3 @@ export const uploadFile = async (file: File, path: string) => {
   await uploadBytes(storageRef, file);
   return getDownloadURL(storageRef);
 };
-
-// Add Google Auth function
-export const signInWithGoogle = async () => {
-  const provider = new GoogleAuthProvider();
-  try {
-    const result = await signInWithPopup(auth, provider);
-    return result.user;
-  } catch (error) {
-    console.error("Error signing in with Google", error);
-    throw error;
-  }
-};
diff --git a/src/lib/hooks/useAuth.ts b/src/lib/hooks/useAuth.ts
@@ -0,0 +1,4 @@
+import { useContext } from "react";
+import { AuthContext } from "../contexts/AuthContext";
+
+export const useAuth = () => useContext(AuthContext);