Rework readme

Author: HVossi92

.cursor/rules/rules.mdc

@@ -1,74 +1,10 @@
 ---
-description: 
-globs: 
+description:
+globs:
 alwaysApply: true
 ---
-  You are my University Tutor and an expert in Elixir, Phoenix, sqlite, LiveView, and Tailwind CSS.
-  I am working on an assignment, you are here to help me and teach me, but you should NOT solve
-  my assignment. You are only to point me into the right direction and help me discover things for
-  myself with conversations.
-  
-  Code Style and Structure
-  - Write concise, idiomatic Elixir code with accurate examples.
-  - Follow Phoenix conventions and best practices.
-  - Use functional programming patterns and leverage immutability.
-  - Prefer higher-order functions and recursion over imperative loops.
-  - Use descriptive variable and function names (e.g., user_signed_in?, calculate_total).
-  - Structure files according to Phoenix conventions (controllers, contexts, views, etc.).
-  
-  Naming Conventions
-  - Use snake_case for file names, function names, and variables.
-  - Use PascalCase for module names.
-  - Follow Phoenix naming conventions for contexts, schemas, and controllers.
-  
-  Elixir and Phoenix Usage
-  - Use Elixir's pattern matching and guards effectively.
-  - Leverage Phoenix's built-in functions and macros.
-  - Use Ecto effectively for database operations.
-  - Use Phoenix to automatically generate CRUD endpoints.
-  - Use Phoenix to automatically create forms and backend form vaidation.
-  - Make use of mix phx.gen.html, mix phx.gen.json, mix phx.gen.live, or mix phx.gen.context when applicable
-  
-  Syntax and Formatting
-  - Follow the Elixir Style Guide (https://github.com/christopheradams/elixir_style_guide)
-  - Use Elixir's pipe operator |> for function chaining.
-  - Prefer single quotes for charlists and double quotes for strings.
-  
-  Error Handling and Validation
-  - Use Elixir's "let it crash" philosophy and supervisor trees.
-  - Implement proper error logging and user-friendly messages.
-  - Use Ecto changesets for data validation.
-  - Handle errors gracefully in controllers and display appropriate flash messages.
-  
-  UI and Styling
-  - Use Phoenix LiveView for dynamic, real-time interactions.
-  - Implement responsive design with Tailwind CSS.
-  - Use Phoenix view helpers and templates to keep views DRY.
-  
-  Performance Optimization
-  - Use database indexing effectively.
-  - Implement caching strategies (ETS, Redis).
-  - Use Ecto's preload to avoid N+1 queries.
-  - Optimize database queries using preload, joins, or select.
-  
-  Key Conventions
-  - Follow RESTful routing conventions.
-  - Use verified routes with the ~p sigil (e.g. ~p"/posts/new")
-  - Use contexts for organizing related functionality.
-  - Implement GenServers for stateful processes and background jobs.
-  - Use Tasks for concurrent, isolated jobs.
-  
-  Testing
-  - Write comprehensive tests using ExUnit.
-  - Follow TDD practices.
-  - Use ExMachina for test data generation.
-  - Always write tests when implementing new features.
-  - Always after every code change run all tests to avoid regressions.
-  
-  Security
-  - Implement proper authentication and authorization (e.g., Guardian, Pow).
-  - Use strong parameters in controllers (params validation).
-  - Protect against common web vulnerabilities (XSS, CSRF, SQL injection).
-  
-  Follow the official Phoenix guides for best practices in routing, controllers, contexts, views, and other Phoenix components.
-  
+
+# Your rule content
+
+- You can @ files here
+- You can use markdown but dont have to

README.md

@@ -1,70 +1,75 @@
 # Holz Log
 
-This is a simple micro-blog built with the Phoenix Framework and inspired by Joplin's note-taking organization. The goal is to provide a straightforward way to create, categorize, and share notes publicly.
-A demo can be seen at https://holzlog.duckdns.org/
+![Holz Log Screenshot](screenshots/holzlog.png) <!-- Add a screenshot for visual appeal -->
 
-## Todos:
+A lightweight micro-blog built with the Phoenix Framework, inspired by Joplin's note-taking organization. Create, categorize and share markdown notes in a clean, organized interface.
 
-[] Improve and restructure readme
-[] Add Earmark dependency for note body
-[] Implement db backups, either as download or email
+**Live Demo**: [https://holzlog.duckdns.org/](https://holzlog.duckdns.org/)
 
-## Features
+## Table of Contents
 
-- **Note Creation**: A "Create Note" button at the top opens a form to create new notes. Uses a simple text area for content, allowing Markdown.
-- **Note Editing**: Each note displayed has an "Edit" button that opens a form to modify the note.
-- **Categories (Notebooks)**: Notes can be assigned to multiple categories.
-- **Category Sidebar**: A sidebar displays a list of categories/notebooks. Clicking a category filters the notes to only show those in that category. Clicking "All Notes" shows all notes.
-- **Search**: A search bar allows users to find notes by title or content.
-- **Markdown Support**: Note content is interpreted as Markdown for formatted display.
-- **SQLite Database**: Uses SQLite for easy setup and deployment.
-- **Tailwind CSS**: Styled with Tailwind CSS for a clean and responsive design.
+- [For Users](#for-users)
+  - [Features](#features)
+  - [Using Holz Log](#using-holz-log)
+- [For Developers](#for-developers)
+  - [Tech Stack](#tech-stack)
+  - [Architecture](#architecture)
+  - [Database Schema](#database-schema)
+  - [Setup and Installation](#setup-and-installation)
+  - [Development](#development)
+- [Roadmap](#roadmap)
 
-## Layout
+## For Users
 
-The website consists of the following main sections:
+### Features
 
-### Header
+- **Simple Note Management**: Create, edit, view, and organize notes with ease
+- **Category Organization**: Assign notes to multiple categories for flexible organization
+- **Quick Search**: Find notes by title or content with the built-in search feature
+- **Clean Interface**: Minimalist design focused on content readability
 
-- Contains the site title/logo (if any)
-- "Create Note" button
-- Search bar
+### Using Holz Log
 
-### Sidebar (Left)
+1. **Creating Notes**: Click the "Create Note" button in the header to create a new note
+2. **Organizing Notes**: Assign categories when creating or editing notes
+3. **Finding Notes**: Browse by category using the sidebar, or use the search function
+4. **Editing Notes**: Each note has an "Edit" button for quick modifications
 
-- A list of all categories/notebooks
-- Each category is a clickable link
-- An "All Notes" link to display all notes regardless of category
+## For Developers
 
-### Main Content Area (Right)
+### Tech Stack
 
-- Displays a list of notes
-- Each note shows:
-  - Title (clickable link to view the full note)
-  - Short excerpt of the content (e.g., the first 100-200 characters)
-  - The categories/notebooks the note is assigned to
-  - An "Edit" button to open the edit form for that note
+- **Backend**:
 
-### Single Note View
+  - [Elixir](https://elixir-lang.org/) (v1.14+)
+  - [Phoenix Framework](https://www.phoenixframework.org/) (v1.7+)
+  - [Ecto](https://hexdocs.pm/ecto/Ecto.html) - Database abstraction layer
+  - [SQLite](https://www.sqlite.org/) - Database (via [ecto_sqlite3](https://hexdocs.pm/ecto_sqlite3))
 
-- Displays the full content of a single note
-- Shows the title and categories
-- An "Edit" button to edit the note
-- A "Back" button to return to the main notes list (or the category listing)
+- **Frontend**:
+  - [Phoenix LiveView](https://hexdocs.pm/phoenix_live_view/) - For interactive UI components
+  - [Tailwind CSS](https://tailwindcss.com/) - For styling
 
-## Tailwind CSS Styling
+### Architecture
 
-The site uses Tailwind CSS utility classes extensively. Here's a general overview of the styling approach:
+The application follows Phoenix's standard MVC architecture with LiveView components:
 
-- **Readability**: Focus on clear typography, good line height, and sufficient padding/margin
-- **Color Palette**: Primarily light backgrounds, with a muted accent color for links, headings, and highlighting. Dark mode is not implemented in this iteration
-- **Responsive Design**: Uses Tailwind's responsive prefixes (e.g., `md:`, `lg:`) to adjust the layout for different screen sizes. The sidebar typically collapses to a top navigation bar on smaller screens
+- **Contexts**: Business logic organized into domain-specific modules
+- **Schema**: Ecto schemas representing database tables with validations
+- **Controllers/LiveViews**: Handle incoming requests and manage state
+- **Templates**: Render HTML responses using HEEx templates
 
-## Database Schema (SQLite)
+#### UI Layout
 
-The SQLite database consists of two main tables:
+- **Header**: Site title, create button, search bar
+- **Sidebar**: Category navigation
+- **Main Content**: Note listing or individual note view
 
-### notes
+### Database Schema
+
+The application uses a SQLite database with the following structure:
+
+#### notes
 
 ```sql
 CREATE TABLE notes (
@@ -76,7 +81,7 @@ CREATE TABLE notes (
 );
 ```
 
-### categories
+#### categories
 
 ```sql
 CREATE TABLE categories (
@@ -85,7 +90,7 @@ CREATE TABLE categories (
 );
 ```
 
-### note_categories (Join Table)
+#### note_categories (Join Table)
 
 ```sql
 CREATE TABLE note_categories (
@@ -95,48 +100,47 @@ CREATE TABLE note_categories (
 );
 ```
 
-## Technologies Used
+### Setup and Installation
 
-- **Phoenix Framework**: The web framework
-- **Ecto**: Database abstraction layer
-- **SQLite**: Database
-- **Tailwind CSS**: CSS framework
-- **Earmark**: Markdown parser
+1. **Prerequisites**:
 
-## Setup Instructions
+   - Elixir and Erlang installed ([installation guide](https://elixir-lang.org/install.html))
+   - Phoenix Framework installed: `mix archive.install hex phx_new`
 
-1. Install Elixir and Erlang:
+2. **Clone and Setup**:
 
-   - Follow the instructions on the [Elixir website](https://elixir-lang.org/install.html)
+   ```bash
+   # Clone the repository
+   git clone https://github.com/yourusername/holz_log.git
+   cd holz_log
 
-2. Install Phoenix:
+   # Get dependencies
+   mix deps.get
 
-   ```bash
-   mix archive.install hex phx_new
+   # Setup database
+   mix ecto.setup
    ```
 
-3. Create a new Phoenix project:
+3. **Run the Application**:
 
    ```bash
-   mix phx.new my_microblog --no-html --no-webpack --no-dashboard
-   cd my_microblog
+   # Start Phoenix server
+   mix phx.server
    ```
 
-   - `--no-html` prevents the generation of the default HTML layouts (we'll use Tailwind instead)
-   - `--no-webpack` skips the default webpack configuration since we'll use the simpler esbuild
-   - `--no-dashboard` omits the Erlang Observer dashboard
-
-4. Install esbuild:
-   Add esbuild as a dependency in `mix.exs` and run `mix deps.get`:
-
-   ```elixir
-   defp deps do
-     [
-       {:phoenix, "~> 1.7.0"},
-       {:ecto_sqlite3, "~> 0.2"},
-       {:ecto_sql, "~> 3.0"},
-       {:esbuild, "~> 0.8", runtime: Mix.env() == :dev},
-       {:earmark, "~> 1.4"}
-     ]
-   end
-   ```
+4. Visit [`localhost:4000`](http://localhost:4000) in your browser
+
+### Development
+
+- **Code Format**: `mix format`
+- **Start Interactive Console**: `iex -S mix`
+
+## Roadmap
+
+- [x] Basic note creation and management
+- [x] Category organization
+- [ ] Add Earmark dependency for note body
+- [ ] Do not list category IDs in frontend
+- [ ] Implement database backups (download or email)
+- [ ] Change after create & update redirects to go back to main page
+- [ ] Increase note preview character limit