GithubHelp home page GithubHelp logo

timtbdev / next.js-blog-app Goto Github PK

View Code? Open in Web Editor NEW
195.0 4.0 30.0 2.87 MB

✨ Multi-User, Full-stack blogging application built with Next.js and Supabase.

Home Page: https://ub.cafe

TypeScript 96.97% CSS 2.21% JavaScript 0.82%
headlessui nextjs shadcn-ui supabase-auth supabase-db supabase-js tailwindcss client-components convertkit nodemailer

next.js-blog-app's Introduction

Cover

Multi-User, Full-stack Blogging Applicaition

The all-in-one starter kit
for building multi-user, full-stack blogging applications.

Introduction · Demo · Guide · Contributing


Introduction

The Blogging application is a multi-user, full-stack Next.js app with Supabase support. Built with Next.js App Router, Supabase Auth and Supabase Database, Supabase Storage.

💻 Frontend

Cover

📹 Preview

frontend.mp4

🧰 Backend

Cover

📹 Preview

backend.mp4

💾 Database Schema

Database schema & dummy data: here

Screenshot 2023-06-10 at 10 00 18 PM

📊 Google Lighthouse performance statistics

Screenshot 2023-06-10 at 10 00 18 PM

📚 Tech Stacks

⌨️ Code Quality

📈 Miscellaneous

⚙️ Getting Started

Requirements

To run this app locally you need

Developer Quickstart

Want to get up and running quickly? Follow these steps:

  • Clone the repository it to your local device.

    git clone https://github.com/timtbdev/Next.js-Blog-App.git
  • Set up your Supabase Database and Auth wit with Social Logins

  • Set up your ConverKit

  • Set up your .env file using the recommendations in the .env.example file.

  • Run npm installation in the root directory

    npm installation --legacy-peer-deps
  • Run npm run dev in the root directory

  • Want it even faster? Just use

    npm run d

That's it! You should now be able to access the app at http://localhost:3000

Admin dashboard will also be available on http://localhost:300/editor/posts

Contributing

  • Start a discussion with a question, piece of feedback, or idea you want to share with me.
  • Open an issue if you believe you've encountered a bug with the starter kit.

🙇 Author

License

Licensed under the MIT license.

next.js-blog-app's People

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar

next.js-blog-app's Issues

Converting this to a CMS

Hello, is it possible to convert this to a CMS where we have an admin and only used with certain roles and permission to create contnent?

Commit latest

Have you tried to run this commit version. Its not fully finished as nextjs14 i think. Issues were viewing post, in supabase drafts and posts table but there was no usage for posts table. In post detail cover image, image gallery either post.content not viewable

Failure to Add User Information to the Profiles table after logging in with Google or GitHub

Description

After logging in with a Google or GitHub account, the system fails to add user information to the profiles table as expected. This poses difficulties in managing and displaying user information.

Steps to Reproduce

  1. Log in with a Google account.
  2. Or login with a GitHub account.
  3. Check the profiles table to see if user information has been added.

Expectation

After logging in with Google or GitHub, user information should be automatically added to the profiles table.

Note

This issue is not present on the ub.cafe site.

sql file

{
  code: '23503',
  details: 'Key (author_id)=(ffa6add6-903f-4265-956e-388065b67e14) is not present in table "profiles".',
  hint: null,
  message: 'insert or update on table "drafts" violates foreign key constraint "drafts_author_id_fkey"'
}

Can you give me the updated sql?

The Schema Doesn't Work

As mentioned, the Schema is not working. Try this if you having issues.

