Merge pull request #121 from Friedrich482/features

Website (marketing landing page) for the project

Author: Friedrich482

.dockerignore

@@ -8,4 +8,6 @@ tsconfig.tsbuildinfo
 **/compose.*.yaml
 **/node_modules
 packages/eslint-config
-**/eslint.config.ts
+**/eslint.config.ts
+**/.next
+**/out

.github/workflows/build-and-deploy.yaml

@@ -1,11 +1,11 @@
-name: MoonCode CI/CD Pipeline - Build api docker image and deploy to production
+name: MoonCode CI/CD Pipeline - Build api and web app docker images and deploy to production
 
 on:
   push:
     branches: "main"
 
 jobs:
-  build-and-push-docker-image:
+  build-and-push-docker-images:
     runs-on: ubuntu-latest
 
     steps:
@@ -34,3 +34,4 @@ jobs:
         run: |
           IMAGE_TAG=${{ github.sha }}
           docker buildx build --platform linux/amd64 -t ${{ secrets.DOCKERHUB_USERNAME }}/mooncode-api:$IMAGE_TAG -t ${{ secrets.DOCKERHUB_USERNAME }}/mooncode-api:latest --push -f apps/api/Dockerfile .
+          docker buildx build --platform linux/amd64 -t ${{ secrets.DOCKERHUB_USERNAME }}/mooncode-web:$IMAGE_TAG -t ${{ secrets.DOCKERHUB_USERNAME }}/mooncode-web:latest --push -f apps/web/Dockerfile .

README.md

@@ -4,8 +4,8 @@
   <img width="200" height="200" alt="Moon" src="https://github.com/user-attachments/assets/e38843c0-22dd-4dbc-985e-eab77277acc4" />
 </p>
 
-<p align="center">An application that tracks and monitors you coding time with a detailled summary<br/>
-<a href="">link_to_website</a> (coming soon)
+<p align="center">Track your coding activity with ease.<br/>
+<a href="https://mooncode.cc">mooncode.cc</a>
 </p>
 
 <p align="center">
@@ -17,27 +17,28 @@
 
 This project is the monorepo for MoonCode. This is an application to track and get a detailled summary about your coding time, languages, files across any period.
 
-## Features 🚀
+## Features
 
 - Summary of coding time per day, week, month, year,... and any custom period
 - Support for most languages/files extensions
 - Breakdown of coding activity per project
 - Local dashboard to visualize your data, with extensive filters for a more detailed summary
 - All parts (vscode-extension, api, dashboard) of the project can be self-hosted
