sharvin26 / todoapp-supabase

A todoapp built using Supabase, ReactJS, NextJS and Chakra UI

Hi there 👋

🏢 I’m currently working as a CEO and CTO in company named MTechZilla.

💬 You can ask me about:

• JavaScript
• TypeScript
• React
• NextJS
• StoryBook
• ExpressJS
• Serverless
• AWS
• Firebase
• Supabase
• Stripe

🤔 If want to collaborate, you can reach out to me.

📫 How to reach me:

• ✉️ Email me at [email protected]
• 💬 Dm on twitter id @sharvinshah26

🌏 Go through my portfolio to know more about me.

todoapp-supabase's Issues

webSocket connection to 'wss//.....' failed:

First, thank you very much for sharing how to make todolist app in Next.js & supaBase, it help me a lot.

I'm not familiar with React and supaBase, here I have some issue when I followed your tutorial in freeCodeCamp,

I always get error in Chrome console like this
webSocket connection to 'wss//.....' failed:

and i think the error is from these code in index.js

useEffect(() => {
    const todoListener = supabaseClient
      .from("todos")
      .on("*", (payload) => {
        if (payload.eventType !== "DELETE") {
          const newTodo = payload.new;
          setTodos((oldTodos) => {
            const exists = oldTodos.find((todo) => todo.id === newTodo.id);
            let newTodos;
            if (exists) {
              const oldTodoIndex = oldTodos.findIndex(
                (obj) => obj.id === newTodo.id
              );
              oldTodos[oldTodoIndex] = newTodo;
              newTodos = oldTodos;
            } else {
              newTodos = [...oldTodos, newTodo];
            }
            newTodos.sort((a, b) => b.id - a.id);
            return newTodos;
          });
        }
      })
      .subscribe();

    return () => {
      todoListener.unsubscribe();
    };
  }, []);

but i have no idea to fix it....

because when I update todo or add new todo, it cannot show the new state for todos, i need refresh again to fetch new todos.

thank you.

Three items

Hi, really enjoyed this tutorial
I have this repo: https://github.com/coding-to-music/supabase-nextjs-todo-app
And the readme is the same as this issue: coding-to-music/coding-to-music.github.io#340

I have three items you might want to be aware of

1. The directory components is plural, this sentence uses singular: "Create a component directory under the root directory, and inside the component directory"
2. This mentions going up two levels, it probably is only one level? import { supabaseClient } from "../../lib/client";
3. When I then attempt to do a build, I get the following error, not sure how to proceed?

https://github.com/coding-to-music/supabase-nextjs-todo-app/blob/main/README.md#how-to-deploy-the-app-to-vercel-and-configure-supabase-authentication

> build
> next build

info  - Loaded env from /mnt/ap/ap/supabase-nextjs-todo-app/.env.local
info  - Checking validity of types  
info  - Creating an optimized production build  
info  - Compiled successfully
info  - Collecting page data  
[    ] info  - Generating static pages (0/6)
Error occurred prerendering page "/auth". Read more: https://nextjs.org/docs/messages/prerender-error
TypeError: res.setHeader is not a function
    at GoTrueApi.setAuthCookie (/mnt/ap/ap/supabase-nextjs-todo-app/node_modules/@supabase/gotrue-js/dist/main/GoTrueApi.js:377:17)
    at handler (/mnt/ap/ap/supabase-nextjs-todo-app/.next/server/pages/auth.js:35:102)
    at d (/mnt/ap/ap/supabase-nextjs-todo-app/node_modules/react-dom/cjs/react-dom-server.node.production.min.js:33:498)
    at bb (/mnt/ap/ap/supabase-nextjs-todo-app/node_modules/react-dom/cjs/react-dom-server.node.production.min.js:36:16)
    at a.b.render (/mnt/ap/ap/supabase-nextjs-todo-app/node_modules/react-dom/cjs/react-dom-server.node.production.min.js:42:43)
    at a.b.read (/mnt/ap/ap/supabase-nextjs-todo-app/node_modules/react-dom/cjs/react-dom-server.node.production.min.js:41:83)
    at Object.exports.renderToString (/mnt/ap/ap/supabase-nextjs-todo-app/node_modules/react-dom/cjs/react-dom-server.node.production.min.js:52:138)
    at Object.renderPage (/mnt/ap/ap/supabase-nextjs-todo-app/node_modules/next/dist/server/render.js:686:46)
    at Object.defaultGetInitialProps (/mnt/ap/ap/supabase-nextjs-todo-app/node_modules/next/dist/server/render.js:316:51)
    at Function.getInitialProps (/mnt/ap/ap/supabase-nextjs-todo-app/.next/server/chunks/859.js:515:20)
info  - Generating static pages (6/6)

> Build error occurred
Error: Export encountered errors on following paths:
        /auth
    at /mnt/ap/ap/supabase-nextjs-todo-app/node_modules/next/dist/export/index.js:500:19
    at runMicrotasks (<anonymous>)
    at processTicksAndRejections (internal/process/task_queues.js:95:5)
    at async Span.traceAsyncFn (/mnt/ap/ap/supabase-nextjs-todo-app/node_modules/next/dist/trace/trace.js:74:20)
    at async /mnt/ap/ap/supabase-nextjs-todo-app/node_modules/next/dist/build/index.js:987:17
    at async Span.traceAsyncFn (/mnt/ap/ap/supabase-nextjs-todo-app/node_modules/next/dist/trace/trace.js:74:20)
    at async /mnt/ap/ap/supabase-nextjs-todo-app/node_modules/next/dist/build/index.js:861:13
    at async Span.traceAsyncFn (/mnt/ap/ap/supabase-nextjs-todo-app/node_modules/next/dist/trace/trace.js:74:20)
    at async Object.build [as default] (/mnt/ap/ap/supabase-nextjs-todo-app/node_modules/next/dist/build/index.js:82:25)