NoteFlow is a modern, responsive, and collaborative note-taking application designed for seamless thought organization and real-time editing.

• Real-time Collaboration: Edit notes simultaneously with other users using WebSockets.
• Version History: Track changes and restore previous versions of your notes easily.
• Public & Private Notes: Share your notes with a public link or keep them private.
• Dashboard Management: Organize your notes with pinning, searching, and quick delete options.
• Modern UI/UX: Built with a sleek, premium design using Tailwind CSS and Radix UI components.
• Responsive Design: Fully optimized for mobile, tablet, and desktop views.

• Frontend: Next.js (App Router), TypeScript, Tailwind CSS, Lucide React.
• State Management: React Query (TanStack Query).
• Icons & UI: Radix UI, Lucide React, Sonner (Toasts).
• Backend Communication: Axios & WebSockets.

Create a .env file in the root directory and add the following variables:

NEXT_PUBLIC_BACKEND_URL=http://your-backend-api-url/
NEXT_PUBLIC_WS_URL=ws://your-backend-websocket-url/

The application follows a structured routing system for API and WebSocket communication:

• Authentication: /auth/register/, /auth/login/, /auth/get-access-token/
• Notes Management:
  • List: /manage-note/list-all/
  • Create: /manage-note/create/
  • Retrieve/Update/Delete: /manage-note/[id]/
  • WebSocket: /manage-note/ws/[id]
• Version Management:
  • List Versions: /manage-version/[note_id]/list/
  • Restore: /manage-version/[note_id]/restore/[version_id]/
• Public Access: /public/[id]/view/

First, install the dependencies:

pnpm install
# or
npm install

Then, run the development server:

npm run dev
# or
yarn dev
# or
pnpm dev

Open http://localhost:3000 with your browser to see the result.

To learn more about Next.js, take a look at the following resources:

• Next.js Documentation - learn about Next.js features and API.
• Learn Next.js - an interactive Next.js tutorial.