alicantorun

🎯 System Prompt: Next.js + Supabase Note-Taking App

Create a production-ready Next.js note-taking application with the following specifications:

🏗️ Tech Stack

• Framework: Next.js 15 (App Router)
• Language: TypeScript
• Styling: Tailwind CSS (v3 or v4)
• UI Components: shadcn/ui (button, card, input, label, textarea, dialog, dropdown-menu, avatar, separator, sonner)

alicantorun

import * as d3 from "d3";
import {
  eachMonthOfInterval,
  endOfMonth,
  format,
  isSameMonth,
  parseISO,
  startOfMonth,
} from "date-fns";
import useMeasure from "react-use-measure";

alicantorun

import React, { useRef, useEffect, useState } from 'react'

// I also made it to support running when specific values update in deps
// The default value for deps will be undefined if you did not pass it
// and will have the same effect as not passing the parameter to useEffect
// so it watch for general updates by default
function useDidUpdate (callback, deps) {
  const hasMount = useRef(false)

  useEffect(() => {

alicantorun

import React, { useReducer } from "react";

const initialState = {
    firstName: "",
    lastName: "",
    email: "",
    phone: "",
    age: ""
};

alicantorun

import React, { useState } from "react";

function User() {
    const [firstName, setFirstName] = useState("");
    const [lastName, setLastName] = useState("");
    const [email, setEmail] = useState("");
    const [phone, setPhone] = useState("");
    const [age, setAge] = useState("");

    return (

alicantorun

import React, { Component } from "react";

class User extends Component {
    state = { firstName: "", lastName: "", email: "", phone: "", age: "" };

    onChange = (e) => {
        const { name, value } = e.target;
        this.setState({ [name]: value });
    };

alicantorun

import React from "react";
import {
  LayoutChangeEvent,
  PanResponder,
  PanResponderGestureState
} from "react-native";
import styled from "styled-components";

type StateType = {
  barHeight: number | null,

alicantorun

import React, { PropTypes } from 'react';
import apConnect from 'apollo-passportjs-react/lib/connect';

function getDisplayName(WrappedComponent) {
  return WrappedComponent.displayName || WrappedComponent.name || 'Component'
}

const Authorization = (allowedRoles) =>
  (WrappedComponent, options = {}) => {

alicantorun

// useDocumentTitle.jsx

import { useEffect } from "react";

function useDocumentTitle(count) {
  useEffect(() => {
    document.title = ` count ${count} `;
  }, [count]);
}

alicantorun

// DocTitleWitHCustomHook.jsx

import React, { useState } from "react";
import useDocumentTitle from "./hooks/useDocumentTitle";

function DocTitleWitHCustomHook() {
  const [count, setCount] = useState(0);

  useDocumentTitle(count);