Our great sponsors
-
SurveyJS
Open-Source JSON Form Builder to Create Dynamic Forms Right in Your App. With SurveyJS form UI libraries, you can build and style forms in a fully-integrated drag & drop form builder, render them in your JS app, and store form submission data in any backend, inc. PHP, ASP.NET Core, and Node.js.
-
lexical
Lexical is an extensible text editor framework that provides excellent reliability, accessibility and performance.
'use client'; import { getAuth } from 'firebase/auth'; import type { FC } from 'react'; import { useEffect, useState } from 'react'; import { Code, HelpCircle, LogOut, UserPlus, Zap } from 'react-feather'; import Link from 'next/link'; import Tooltip from '../components/tooltip'; import Modal from '../components/modal'; import Login from '../components/login'; import { firebase } from '../lib/firebase'; import useAppCheck from '../hooks/useAppCheck'; import useTheme from '../hooks/useTheme'; import useUser from '../hooks/useUser'; import useProfile from '../hooks/useProfile'; import Skeleton from '../components/skeleton'; import Editor from '../components/editor'; const app = firebase(); const Home: FC = () => { const auth = getAuth(); const user = useUser(); const [showLogin, setShowLogin] = useState(false); const profile = useProfile(); useTheme(); useAppCheck(app); useEffect(() => { if (user && showLogin) { setShowLogin(false); } }, [user, showLogin]); if (typeof user === 'undefined' || (user && profile.loading)) { return ; } return (
Link> Tooltip> Link> Tooltip> Link> Tooltip> {user ? ( auth.signOut()} > button> Tooltip> ) : ( } > setShowLogin(true)} > button> Tooltip> Modal> )} div> div> ); }; export default Home;
As Next.js 13's new Layouts system uses React Server components by default, we need to create a client-side Providers function to act as a wrapper of client-side functionality at the app level. For example, to enable Radix UI's Tooltips, React Hot Toast and Vercel Analytics...
I decided to try building something that was fast and easy to use, but more importantly minimal. It should provide a distraction-free experience and allow me to jump in and out of the app quickly, whenever thoughts occur. Plus, I also wanted to try out Next.js 13 and Meta's Lexical, so this seemed like a good opportunity. I used Firebase for the backend, but you could easily swap this out for something else.