Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/mo-hassann/next-hono-starter
"HAND" Stack Starter is a starter template for building modern web applications with Next.js, Hono.js for APIs, Auth.js for authentication, TanStack Query for data fetching, and Drizzle ORM for type-safe database interactions.
https://github.com/mo-hassann/next-hono-starter
auth drizzle hono nextjs starter-code starter-template tanstack-react-query
Last synced: 27 days ago
JSON representation
"HAND" Stack Starter is a starter template for building modern web applications with Next.js, Hono.js for APIs, Auth.js for authentication, TanStack Query for data fetching, and Drizzle ORM for type-safe database interactions.
- Host: GitHub
- URL: https://github.com/mo-hassann/next-hono-starter
- Owner: mo-hassann
- License: mit
- Created: 2024-07-08T21:19:25.000Z (4 months ago)
- Default Branch: main
- Last Pushed: 2024-09-13T19:51:53.000Z (2 months ago)
- Last Synced: 2024-10-04T22:11:34.797Z (about 2 months ago)
- Topics: auth, drizzle, hono, nextjs, starter-code, starter-template, tanstack-react-query
- Language: TypeScript
- Homepage:
- Size: 190 KB
- Stars: 2
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Hono.js, Auth.js, Next.js, Drizzle ORM Starter (HAND Stack Starter)
This is a starter template for building modern web applications using Next.js, Hono.js, Auth.js, TanStack Query, and Drizzle ORM. The project is structured to offer authentication, server-side data management, and type-safe database queries out of the box. I named this stack the "HAND" Stack which stands for (Hono.js, Auth.js, Next.js, Drizzle ORM)
## ✨ Features
- **Next.js Framework**: Provides server-side rendering, static site generation, and routing capabilities.
- **Hono.js for Server APIs**: Ultra-lightweight web framework to create fast and flexible backend APIs.
- **Auth.js Integration**: Pre-configured user authentication and session management with Auth.js.
- **TanStack Query for Data Fetching**: Efficient and powerful data-fetching library for managing server state.
- **Drizzle ORM**: A TypeScript-first ORM for type-safe and scalable database queries.
- **Environment Variables**: Pre-configured `.env` setup for sensitive information such as database URLs and secret keys.## 🛠️ Tech Stack
- **Next.js**: A React framework for building full-stack web applications with ease.
- **Hono.js**: A lightweight, performant framework for building server-side applications and APIs.
- **Auth.js**: Authentication library for handling sign-up, login, and session management.
- **TanStack Query**: Data-fetching and server-state management library.
- **Drizzle ORM**: Type-safe ORM with full TypeScript support for interacting with SQL databases.## 📦 Getting Started
To get a local copy of this project up and running, follow these steps.
### Prerequisites
- **Node.js** (v16.x or higher)
- **npm** or **yarn** as your package manager
- **PostgreSQL** (or another supported SQL database)### 🚀 Installation
1. **Clone the repository:**
```bash
git clone https://github.com/mo-hassann/next-hono-starter.git
cd next-hono-starter
```2. **Install dependencies:**
Using npm:
```bash
npm install
```Or using yarn:
```bash
yarn install
```3. **Set up environment variables:**
Create a `.env` file in the root directory and add the following variables:
```env
DATABASE_URL=your_database_url
DATABASE_SECRET=your_database_secret
DRIZZLE_DATABASE_URL=your_database_url_for_drizzle
AUTH_SECRET=any_random_secret
NEXT_PUBLIC_APP_URL=http://localhost:3000
```4. **Run database migrations:**
Run Drizzle ORM migrations to initialize the database:
```bash
npm run migrate
```5. **Start the development server:**
Using npm:
```bash
npm run dev
```Or using yarn:
```bash
yarn dev
```Open [http://localhost:3000](http://localhost:3000) to view the app in your browser.
## 📖 Usage
### Running the app
- **Development mode:** `npm run dev` or `yarn dev`
- **Production mode:** `npm run build && npm start` or `yarn build && yarn start`### API Endpoints
Hono.js serves as the API layer. The routes for backend APIs can be found in the `api/` directory, and they are fully integrated with Next.js for API routing.
### Authentication
Auth.js is set up to handle authentication and session management. You can configure the authentication provider and customize it further by modifying the `auth.js` configuration files.
## ⚙️ Customization
1. **Database Schema**: Modify the Drizzle ORM schema in the `db/schema.ts` file to define your own tables and relationships.
2. **API Routes**: Add or modify API endpoints in the `api/` folder to create custom server-side logic using Hono.js.
3. **Frontend Components**: Update the frontend components in the `components/` and `pages/` directories to customize the user interface.## 🤝 Contributing
We welcome contributions to this starter project. To contribute:
1. **Fork the repository.**
2. **Create a new branch** (`git checkout -b feature/your-feature-name`).
3. **Make your changes** and commit them (`git commit -m 'Add some feature'`).
4. **Push to the branch** (`git push origin feature/your-feature-name`).
5. **Open a pull request**.Please make sure to follow the coding guidelines and update tests as appropriate.
## 📜 License
This project is licensed under the MIT License. See the [LICENSE](LICENSE) file for more information.