chore: Updated frontend template and readme
5e93ae3b
3 file(s) · +26 −10
| 1 | - | # bhvr |
|
| 1 | + | # 🦫 bhvr |
|
| 2 | 2 | ||
| 3 | 3 | A full-stack TypeScript monorepo starter with shared types, using Bun, Hono, Vite, and React |
|
| 4 | 4 | ||
| 61 | 61 | Types are automatically shared between the client and server thanks to the shared package and TypeScript path aliases. You can import them in your code using: |
|
| 62 | 62 | ||
| 63 | 63 | ```typescript |
|
| 64 | - | import { User, Document } from '@shared/types'; |
|
| 64 | + | import { ApiResponse } from '@shared/types'; |
|
| 65 | 65 | ``` |
|
| 66 | 66 | ||
| 67 | 67 | ## Learn More |
|
| 28 | 28 | } |
|
| 29 | 29 | ||
| 30 | 30 | @media (prefers-reduced-motion: no-preference) { |
|
| 31 | - | a:nth-of-type(2) .logo { |
|
| 31 | + | a:nth-of-type(1) .logo { |
|
| 32 | 32 | animation: logo-spin infinite 20s linear; |
|
| 33 | 33 | } |
|
| 34 | 34 | } |
|
| 46 | 46 | border-radius: 15px; |
|
| 47 | 47 | padding: 2rem; |
|
| 48 | 48 | } |
|
| 49 | + | ||
| 50 | + | .code { |
|
| 51 | + | text-align: start; |
|
| 52 | + | max-width: 500px; |
|
| 53 | + | margin: auto; |
|
| 54 | + | } |
|
| 21 | 21 | return ( |
|
| 22 | 22 | <> |
|
| 23 | 23 | <div> |
|
| 24 | - | <a href="https://react.dev" target="_blank"> |
|
| 24 | + | <a href="https://github.com/stevedylandev/bhvr" target="_blank"> |
|
| 25 | 25 | <img src={beaver} className="logo" alt="beaver logo" /> |
|
| 26 | 26 | </a> |
|
| 27 | 27 | </div> |
|
| 28 | - | <h1>BHVR</h1> |
|
| 29 | - | <h3>Bun + Hono + Vite + React</h3> |
|
| 28 | + | <h1>bhvr</h1> |
|
| 29 | + | <h2>Bun + Hono + Vite + React</h2> |
|
| 30 | + | <p>A typesafe fullstack monorepo</p> |
|
| 30 | 31 | <div className="card"> |
|
| 31 | 32 | <button onClick={sendRequest}> |
|
| 32 | 33 | Call API |
|
| 39 | 40 | </code> |
|
| 40 | 41 | </pre> |
|
| 41 | 42 | )} |
|
| 42 | - | <p> |
|
| 43 | - | Edit <code>src/App.tsx</code> and save to test HMR |
|
| 44 | - | </p> |
|
| 43 | + | <pre className='code'> |
|
| 44 | + | <code> |
|
| 45 | + | {` |
|
| 46 | + | . |
|
| 47 | + | ├── client/ # React frontend |
|
| 48 | + | ├── server/ # Hono backend |
|
| 49 | + | ├── shared/ # Shared TypeScript definitions |
|
| 50 | + | │ └── src/types/ # Type definitions used by both client and server |
|
| 51 | + | └── package.json # Root package.json with workspaces |
|
| 52 | + | `} |
|
| 53 | + | </code> |
|
| 54 | + | </pre> |
|
| 45 | 55 | </div> |
|
| 46 | 56 | <p className="read-the-docs"> |
|
| 47 | - | Click on the Vite and React logos to learn more |
|
| 57 | + | Click the beaver to learn more |
|
| 48 | 58 | </p> |
|
| 49 | 59 | </> |
|
| 50 | 60 | ) |
|