`CREATE OR REPLACE FUNCTION moddatetime()
RETURNS TRIGGER AS $$
BEGIN
NEW.updated_at = NOW();
RETURN NEW;
END;
$$ LANGUAGE plpgsql;

CREATE SCHEMA IF NOT EXISTS public;

CREATE TABLE public.profiles (
id uuid NOT NULL,
updated_at timestamp with time zone NULL,
username text NULL,
full_name text NULL,
avatar_url text NULL,
website text NULL,
CONSTRAINT profiles_pkey PRIMARY KEY (id),
CONSTRAINT profiles_username_key UNIQUE (username),
CONSTRAINT profiles_id_fkey FOREIGN KEY (id) REFERENCES auth.users (id),
CONSTRAINT username_length CHECK ((char_length(username) >= 3))
) TABLESPACE pg_default;

CREATE TABLE public.categories (
id uuid NOT NULL DEFAULT gen_random_uuid(),
title text NULL DEFAULT ''::text,
created_at timestamp with time zone NULL DEFAULT now(),
slug text NULL,
CONSTRAINT category_pkey PRIMARY KEY (id),
CONSTRAINT category_id_key UNIQUE (id)
) TABLESPACE pg_default;

CREATE TABLE public.posts (
id uuid NOT NULL DEFAULT gen_random_uuid(),
category_id uuid NULL,
title text NULL,
image text NULL,
description text NULL,
content text NULL,
created_at timestamp with time zone NULL DEFAULT now(),
updated_at timestamp with time zone NULL,
slug text NULL DEFAULT ''::text,
author_id uuid NULL,
published boolean NULL DEFAULT false,
CONSTRAINT post_pkey PRIMARY KEY (id),
CONSTRAINT post_id_key UNIQUE (id),
CONSTRAINT post_slug_key UNIQUE (slug),
CONSTRAINT posts_author_id_fkey FOREIGN KEY (author_id) REFERENCES profiles (id),
CONSTRAINT posts_category_id_fkey FOREIGN KEY (category_id) REFERENCES categories (id)
) TABLESPACE pg_default;

CREATE TABLE public.comments (
id uuid NOT NULL DEFAULT gen_random_uuid(),
comment text NULL DEFAULT ''::text,
created_at timestamp with time zone NULL DEFAULT now(),
user_id uuid NULL,
post_id uuid NULL,
CONSTRAINT comments_pkey PRIMARY KEY (id),
CONSTRAINT comments_post_id_fkey FOREIGN KEY (post_id) REFERENCES posts (id) ON DELETE CASCADE,
CONSTRAINT comments_user_id_fkey FOREIGN KEY (user_id) REFERENCES profiles (id) ON DELETE CASCADE
) TABLESPACE pg_default;

CREATE TABLE public.bookmarks (
id uuid NOT NULL,
user_id uuid NULL,
created_at timestamp with time zone NULL DEFAULT now(),
CONSTRAINT bookmarks_pkey PRIMARY KEY (id),
CONSTRAINT bookmarks_id_fkey FOREIGN KEY (id) REFERENCES posts (id) ON DELETE CASCADE,
CONSTRAINT bookmarks_user_id_fkey FOREIGN KEY (user_id) REFERENCES auth.users (id) ON DELETE CASCADE
) TABLESPACE pg_default;

CREATE TRIGGER handle_updated_at
BEFORE UPDATE ON posts
FOR EACH ROW
EXECUTE FUNCTION moddatetime('updated_at');

CREATE TABLE public.drafts (
id uuid NOT NULL DEFAULT gen_random_uuid(),
category_id uuid NULL,
title text NULL DEFAULT 'Untitled'::text,
slug text NULL DEFAULT 'untitled'::text,
image text NULL,
description text NULL,
content text NULL,
created_at timestamp with time zone NOT NULL DEFAULT now(),
updated_at timestamp without time zone NULL,
author_id uuid NULL,
published boolean NULL DEFAULT false,
CONSTRAINT drafts_pkey PRIMARY KEY (id),
CONSTRAINT drafts_author_id_fkey FOREIGN KEY (author_id) REFERENCES profiles (id),
CONSTRAINT drafts_category_id_fkey FOREIGN KEY (category_id) REFERENCES categories (id) ON DELETE CASCADE
) TABLESPACE pg_default;

CREATE TRIGGER handle_updated_at
BEFORE UPDATE ON drafts
FOR EACH ROW
EXECUTE FUNCTION moddatetime('updated_at');

-- Modify the handle_new_user() function
CREATE OR REPLACE FUNCTION public.handle_new_user()
RETURNS TRIGGER AS $$
BEGIN
RAISE NOTICE 'handle_new_user() called for user ID: %', NEW.id;
INSERT INTO public.profiles (id, updated_at, full_name, avatar_url)
VALUES (
NEW.id,
CURRENT_TIMESTAMP,
COALESCE(jsonb_extract_path_text(NEW.raw_user_meta_data, 'full_name'), NULL),
COALESCE(jsonb_extract_path_text(NEW.raw_user_meta_data, 'picture'), jsonb_extract_path_text(NEW.raw_user_meta_data, 'avatar_url'), NULL)
)
ON CONFLICT (id) DO NOTHING;

RETURN NEW;

END;
$$ LANGUAGE plpgsql SECURITY DEFINER;

-- Create the trigger to handle new user creation
CREATE TRIGGER on_auth_user_created
AFTER INSERT ON auth.users
FOR EACH ROW EXECUTE FUNCTION public.handle_new_user();

-- Grant necessary permissions
GRANT USAGE ON SCHEMA "public" TO anon;
GRANT USAGE ON SCHEMA "public" TO authenticated;

GRANT SELECT, INSERT, UPDATE ON ALL TABLES IN SCHEMA "public" TO authenticated;
GRANT SELECT, INSERT, UPDATE ON ALL TABLES IN SCHEMA "public" TO anon;

GRANT EXECUTE ON FUNCTION public.handle_new_user() TO postgres;
GRANT INSERT ON public.profiles TO authenticated;
GRANT INSERT ON public.profiles TO anon;`

