[TASK-1] Create the Journal Page UI

[abedmohammed]

Task: Create the Journal Page UI

Goal:
Design the user interface for the journal page in our app. This is purely a front-end task and does not require implementing any saving functionality. The main purpose is to set up a visually appealing and user-friendly journal editor.

---

Requirements

1. Page Setup

   • Route: Create the journal page at /journals/:uuid. For now, the uuid can be a placeholder (e.g., /journals/temp-id).
   • Exit Button: Include an exit button at the top-right corner to navigate away from the journal page.

2. Editor Structure

   • Title Field:

     • Add a title field at the top of the page.
     • Display the title text in a larger font to stand out.
     • Initially, show a placeholder text prompting the user to add a title (e.g., “Enter a title…”).

   • Date Display:

     • Below the title, display the date of the created journal in a smaller font for context (e.g., “Wednesday, October 9, 2024”).

   • Body of the Document:

     • Implement a text editor below the date.
     • Use a library that supports rich text editing (WYSIWYG) or a more structured editor like Tiptap (e.g., similar to Notion’s editor).
     • The body should be flexible for users to write and format their journal entries as they like.

---

Implementation

• Store Journal Data: We need an object to store the journal entry data. A format like JSON will work well since it’s flexible and can store rich text data.
• Metadata: Add metadata to this object, such as the title, date, and user ID (or similar) to help identify each entry in the database.

• Using Libraries: If you’re using something like Tiptap or novel.sh for the editor, it automatically saves content as JSON. You can embed this JSON data directly in your journal object, along with other metadata.

  Example Structure:

  {
   "id": "unique-entry-id",
   "title": "My Journal Entry",
   "date": "2024-10-09",
   "content": { /* JSON data from Tiptap editor */ },
   "userId": "user-id"
  }

---

Additional Notes

• Styling: Try to use daisyUI for the UI elements, tailwind works just fine too
• Editor Library: Either WYSIWYG or Tiptap can be used, whichever integrates best with our setup and provides a user-friendly editing experience.

[angefern]

@haniyak28 how do you want to split up this task? Are you free to voice call sometime this weekend to get started?