Index: README.md =================================================================== --- README.md (revision ff3a6146e85f77e90dc322a0ad0c9d9eb048c629) +++ README.md (revision 8ee45534cd667e6cced2ed96968c95d8de3b1029) @@ -1,161 +1,53 @@ -# PC Forge +Generated with [vike.dev/new](https://vike.dev/new) ([version 544](https://www.npmjs.com/package/create-vike/v/0.0.544)) using this command: -**Forge your own PC build.** A web application for crafting, sharing, and rating custom PC builds. A project for the **Databases 2025/26** course. - -## ✨ Features - -- 🔨 Forge custom PC builds from a comprehensive component database -- 💾 Browse CPUs, GPUs, motherboards, storage, and more -- ⭐ Rate and review community builds -- 💬 Suggest new components for the database -- 👤 User authentication and admin management - -## 🛠️ Tech Stack - -- **Frontend**: React 19, Material-UI, Emotion -- **Backend**: Hono, Node.js -- **Database**: PostgreSQL 16 -- **ORM**: Drizzle ORM -- **Build Tool**: Vite -- **Containerization**: Docker & Docker Compose - -## 📋 Prerequisites - -- [Docker Desktop](https://www.docker.com/products/docker-desktop) (latest version) -- Docker Compose V2 (included with Docker Desktop) -- [Node.js 20+](https://nodejs.org/) (optional, for local development) -- [npm](https://www.npmjs.com/) - -## 🚀 Quick Start - -### 1. Clone the Repository -```agsl -git clone https://github.com/nkvtd/pc-forge.git -cd pc-forge +```sh +npm create vike@latest --- --react --authjs --telefunc --hono --drizzle --biome ``` -### 2. Configure Environment +## Contents -**Copy the example environment file:** -```agsl -cp .env.example .env -``` -**Update only the AUTH_SECRET in `.env`:** -```agsl -DATABASE_URL="postgresql://app:app@db:5432/postgres" -AUTH_SECRET="YOUR_GENERATED_SECRET_KEY_HERE" -PORT=8080 -``` -> **Important**: The `DATABASE_URL` and `PORT` are pre-configured for Docker. Only change the `AUTH_SECRET` to a random, secure value (you can generate one using `openssl rand -base64 32`). +- [Vike](#vike) + - [Plus files](#plus-files) + - [Routing](#routing) + - [SSR](#ssr) + - [HTML Streaming](#html-streaming) +- [Photon](#photon) -### 3. Start with Docker -```agsl -docker compose up --build -``` +## Vike -The application will automatically: -- ✅ Start PostgreSQL database on port **5432** -- ✅ Run database migrations -- ✅ Seed initial data (users, components, builds) -- ✅ Start the web server on port **8080** +This app is ready to start. It's powered by [Vike](https://vike.dev) and [React](https://react.dev/learn). -**Access the application at: http://localhost:8080** +### Plus files -## ⚙️ Pre-configured Settings +[The + files are the interface](https://vike.dev/config) between Vike and your code. -The following settings are pre-configured for Docker and should **not** be changed unless you know what you're doing: +- [`+config.ts`](https://vike.dev/settings) — Settings (e.g. ``) +- [`+Page.tsx`](https://vike.dev/Page) — The `<Page>` component +- [`+data.ts`](https://vike.dev/data) — Fetching data (for your `<Page>` component) +- [`+Layout.tsx`](https://vike.dev/Layout) — The `<Layout>` component (wraps your `<Page>` components) +- [`+Head.tsx`](https://vike.dev/Head) - Sets `<head>` tags +- [`/pages/_error/+Page.tsx`](https://vike.dev/error-page) — The error page (rendered when an error occurs) +- [`+onPageTransitionStart.ts`](https://vike.dev/onPageTransitionStart) and `+onPageTransitionEnd.ts` — For page transition animations -- **Database Host**: `db` (Docker service name) -- **Database Port**: `5432` -- **Database Name**: `postgres` -- **Database User**: `app` -- **Database Password**: `app` -- **Application Port**: `8080` +### Routing -## 💻 Development +[Vike's built-in router](https://vike.dev/routing) lets you choose between: -### Local Development (Without Docker) -**Install dependencies** -```agsl -npm install -``` -**Update DATABASE_URL in .env to use localhost** -```agsl -DATABASE_URL="postgresql://app:app@localhost:5432/postgres" -``` -**Run database migrations** -```agsl -npm run drizzle:migrate -``` +- [Filesystem Routing](https://vike.dev/filesystem-routing) (the URL of a page is determined based on where its `+Page.jsx` file is located on the filesystem) +- [Route Strings](https://vike.dev/route-string) +- [Route Functions](https://vike.dev/route-function) -**Seed database** -```agsl -npm run drizzle:seed -``` +### SSR -**Start development server** -```agsl -npm run dev -``` +SSR is enabled by default. You can [disable it](https://vike.dev/ssr) for all or specific pages. -## 📁 Project Structure -```agsl -pc-forge/ -├── database/ -│ └── drizzle/ -│ ├── schema/ # Database schema definitions -│ ├── queries/ # Database queries -│ └── util/ -│ └── seed.ts # Database seeding script -├── dist/ # Built application -├── migrations/ # Generated database migrations -├── pages/ # Vike pages -├── server/ # Backend server code -├── Dockerfile # Docker image configuration -├── docker-compose.yml # Docker services orchestration -├── docker-entrypoint.sh # Container startup script -├── drizzle.config.ts # Drizzle ORM configuration -├── .env.example # Example environment variables -└── package.json -``` +### HTML Streaming +You can [enable/disable HTML streaming](https://vike.dev/stream) for all or specific pages. -## 👥 Default Users +## Photon -After the database is seeded, you can log in with these accounts: +[Photon](https://photonjs.dev) is a next-generation infrastructure for deploying JavaScript servers. -| Username | Password | Role | -|----------|----------|------| -| admin | admin | Admin | -| tome | tg | User | -| mihail | mn | User | -| stefan | sv | User | -| pc_wizard | pw | User | -| budget_king | bk | User | -| rgb_lover | rgb | User | -| streamer_pro | sp | User | -| office_guy | og | User | -| linux_fan | lf | User | -| first_timer | ft | User | +See [Introducing Photon](https://vike.dev/blog/photon) and [Why Photon](https://photonjs.dev/why) to learn more. -## 🔧 Environment Variables - -| Variable | Description | Default | Should Change? | -|----------|-------------|---------|----------------| -| `DATABASE_URL` | PostgreSQL connection string | `postgresql://app:app@db:5432/postgres` | ❌ No (pre-configured) | -| `AUTH_SECRET` | Authentication secret key | - | ✅ **Yes (required)** | -| `PORT` | Application port | `8080` | ❌ No (pre-configured) | - -# 📚 Course Information - -This project was developed for the Databases 2025/26 course. It demonstrates: - -- Complex relational database design with PostgreSQL -- Database migrations and seeding -- ORM usage (Drizzle ORM) -- Full-stack web application development -- Containerization with Docker - -# 📄 License - -MIT License