Error while uploading file to superbase storage

I have cloned this repo, when I try to upload image am getting this error. Any idea how to solve, am using firebase free account.
Error: Invariant: cookies() expects to have requestAsyncStorage, none available.
at Object.cookies (webpack-internal:///(rsc)/./node_modules/next/dist/client/components/headers.js:50:15)
at NextServerComponentAuthStorageAdapter.getCookie (webpack-internal:///(rsc)/./node_modules/@supabase/auth-helpers-nextjs/dist/index.js:196:42)
at NextServerComponentAuthStorageAdapter.getItem (webpack-internal:///(rsc)/./node_modules/@supabase/auth-helpers-shared/dist/index.js:266:28)
at getItemAsync (webpack-internal:///(rsc)/./node_modules/@supabase/gotrue-js/dist/main/lib/helpers.js:133:33)
at SupabaseAuthClient.__loadSession (webpack-internal:///(rsc)/./node_modules/@supabase/gotrue-js/dist/main/GoTrueClient.js:867:67)
at SupabaseAuthClient._useSession (webpack-internal:///(rsc)/./node_modules/@supabase/gotrue-js/dist/main/GoTrueClient.js:850:39)
at SupabaseAuthClient._emitInitialSession (webpack-internal:///(rsc)/./node_modules/@supabase/gotrue-js/dist/main/GoTrueClient.js:1348:27)
at eval (webpack-internal:///(rsc)/./node_modules/@supabase/gotrue-js/dist/main/GoTrueClient.js:1338:22)
at eval (webpack-internal:///(rsc)/./node_modules/@supabase/gotrue-js/dist/main/GoTrueClient.js:814:36)
at SupabaseAuthClient.lockNoOp [as lock] (webpack-internal:///(rsc)/./node_modules/@supabase/gotrue-js/dist/main/GoTrueClient.js:34:18)

Node.js v18.17.1

Publish the Post

There is no option to publish the Post, When I create a new post, the status is always in Draft, so how do I publish it?

can't login nor see posts

hello , thanks for sharing this project , I've encounter some problems linking the project to supabase ..
I'm new to next and suabase ,

I've setup the env variables details and enable Supabase's authorizations settings ( Google and Github Client ID and Secret api),

but I couldn't login into the editor/posts route .

is there something I need to edit in Vercel or supabase ?
also idk how to fetch the articles from the db ,, should I upload it into supabase and if so how ?

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.