BetaVersion.io Website

A modern, enterprise-grade Next.js application built with TypeScript and Tailwind CSS.

Tech Stack

• Framework: Next.js 16
• Language: TypeScript 5
• Styling: Tailwind CSS 4
• Package Manager: pnpm 9
• Runtime: Node.js 20
• Container: Docker

Prerequisites

• Node.js 20.x or higher
• pnpm 9.x (recommended)
• Docker (optional, for containerized development)

Getting Started

Local Development

1. Clone the repository

git clone https://github.com/YOUR-USERNAME/website.git
cd website

2. Install dependencies

pnpm install

3. Set up environment variables

cp .env.example .env.local
# Edit .env.local with your configuration

4. Start the development server

pnpm dev

Open http://localhost:3000 in your browser.

Docker Development

Start the development environment:

docker-compose -f docker-compose.dev.yml up

Or using the npm script:

pnpm docker:dev

Available Scripts

• pnpm dev - Start development server
• pnpm build - Build for production
• pnpm start - Start production server
• pnpm lint - Run ESLint
• pnpm lint:fix - Fix linting issues
• pnpm format - Format code with Prettier
• pnpm format:check - Check code formatting
• pnpm type-check - Run TypeScript type checking
• pnpm docker:build - Build Docker image
• pnpm docker:up - Start Docker containers
• pnpm docker:down - Stop Docker containers
• pnpm docker:dev - Start Docker development environment

Makefile Commands

For convenience, common tasks are available via Makefile:

make help          # Show all available commands
make install       # Install dependencies
make dev           # Start development server
make build         # Build for production
make lint          # Run linter
make format        # Format code
make clean         # Clean build artifacts
make docker-build  # Build Docker image
make docker-up     # Start Docker containers
make docker-down   # Stop Docker containers

Project Structure

.
├── .github/              # GitHub configuration
│   ├── workflows/        # CI/CD workflows
│   ├── ISSUE_TEMPLATE/   # Issue templates
│   └── PULL_REQUEST_TEMPLATE.md
├── .vscode/              # VS Code settings
│   ├── settings.json
│   ├── extensions.json
│   └── launch.json
├── app/                  # Next.js app directory
│   ├── api/              # API routes
│   ├── globals.css       # Global styles
│   ├── layout.tsx        # Root layout
│   └── page.tsx          # Home page
├── public/               # Static assets
├── .editorconfig         # Editor configuration
├── .env.example          # Environment variables template
├── .gitignore            # Git ignore rules
├── .nvmrc                # Node version
├── .prettierrc           # Prettier configuration
├── docker-compose.yml    # Docker Compose configuration
├── Dockerfile            # Docker image definition
├── LICENSE               # MIT License
├── Makefile              # Common tasks
├── next.config.ts        # Next.js configuration
├── package.json          # Dependencies and scripts
├── postcss.config.mjs    # PostCSS configuration
├── README.md             # This file
├── CONTRIBUTING.md       # Contribution guidelines
├── SECURITY.md           # Security policy
└── tsconfig.json         # TypeScript configuration

Docker

Building the Image

docker build -t website .

Running in Production

docker-compose up -d

Development with Hot Reload

docker-compose -f docker-compose.dev.yml up

Health Check

The application includes a health check endpoint at /api/health that returns:

{
  "uptime": 123.456,
  "message": "OK",
  "timestamp": 1234567890,
  "environment": "production",
  "version": "0.1.0"
}

VS Code Setup

The project includes recommended VS Code settings and extensions:

Recommended Extensions

• ESLint
• Prettier
• Tailwind CSS IntelliSense
• Docker
• GitLens
• Error Lens
• Path Intellisense
• Pretty TypeScript Errors

Debug Configuration

Press F5 to start debugging with the included launch configurations:

• Debug server-side
• Debug client-side
• Debug full stack
• Attach to Docker container

CI/CD

The project uses GitHub Actions for continuous integration and deployment:

Workflows

• CI: Runs on every push and PR

  • Linting
  • Type checking
  • Build verification
  • Security audit

• Docker Build: Builds and pushes Docker images

  • Multi-platform support (AMD64, ARM64)
  • Automated tagging
  • GitHub Container Registry integration

• Dependabot Auto-merge: Automatically merges minor and patch updates

Pull Requests

All PRs must:

• Pass all CI checks
• Have at least one approval
• Be up to date with the base branch
• Follow the PR template

Contributing

Please read CONTRIBUTING.md for details on our code of conduct and the process for submitting pull requests.

Security

For security concerns, please review our SECURITY.md policy.

Code Style

This project follows strict code style guidelines:

• ESLint: JavaScript/TypeScript linting
• Prettier: Code formatting
• EditorConfig: Consistent coding styles

Format your code before committing:

pnpm format

Environment Variables

Copy .env.example to .env.local and configure:

cp .env.example .env.local

See .env.example for available configuration options.

License

This project is licensed under the MIT License - see the LICENSE file for details.

Support

For questions and support:

• Open an issue on GitHub
• Check existing discussions
• Review the documentation

Deployment

Vercel (Recommended)

Docker Deployment

1. Build the image:

docker build -t website .

2. Run the container:

docker run -p 3000:3000 website

Manual Deployment

1. Build the application:

pnpm build

2. Start the production server:

pnpm start

Performance

• Server-side rendering (SSR)
• Static site generation (SSG)
• Image optimization (AVIF, WebP)
• Code splitting
• Security headers

Browser Support

• Chrome (latest)
• Firefox (latest)
• Safari (latest)
• Edge (latest)

Acknowledgments

• Built with Next.js
• Styled with Tailwind CSS
• Hosted on Vercel