docs: Add screenshots

README.md

@@ -1,5 +1,5 @@
-<p align="center">
-  <img src="public/brew_favicons/brew_1024.png" alt="Brew Journal Logo" width="256" height="256" />
+>   <img src="public/brew_favicons/brew_1024.png" alt="Brew Journal Logo" width="256" height="256" />
+
 </p>
 
 <h1 align="center">Brew Journal</h1>
@@ -24,20 +24,7 @@
 
 ## Screenshots
 
-<p align="center">
-  <!-- Place your app screenshots here once available -->
-  <em>Screenshots coming soon!</em>
-</p>
-
-<!--
-<p align="center">
-  <img src="path/to/dashboard.png" alt="Brew Journal Dashboard" width="800" />
-</p>
-<p align="center">
-  <img src="path/to/mobile_dashboard.png" alt="Mobile Dashboard View" width="280" style="margin-right: 10px;" />
-  <img src="path/to/brew_form.png" alt="Brew Logging View" width="280" />
-</p>
--->
+![screenshot](./docs/assets/screenshot.jpg)
 
 ## Features
 
@@ -51,6 +38,7 @@
 ## Architecture Overview
 
 The codebase is split into two main sections:
+
 - **Frontend**: A React application located in the root directory, built with [Vite](https://vite.dev/). Key files include:
   - [package.json](file:///home/sortedcord/Projects/brew/package.json) (dependencies and scripts)
   - [src/App.jsx](file:///home/sortedcord/Projects/brew/src/App.jsx) (routing and layout)
@@ -63,6 +51,7 @@ The codebase is split into two main sections:
 ## Prerequisites
 
 Make sure you have the following installed on your system:
+
 - **Node.js** (v18.x or higher recommended)
 - **npm** (v9.x or higher)
 - **PostgreSQL** (v14 or higher)
@@ -76,44 +65,54 @@ You need a running PostgreSQL database instance. Follow the steps below based on
 #### Installing PostgreSQL
 
 ##### Linux (Debian/Ubuntu)
+
 ```bash
 sudo apt update
 sudo apt install postgresql postgresql-contrib
 ```
+
 The PostgreSQL service should start automatically. If not, start it with:
+
 ```bash
 sudo systemctl start postgresql
 sudo systemctl enable postgresql
 ```
 
 ##### macOS (using Homebrew)
+
 ```bash
 brew install postgresql
 brew services start postgresql
 ```
 
 ##### Windows
+
 Download and run the interactive installer from the [Official PostgreSQL Downloads page](https://www.postgresql.org/download/windows/).
 
 ##### Creating the Database and User
 
 1. Log into the PostgreSQL interactive terminal as the superuser `postgres`:
+
    ```bash
    sudo -i -u postgres psql
    ```
-   *(On macOS/Windows, open your terminal/command prompt and run `psql postgres` or use a graphical tool like PgAdmin).*
+
+   _(On macOS/Windows, open your terminal/command prompt and run `psql postgres` or use a graphical tool like PgAdmin)._
 
 2. Create a database user with a secure password:
+
    ```sql
    CREATE USER brew_user WITH PASSWORD 'your_secure_password';
    ```
 
 3. Create the database and set its owner to `brew_user`. Setting the owner guarantees that the user has full table creation privileges on the default `public` schema:
+
    ```sql
    CREATE DATABASE brew OWNER brew_user;
    ```
 
 4. Exit the PostgreSQL shell:
+
    ```sql
    \q
    ```
@@ -121,6 +120,7 @@ Download and run the interactive installer from the [Official PostgreSQL Downloa
 > [!TIP]
 > **Troubleshooting "Permission denied for schema public" (PostgreSQL 15+):**
 > If you already created the database without setting `brew_user` as the owner and encounter this error, log in as the superuser (`postgres`), connect to the `brew` database, and explicitly grant the schema privileges:
+>
 > ```sql
 > \c brew
 > GRANT ALL ON SCHEMA public TO brew_user;
@@ -132,29 +132,36 @@ Download and run the interactive installer from the [Official PostgreSQL Downloa
 ### 2. Backend Setup
 
 1. Navigate to the backend directory:
+
    ```bash
    cd server
    ```
 
 2. Create a [server/.env](file:///home/sortedcord/Projects/brew/server/.env) file by copying the template [server/.env.example](file:///home/sortedcord/Projects/brew/server/.env.example):
+
    ```bash
    cp .env.example .env
    ```
 
 3. Open [server/.env](file:///home/sortedcord/Projects/brew/server/.env) and configure the environment variables:
+
    ```env
    PORT=5000
    DATABASE_URL=postgresql://brew_user:your_secure_password@localhost:5432/brew
    JWT_SECRET=your_jwt_secret_here
    ```
-   *Replace `your_secure_password` with the password you set during the database setup.*
+
+   _Replace `your_secure_password` with the password you set during the database setup._
 
 4. Install dependencies and start the backend server:
+
    ```bash
    npm install
    npm start
    ```
+
    The backend should start and display:
+
    ```text
    Database initialized
    Server running on port 5000
@@ -163,16 +170,19 @@ Download and run the interactive installer from the [Official PostgreSQL Downloa
 ### 3. Frontend Setup
 
 1. Open a new terminal window/tab and navigate to the project root directory:
+
    ```bash
    cd /home/sortedcord/Projects/brew
    ```
 
 2. Install frontend dependencies:
+
    ```bash
    npm install
    ```
 
 3. Start the Vite development server:
+
    ```bash
    npm run dev
    ```
@@ -184,17 +194,20 @@ Download and run the interactive installer from the [Official PostgreSQL Downloa
 When deploying the Brew application to a production environment, follow these guidelines for security, reliability, and performance:
 
 ### 1. Database (PostgreSQL)
+
 - **Restricted Access**: Do not use superuser accounts (such as `postgres`) for backend application connections. Instead, use a restricted role with standard read/write permissions.
 - **Managed Databases**: Use a managed database service (e.g., Supabase, Neon, AWS RDS, GCP Cloud SQL) to leverage automated backups, scaling, and high-availability.
 - **SSL Connection**: Enforce encrypted database connections by appending SSL options to the connection string (e.g., `?sslmode=require`).
 
 ### 2. Backend Server Setup
+
 - **Environment Variables**: In your production environment, set the following environment variables:
   - `NODE_ENV=production`
   - `PORT=8080` (or whichever port is provided by your host)
   - `DATABASE_URL=postgresql://<db_user>:<db_password>@<db_host>:<db_port>/<db_name>?sslmode=require`
   - `JWT_SECRET=your_long_random_production_secret` (generate a secure 32-byte key using `openssl rand -base64 32`)
 - **Process Management**: Use a process manager like **PM2** to run the backend node process, keep it alive, and handle automatic clustering or restarts:
+
   ```bash
   # Install PM2 globally
   npm install -g pm2
@@ -202,20 +215,27 @@ When deploying the Brew application to a production environment, follow these gu
   # Start the backend server
   pm2 start server/index.js --name "brew-backend"
   ```
+
 - **Restrict CORS**: In [server/index.js](file:///home/sortedcord/Projects/brew/server/index.js), configure the `cors` middleware to only accept requests from your frontend production domain:
+
   ```javascript
-  app.use(cors({ origin: 'https://yourfrontenddomain.com' }));
+  app.use(cors({ origin: "https://yourfrontenddomain.com" }));
   ```
 
 ### 3. Frontend Build & Hosting
+
 - **Build the static bundle**: Run the build script in the root directory to generate optimized production assets:
+
   ```bash
   npm run build
   ```
+
   This generates static HTML, CSS, and JS files in the `dist/` directory.
+
 - **Hosting**:
   - Deploy the static files from the `dist/` directory to static hosting platforms like **Vercel**, **Netlify**, **Cloudflare Pages**, or **AWS S3/CloudFront**.
   - Alternatively, if using a VPS, serve the `dist/` directory using **Nginx** and proxy API traffic:
+
     ```nginx
     server {
         listen 80;