-- Extension Works offline 🔌
+- Extension works offline
 
 ### Apps and Packages
 
 - [`api`](./apps/api): a [Nestjs](https://nestjs.com/) application that powers the `extension` and the `dashboard`
 - [`dashboard`](./apps/dashboard): a [Vite](https://vite.dev/) application served locally by the extension to visualize the data
-- [`vscode extension`](./apps/vscode-extension): the VSCode extension that collects the data
-- [`web`](./apps/web): a [Nextjs](https://nextjs.org/) application that is the web site of the project (coming soon)
+- [`vscode extension`](./apps/vscode-extension): the VSCode extension that collects your statistics
+- [`web`](./apps/web): a [Nextjs](https://nextjs.org/) application that is the website of the project
 - [`@repo/common`](./packages/common): all functions, constants and utils shared by the three parts of the project
 - [`@repo/trpc`](./packages/trpc): the package that shares trpc types across the project
 - [`@repo/ui`](./packages/ui): ui components shared between `dashboard` and `web`
 
 ### Useful links
 
+- The main website is deployed on [mooncode.cc](https://mooncode.cc)
 - The API is deployed on [api.mooncode.cc](https://api.mooncode.cc)
 - The extension: [https://marketplace.visualstudio.com/items?itemName=Friedrich482.mooncode](https://marketplace.visualstudio.com/items?itemName=Friedrich482.mooncode)
 - The dashboard is served by the extension on [http://localhost:4208](http://localhost:4208) or any near available port

apps/vscode-extension/package.json

@@ -2,7 +2,7 @@
   "name": "mooncode",
   "displayName": "MoonCode",
   "description": "MoonCode is an extension that tracks your coding time (like WakaTime) and gives you a detailed summary about all your coding statistics. With MoonCode, developers get the full history of their coding activity.",
-  "version": "0.0.54",
+  "version": "0.0.55",
   "icon": "./public/moon.png",
   "publisher": "Friedrich482",
   "author": {

apps/web/Dockerfile

@@ -0,0 +1,82 @@
+ARG NODE_VERSION=24.13.0-slim
+ARG NGINXINC_IMAGE_TAG=alpine3.22
+
+FROM node:${NODE_VERSION} AS dependencies
+
+WORKDIR /app
+
+COPY package.json package-lock.json* .npmrc* ./
+COPY turbo.json ./
+
+COPY apps/web/package*.json ./apps/web/
+COPY packages/ui/package*.json ./packages/ui/
+
+# Install project dependencies with frozen lockfile for reproducible builds
+RUN --mount=type=cache,target=/root/.npm \
+    npm ci --no-audit --no-fund
+
+FROM node:${NODE_VERSION} AS builder
+
+WORKDIR /app
+
+COPY --from=dependencies /app/node_modules ./node_modules
+
+COPY . .
+
+ENV NODE_ENV=production
+
+RUN --mount=type=cache,target=/app/apps/web/.next/cache \
+    npm run build --workspace=web
+  
+FROM nginxinc/nginx-unprivileged:${NGINXINC_IMAGE_TAG} AS runner
+
+WORKDIR /app
+
+RUN echo 'worker_processes 1; \
+pid /tmp/nginx.pid; \
+events { \
+    worker_connections 1024; \
+} \
+http { \
+    include       /etc/nginx/mime.types; \
+    default_type  application/octet-stream; \
+    access_log /dev/stdout; \
+    error_log  /dev/stderr; \
+    sendfile        on; \
+    tcp_nopush      on; \
+    tcp_nodelay     on; \
+    keepalive_timeout  65; \
+    gzip on; \
+    gzip_types text/plain text/css application/json application/javascript text/xml application/xml application/xml+rss text/javascript; \
+    gzip_min_length 256; \
+    server { \
+        listen       8080; \
+        server_name  localhost; \
+        root /usr/share/nginx/html; \
+        index index.html; \
+        location / { \
+            try_files $uri $uri.html $uri/ =404; \
+        } \
+        location ~ ^/(.+)/$ { \
+            rewrite ^/(.+)/$ /$1.html break; \
+        } \
+        location ~ ^/_next/ { \
+            try_files $uri =404; \
+            expires 1y; \
+            add_header Cache-Control "public, immutable"; \
+        } \
+        error_page 404 /404.html; \
+        location = /404.html { \
+            internal; \
+        } \
+    } \
+} \
+' > /etc/nginx/nginx.conf
+
+COPY --from=builder /app/apps/web/out /usr/share/nginx/html
+
+USER nginx
+
+EXPOSE 8080
+
+CMD ["nginx", "-c", "/etc/nginx/nginx.conf", "-g", "daemon off;"]

apps/web/README.md

@@ -1,36 +1,84 @@
-This is a [Next.js](https://nextjs.org) project bootstrapped with [`create-next-app`](https://nextjs.org/docs/app/api-reference/cli/create-next-app).
+<p align="center">
+  <img width="200" height="200" alt="Moon" src="https://github.com/user-attachments/assets/e38843c0-22dd-4dbc-985e-eab77277acc4" />
+</p>
 
-## Getting Started
+<h1 align="center">MoonCode Website</h1>
+<p align="center">The main website for the MoonCode app<br/>
+<a href="https://mooncode.cc">mooncode.cc</a>
+</p>
 
-First, run the development server:
+<p align="center">
+  <img src="https://img.shields.io/badge/version-0.0.1-yellow">  
+  <img src="https://img.shields.io/badge/LICENSE-MIT-yellow">
+</p>
+
+## Description
+
+This project is the website (marketing site) of the MoonCode project.
+It is built on top of [Nextjs](https://nextjs.org/).
+
+## Project setup
+
+To run the website, you need to first clone the repository
+
+```bash
+git clone https://github.com/Friedrich482/mooncode-monorepo.git
+```
+
+Then `cd` in the `web` folder
+
+```bash
+cd apps/web
+```
+
+Then install dependencies
+
+```bash
+npm install
+```
+
+### Development
+
+Run
 
 ```bash
 npm run dev
-# or
-yarn dev
-# or
-pnpm dev
-# or
-bun dev
 ```
 
-Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
+and open `http://localhost:3001`
+
+### Production
+
+To build for production, build with:
 
-You can start editing the page by modifying `app/page.tsx`. The page auto-updates as you edit the file.
+```bash
+npm run build
+```
 
-This project uses [`next/font`](https://nextjs.org/docs/app/building-your-application/optimizing/fonts) to automatically optimize and load [Geist](https://vercel.com/font), a new font family for Vercel.
+and start the built app with:
 
-## Learn More
+```bash
+npm run start
+```
 
-To learn more about Next.js, take a look at the following resources:
+## Deployment
 
-- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
-- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
+The website is currently deployed on [mooncode.cc](https://mooncode.cc).
 
-You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js) - your feedback and contributions are welcome!
+## Containerization
 
-## Deploy on Vercel
+To dockerize the application, you need to place yourself at the root of the monorepo, then
+
+```bash
+docker build -t mooncode-web -f apps/web/Dockerfile --progress=plain .
+```
+
+And to run a container called `mooncode-web-container` :
+
+```bash
+docker run -d -p 3002:8080 --name mooncode-web-container mooncode-web
+```
 
-The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.
+## License
 
-Check out our [Next.js deployment documentation](https://nextjs.org/docs/app/building-your-application/deploying) for more details.
+[MIT](/LICENSE) License &copy; 2026

apps/web/eslint.config.ts

@@ -7,6 +7,9 @@ const config = [
   ...nextVitals,
   {
     ignores: [".next/**", "out/**", "build/**", "next-env.d.ts"],
+    rules: {
+      "react-hooks/exhaustive-deps": "off",
+    },
   },
 ];
 

apps/web/next.config.ts

@@ -1,7 +1,7 @@
 import type { NextConfig } from "next";
 
 const nextConfig: NextConfig = {
-  output: "standalone",
+  output: "export",
   turbopack: {
     rules: {
       "*.svg": {

apps/web/package.json

@@ -5,18 +5,20 @@
   "scripts": {
     "dev": "next dev --turbopack -p 3001",
     "build": "next build",
-    "start": "next start",
+    "start": "serve out -p 3002",
     "lint": "eslint . --fix"
   },
   "dependencies": {
     "@icons-pack/react-simple-icons": "^13.11.1",
     "@repo/common": "*",
     "@repo/trpc": "*",
     "@repo/ui": "*",
+    "motion": "^12.36.0",
     "next": "^16.1.6",
     "next-themes": "^0.4.6",
     "react": "^19.2.0",
-    "react-dom": "^19.2.0"
+    "react-dom": "^19.2.0",
+    "react-medium-image-zoom": "^5.4.1"
   },
   "devDependencies": {
     "@svgr/webpack": "^8.1.0",
@@ -29,6 +31,7 @@
     "postcss": "^8.5.6",
     "prettier": "^3.8.1",
     "prettier-plugin-tailwindcss": "^0.6.14",
+    "serve": "^14.2.6",
     "tailwindcss": "^4.1.17",
     "turbopack-inline-svg-loader": "^1.0.3",
     "typescript": "^5.9.3"

apps/web/src/app/components/architecture.tsx

@@ -0,0 +1,39 @@
+import Zoom from "react-medium-image-zoom";
+import Image from "next/image";
+
+import mooncodeArchitecture from "@/assets/mooncode-architecture.svg";
+
+import { BLUR_DATA_URL } from "../constants";
+import { FadeContent } from "./motion/fade-content";
+
+import "react-medium-image-zoom/dist/styles.css";
+
+export const Architecture = () => (
+  <section
+    id="architecture"
+    className="flex w-full flex-col gap-20 px-14 pt-20 pb-12"
+  >
+    <FadeContent className="flex flex-col gap-8">
+      <h2 className="text-center text-5xl font-bold wrap-anywhere max-sm:text-4xl">
+        Project Architecture
+      </h2>
+      <p className="text-center font-light">
+        We currently operate through a local dashboard and a NestJS API. It is
+        simple but it gets the job done.
+      </p>
+    </FadeContent>
+
+    <Zoom wrapElement="span" canSwipeToUnzoom={true}>
+      <Image
+        src={mooncodeArchitecture as unknown as string}
+        alt="Architecture Diagram"
+        width={600}
+        height={100}
+        loading="lazy"
+        className="w-4/5 cursor-zoom-in place-self-center rounded-xl max-md:w-full"
+        placeholder="blur"
+        blurDataURL={BLUR_DATA_URL}
+      />
+    </Zoom>
+  </section>
+);