An open API service indexing awesome lists of open source software.

https://github.com/erishen/interview

Next.js Turborepo Monorepo
https://github.com/erishen/interview

monorepo nextjs react supabase tailwindcss turborepo typescript vercel

Last synced: about 1 month ago
JSON representation

Next.js Turborepo Monorepo

Awesome Lists containing this project

README

          

# Interview Project

A modern interview project built with Next.js and monorepo architecture using Turborepo.

# Vercel URL
- https://admin.erishen.cn
- https://web.erishen.cn

## ๐Ÿ—๏ธ Architecture

This project uses a monorepo structure with the following organization:

```
interview/
โ”œโ”€โ”€ apps/
โ”‚ โ”œโ”€โ”€ web/ # Main Next.js application
โ”‚ โ””โ”€โ”€ admin/ # Admin dashboard (Next.js)
โ”œโ”€โ”€ packages/
โ”‚ โ”œโ”€โ”€ ui/ # Shared UI components
โ”‚ โ”œโ”€โ”€ utils/ # Utility functions
โ”‚ โ”œโ”€โ”€ config/ # Configuration files
โ”‚ โ”œโ”€โ”€ types/ # TypeScript type definitions
โ”‚ โ””โ”€โ”€ eslint-config/ # Shared ESLint configuration
โ”œโ”€โ”€ package.json # Root package.json
โ”œโ”€โ”€ pnpm-workspace.yaml
โ”œโ”€โ”€ turbo.json # Turborepo configuration
โ””โ”€โ”€ tsconfig.json # Root TypeScript configuration
```

## ๐Ÿš€ Getting Started

### Prerequisites

- Node.js 18+
- pnpm 8+

### Installation

1. Clone the repository:
```bash
git clone
cd interview
```

2. Install dependencies:
```bash
pnpm install
```

3. Start the development server:
```bash
pnpm dev
```

This will start:
- Web app at http://localhost:3000
- Admin app at http://localhost:3003

## ๐Ÿ“ฆ Available Scripts

- `pnpm dev` - Start all applications in development mode
- `pnpm build` - Build all applications for production
- `pnpm lint` - Run ESLint across all packages
- `pnpm type-check` - Run TypeScript type checking
- `pnpm test` - Run tests across all packages
- `pnpm clean` - Clean build artifacts
- `pnpm format` - Format code with Prettier

## ๐Ÿ—๏ธ Project Structure

### Apps

- **web**: Main Next.js application with modern UI
- **admin**: Admin dashboard for managing the application

### Packages

- **ui**: Reusable React components with Tailwind CSS
- **utils**: Utility functions and helpers
- **config**: Configuration files and constants
- **types**: Shared TypeScript type definitions
- **eslint-config**: Shared ESLint configuration

## ๐Ÿ› ๏ธ Tech Stack

- **Framework**: Next.js 14 with App Router
- **Language**: TypeScript
- **Styling**: Tailwind CSS
- **Build Tool**: Turborepo
- **Package Manager**: pnpm
- **Linting**: ESLint + Prettier

## ๐Ÿ“š Articles

Technical articles about this project:

- ๐Ÿ‡จ๐Ÿ‡ณ **[ไธชไบบๅšๅฎข](https://erishen.cn/?p=180)** - ไปŽ้›ถๆญๅปบๅ…จๆ ˆๆŠ€ๆœฏ็Ÿฅ่ฏ†ๅบ“๏ผšMonorepo + Next.js 14 + FastAPI
- ๐Ÿ‡จ๐Ÿ‡ณ **[ๆŽ˜้‡‘](https://juejin.cn/post/7589110783146164258)** - ไปŽ้›ถๆญๅปบๅ…จๆ ˆๆŠ€ๆœฏ็Ÿฅ่ฏ†ๅบ“๏ผšMonorepo + Next.js 14 + FastAPI
- ๐Ÿ‡จ๐Ÿ‡ณ **[SegmentFault](https://segmentfault.com/a/1190000047510388)** - ไปŽ้›ถๆญๅปบๅ…จๆ ˆๆŠ€ๆœฏ็Ÿฅ่ฏ†ๅบ“๏ผšMonorepo + Next.js 14 + FastAPI
- ๐ŸŒ **[Medium](https://medium.com/@leisun8309/building-a-full-stack-technical-knowledge-base-from-scratch-monorepo-next-js-14-fastapi-8d5cc533d401)** - Building a Full-Stack Technical Knowledge Base from Scratch: Monorepo + Next.js 14 + FastAPI

## ๐Ÿ”ง Development

### Adding New Packages

To add a new package to the monorepo:

1. Create a new directory in `packages/`
2. Add a `package.json` with the naming convention `@interview/package-name`
3. Update the root `tsconfig.json` paths if needed
4. Add the package to relevant app dependencies

### Working with Shared Components

Components from the `@interview/ui` package can be imported in any app:

```tsx
import { Button, Card, Input } from "@interview/ui";
```

### Environment Variables

Create `.env.local` files in individual apps for environment-specific variables:

```bash
# apps/web/.env.local
NEXT_PUBLIC_API_URL=http://localhost:3000/api
```

## ๐Ÿ“ Code Style

This project uses:
- ESLint for code linting
- Prettier for code formatting
- TypeScript for type safety

Run `pnpm lint` and `pnpm format` before committing changes.

## ๐Ÿš€ Deployment

### Building for Production

```bash
pnpm build
```

### Individual App Deployment

Each app can be deployed independently:

```bash
# Build specific app
cd apps/web
pnpm build
pnpm start
```

## ๐Ÿค Contributing

1. Fork the repository
2. Create a feature branch
3. Make your changes
4. Run tests and linting
5. Submit a pull request

## ๐Ÿ“„ License

This project is licensed under the MIT License.