Using Next.js 13 and Lexical to create a simple notes app

This page summarizes the projects mentioned and recommended in the original post on dev.to

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.
surveyjs.io
featured
InfluxDB - Power Real-Time Data Analytics at Scale
Get real-time insights from all types of time series data with InfluxDB. Ingest, query, and analyze billions of data points in real-time with unbounded cardinality.
www.influxdata.com
featured
  • compass

    Discontinued An simple notes app, derived from shadcn's Taxonomy. (by haydenbleasel)

  • '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;

  • react-hot-toast.com

    Smoking Hot React Notifications 🔥

  • 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...

  • 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.

    SurveyJS logo
  • lexical

    Lexical is an extensible text editor framework that provides excellent reliability, accessibility and performance.

  • 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.

NOTE: The number of mentions on this list indicates mentions on common posts plus user suggested alternatives. Hence, a higher number means a more popular project.

Suggest a related project

Related posts

  • Introducing Mantine 6.0

    4 projects | /r/reactjs | 2 Mar 2023
  • Lexical – a web text editor framework that powers Facebook

    8 projects | news.ycombinator.com | 20 Jun 2022
  • A good rich text editor for reactjs?

    4 projects | /r/reactjs | 23 May 2022
  • Collab Chronicles: Exploring the Collaborative Experience

    2 projects | dev.to | 23 Apr 2024
  • How I Built an Open-Source Admin Dashboard Template with Mantine and Next.js

    3 projects | dev.to | 3 Apr 2024