Docs/NS-23-improve-readme (#63)

* docs: improve readme

* docs: final touches

.env.example

@@ -1,12 +1,10 @@
 # Duplicate this to .env.local
 
-NEXT_PUBLIC_SITE_URL='your site url'
+NEXT_PUBLIC_SITE_URL='your site url' ## not required for development
+NEXT_PUBLIC_GOOGLE_SITE_VERIFICATION_ID='your google site verification ID' ## not required for development
 
-NEXT_PUBLIC_GOOGLE_SITE_VERIFICATION_ID='your google site verification ID'
+NEXT_PUBLIC_GITHUB_ID='your github client ID' ## required for next-auth
+NEXT_PUBLIC_GITHUB_SECRET='your github secret ID' ## required for next-auth
 
-NEXT_PUBLIC_GITHUB_ID='your github client ID'
-NEXT_PUBLIC_GITHUB_SECRET='your github secret ID'
-
-NEXTAUTH_SECRET='your next-auth secret'
-## Only required for localhost
-NEXTAUTH_URL='http://localhost:3000'
+NEXTAUTH_SECRET='your next-auth secret' ## required for next-auth - generate one here: https://generate-secret.vercel.app/32
+NEXTAUTH_URL='http://localhost:3000' ## Only required for localhost

README.md

@@ -1,11 +1,13 @@
 ![thumbnail](https://github.com/Skolaczk/next-starter/assets/76774237/5ca2bfd8-019e-4cfa-9fec-209179cf4837)
-## Features
+## 🎉 Features
 - 🚀 Next.js 14 (App router)
 - ⚛️ React 18
 - 📘 Typescript
 - 🎨 TailwindCSS - Class sorting, merging and linting
 - 🛠️ Shadcn/ui - Customizable UI components
+- 🔒 Next-auth - Easy authentication library for Next.js (GitHub provider)
 - 🧪 Jest & React Testing Library - Configured for unit testing
+- 🎭 Playwright - Configured for e2e testing
 - 📈 Absolute Import & Path Alias - Import components using `@/` prefix
 - 💅 Prettier - Code formatter
 - 🧹 Eslint - Code linting tool
@@ -15,7 +17,15 @@
 - 🗺️ Sitemap & robots.txt - With next-sitemap
 - 📝 Commitlint - Lint your git commits
 - 🤖 Github actions - Lint your code on PR
-## Getting started
+- ⚙️ T3-env - Menage your environment variables
+- 💯 Perfect Lighthouse score
+
+## 🚀 Deployment
+Easily deploy your Next.js app with <a href="https://vercel.com/">Vercel</a> by clicking the button below:
+
+[![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/clone?repository-url=https://github.com/Skolaczk/next-starter)
+
+## 🎯 Getting started
 ### 1. Clone this template in one of three ways
 
 1. Using this repository as template
@@ -39,14 +49,17 @@
 npm install
 ```
 
-### 3. Prepare husky
+### 3. Set up environment variables
+Create `.env.local` file and set env variables from `.env.example` file.
+
+### 4. Prepare husky
 It is required if you want husky to work
 
 ```bash
 npm run prepare
 ```
 
-### 4. Run the dev server
+### 5. Run the dev server
 
 You can start the server using this command:
 
@@ -56,6 +69,25 @@ npm run dev
 
 and open http://localhost:3000/ to see this app.
 
+## ⚙️ Scripts overview
+The following scripts are available in the `package.json`:
+- `dev`: Run development server
+- `build`: Build the app
+- `start`: Run production server
+- `preview`: Run `build` and `start` commands together
+- `lint`: Lint the code using Eslint
+- `lint:fix`: Fix linting errors
+- `format:check`: Checks the code for proper formatting
+- `format:write`: Fix formatting issues
+- `typecheck`: Type-check TypeScript without emitting files
+- `test`: Run unit tests
+- `test:watch`: Run unit tests in watch mode
+- `e2e`: Run end-to-end tests
+- `e2e:ui`: Run end-to-end tests with UI
+- `postbuild`: Generate sitemap
+- `prepare`: Install Husky for managing Git hooks
+
+## ❤️ Support
 
 If you liked the project, I will appreciate if you leave a star. 🌟😊
 

package.json

@@ -6,16 +6,16 @@
     "dev": "next dev --turbo",
     "build": "next build",
     "start": "next start",
+    "preview": "next build && next start",
     "lint": "next lint",
     "lint:fix": "next lint --fix",
-    "preview": "next build && next start",
+    "format:check": "prettier --check \"**/*.{ts,tsx,mdx}\" --cache",
+    "format:write": "prettier --write \"**/*.{ts,tsx,mdx}\" --cache",
     "typecheck": "tsc --noEmit",
     "test": "jest",
     "test:watch": "jest --watchAll",
     "e2e": "playwright test",
     "e2e:ui": "playwright test --ui",
-    "format:write": "prettier --write \"**/*.{ts,tsx,mdx}\" --cache",
-    "format:check": "prettier --check \"**/*.{ts,tsx,mdx}\" --cache",
     "postbuild": "next-sitemap --config next-sitemap.config.js",
     "prepare": "husky install"
   },

src/components/navbar/theme-toggle.tsx

@@ -12,6 +12,7 @@ export const ThemeToggle = () => {
     <Button
       variant="ghost"
       size="icon"
+      aria-label="theme toggle"
       onClick={() => setTheme(theme === 'light' ? 'dark' : 'light')}
     >
       <Icons.sun className="hidden dark:block" />