Fix Supabase configuration, table naming inconsistencies, and routing issues

README.md

@@ -143,7 +143,7 @@ VITE_SUPABASE_ANON_KEY=your_supabase_anon_key
 **Posts Table**
 
 ```sql
-CREATE TABLE Posts (
+CREATE TABLE posts (
   id BIGINT PRIMARY KEY GENERATED ALWAYS AS IDENTITY,
   title TEXT NOT NULL,
   content TEXT NOT NULL,
@@ -159,7 +159,7 @@ CREATE TABLE Posts (
 **Comments Table**
 
 ```sql
-CREATE TABLE Comments (
+CREATE TABLE comments (
   id BIGINT PRIMARY KEY GENERATED ALWAYS AS IDENTITY,
   post_id BIGINT NOT NULL REFERENCES Posts(id),
   content TEXT NOT NULL,
@@ -174,7 +174,7 @@ CREATE TABLE Comments (
 **Communities Table**
 
 ```sql
-CREATE TABLE Communities (
+CREATE TABLE communities (
   id BIGINT PRIMARY KEY GENERATED ALWAYS AS IDENTITY,
   name TEXT NOT NULL,
   description TEXT,
@@ -185,7 +185,7 @@ CREATE TABLE Communities (
 **Votes Table**
 
 ```sql
-CREATE TABLE Votes (
+CREATE TABLE votes (
   id BIGINT PRIMARY KEY GENERATED ALWAYS AS IDENTITY,
   post_id BIGINT NOT NULL REFERENCES Posts(id),
   user_id UUID NOT NULL,
@@ -386,7 +386,7 @@ const { data, isLoading, error } = useQuery({
   queryKey: ['posts'],
   queryFn: async () => {
     const { data, error } = await supabase
-      .from('Posts')
+      .from('posts')
       .select('*')
       .order('created_at', { ascending: false });
 

src/components/CommentItem.tsx

@@ -25,7 +25,7 @@ const createReply = async (
     throw new Error("You must be logged in to reply.");
   }
 
-  const { error } = await supabase.from("Comments").insert({
+  const { error } = await supabase.from("comments").insert({
     post_id: postId,
     content: replyContent,
     parent_comment_id: parentCommentId,

src/components/CommentSection.tsx

@@ -22,7 +22,7 @@ interface CommentSectionProps {
 
 const fetchComments = async (postId: number): Promise<Comment[]> => {
   const { data, error } = await supabase
-    .from('Comments')
+    .from('comments')
     .select('*')
     .eq('post_id', postId)
     .order('created_at', { ascending: true });
@@ -42,7 +42,7 @@ const createComment = async (
     throw new Error('You must be logged in to comment.');
   }
 
-  const { error } = await supabase.from('Comments').insert({
+  const { error } = await supabase.from('comments').insert({
     post_id: postId,
     content: content,
     user_id: userId,

src/components/CommunityDisplay.tsx

@@ -17,8 +17,8 @@ export const fetchCommunityPost = async (
   communityId: number
 ): Promise<PostWithCommunity[]> => {
   const { data, error } = await supabase
-    .from("Posts")
-    .select("*, Communities(name)")
+    .from("posts")
+    .select("*, communities(name)")
     .eq("community_id", communityId)
     .order("created_at", { ascending: false });
 

src/components/CommunityList.tsx

@@ -12,7 +12,7 @@ export interface Community {
 
 const fetchCommunities = async (): Promise<Community[]> => {
     const { data, error } = await supabase
-        .from('Communities')
+        .from('communities')
         .select('*')
         .order('created_at', { ascending: false });
     if (error) {

src/components/CreateCommunity.tsx

@@ -11,7 +11,7 @@ interface CommunityInput {
 
 const createCommunity = async (community: CommunityInput) => {
   const { error, data } = await supabase
-    .from("Communities")
+    .from("communities")
     .insert([community])
     .select();
 

src/components/CreatePost.tsx

@@ -5,6 +5,7 @@ import { supabase } from '../supabase-client';
 import { useAuth } from '../context/AuthContext';
 import type { Community } from './CommunityList';
 import { Upload, AlertCircle, CheckCircle } from 'lucide-react';
+import { useNavigate } from 'react-router-dom';
 
 interface PostInput {
     title: string;
@@ -15,7 +16,7 @@ interface PostInput {
 
 const fetchCommunities = async (): Promise<Community[]> => {
     const { data, error } = await supabase
-        .from('Communities')
+        .from('communities')
         .select('*')
         .order('created_at', { ascending: false });
 
@@ -26,14 +27,29 @@ const fetchCommunities = async (): Promise<Community[]> => {
 }
 
 const CreatePost = () => {
+    const navigate = useNavigate();
+
     const queryClient = useQueryClient();
 
-    const uploadPost = async (post: PostInput, imageFile: File | null) => {
+    const uploadPost = async (
+        post: PostInput, 
+        imageFile: File | null
+    ) => {
+        const {
+            data: { user },
+            error: authError
+        } = await supabase.auth.getUser();
+
+        if (authError || !user) {
+            throw new Error("User not authenticated");
+        }
+
         if (!imageFile) {
             throw new Error("Image file is required");
         }
-
-        const filePath = `${post.title}-${Date.now()}-${imageFile.name}`;
+
+        const safeTitle = post.title.replace(/[^a-zA-Z0-9-_]/g, '_'); // replace unsafe chars
+        const filePath = `${safeTitle}-${Date.now()}-${imageFile.name}`;
 
         const {error: imageError} = await supabase.storage
             .from('post-images')
@@ -47,12 +63,13 @@ const CreatePost = () => {
             .from('post-images')
             .getPublicUrl(filePath);
 
-        const {data, error} = await supabase.from("Posts").insert({
+        const {data, error} = await supabase.from("posts").insert({
             title: post.title,
             content: post.content,
             image_url: publicUrl.publicUrl,
             avatar_url: post.avatar_url,
-            community_id: post.community_id
+            community_id: post.community_id,
+            user_id: user.id
         }).select();
 
         if (error) {
@@ -85,7 +102,7 @@ const CreatePost = () => {
             setCommunityId(null);
             queryClient.invalidateQueries({queryKey: ['posts']});
             setTimeout(() => {
-                window.location.href = '/';
+                navigate('/');
             }, 2000);
         }
     })

src/components/LikeButton.tsx

@@ -17,7 +17,7 @@ interface Vote {
 
 const like = async (likeValue: number, postId: number, userId: string) => {
     const { data: existingVote } = await supabase
-        .from('Votes')
+        .from('votes')
         .select("*")
         .eq("post_id", postId)
         .eq("user_id", userId)
@@ -27,7 +27,7 @@ const like = async (likeValue: number, postId: number, userId: string) => {
         if (existingVote.vote === likeValue) {
             // User is unliking the post
             const { error } = await supabase
-                .from('Votes')
+                .from('votes')
                 .delete()
                 .eq("post_id", postId)
                 .eq("user_id", userId);
@@ -37,7 +37,7 @@ const like = async (likeValue: number, postId: number, userId: string) => {
         }
     } else {
         const { error } = await supabase
-            .from('Votes')
+            .from('votes')
             .insert({ post_id: postId, user_id: userId, vote: likeValue });
 
         if (error) {
@@ -48,7 +48,7 @@ const like = async (likeValue: number, postId: number, userId: string) => {
 
 const fetchLikes = async (postId: number): Promise<Vote[]> => {
     const { data, error } = await supabase
-        .from('Votes')
+        .from('votes')
         .select('*')
         .eq('post_id', postId);
     if (error) {

src/components/PostDetail.tsx

@@ -21,7 +21,7 @@ interface PostDetailProps {
 
 const fetchPost = async (postId: number): Promise<Post> => {
     const { data, error } = await supabase
-        .from('Posts')
+        .from('posts')
         .select('*')
         .eq('id', postId)
         .single();

src/components/PostList.tsx

@@ -13,7 +13,7 @@ export interface Post {
 }
 
 const fetchPosts = async (): Promise<Post[]> => {
-    const {data, error} = await supabase.from('Posts').select('*').order('created_at', {ascending: false});
+    const {data, error} = await supabase.from('posts').select('*').order('created_at', {ascending: false});
     if (error) {
         throw new Error("Error fetching posts: " + error.message);
     }

src/main.tsx

@@ -10,7 +10,7 @@ const queryClient = new QueryClient()
 
 createRoot(document.getElementById('root')!).render(
 
-    <Router>
+    <Router basename={import.meta.env.VITE_BASE_PATH || "/DevConnect"}>
       <QueryClientProvider client={queryClient}>
         <AuthProvider>
         <App />

src/supabase-client.ts

@@ -1,6 +1,6 @@
 import { createClient} from '@supabase/supabase-js'
 
-const supabaseUrl = "https://vrgulaasdvhujkxnaxgr.supabase.co"
+const supabaseUrl = import.meta.env.VITE_SUPABASE_URL as string;
 const supabaseAnonKey = import.meta.env.VITE_SUPABASE_ANON_KEY as string;
 
 export const supabase = createClient(supabaseUrl, supabaseAnonKey);