echo Web template

A simple web template for build websites with Next.js using echo Webkom's tech stack.

• Next.js
• TypeScript
• Tailwind CSS
• Prisma
• PostgreSQL

Getting started

Prerequisites

• Node.js (v18 or newer)
• pnpm (v6 or newer)
• Docker (v20 or newer)

Installation

1. Clone the repository

git clone [email protected]:echo-webkom/web-template.git

2. Copy .env.example to .env and fill in the values

cp .env.example .env

3. Install dependencies

pnpm install

4. Start the database

pnpm db:up

Will run the database in the background in a Docker container. Available at localhost:5432.

5. Run the migrations

pnpm db:deploy

6. Start the development server

pnpm dev

7. Open http://localhost:3000 with your browser to see the result.

Commands

• pnpm dev - Start the development server
• pnpm build - Build the application for production
• pnpm start - Start the production server
• pnpm lint - Run ESLint
• pnpm db:up - Build and start the database
• pnpm db:down - Stop and remove the database
• pnpm db:migrate - Create a new migration
• pnpm db:deploy - Run all pending migrations
• pnpm db:seed - Seed the database

Project structure

• prisma/ - Prisma schema and seed script
  • migrations/ - Database migrations generated by Prisma
  • schema.prisma - Prisma schema
  • seed.ts - Database seed script
• public/ - Static assets (favicon, images, etc.)
• src/ - Source code
  • components/ - React components
  • app/ - Page router using Next.js' app-router (SSR) (https://nextjs.org/docs/app)
  • styles/ - Styling for the application
  • lib/
    • db/ - Prisma client and other database related code
    • utils.ts - Utility functions
• .env - Environment variables
• .eslintrc.js - ESLint configuration
• docker-compose.yml - Docker Compose configuration
• next.config.mjs - Next.js configuration
• package.json - Package manifest
• pnpm-lock.yaml - Package lock file. Keeps track of exact versions of dependencies
• tailwind.config.ts - Tailwind CSS configuratio`
• tsconfig.json - TypeScript compiler options