Link-Shortener | Full Stack Project (Frontend + Backend) with Google OAuth

15 hours of work

This project is divided into two main parts:

• Frontend — Built with Astro, using Vue.js, Tailwind CSS, and DaisyUI.
• Backend — API using Hono on Cloudflare Workers, with Cloudflare D1 as the database.

The project uses pnpm as the package manager and a monorepo structure to manage both frontend and backend.

---

Requirements

• Node.js >= 18
• pnpm >= 8
• Wrangler (for backend deployment)

Install dependencies:

pnpm install

Useful Scripts

• Run the frontend in development mode

  pnpm frontend:dev
  

  Starts the frontend development server.

• Run the backend in development mode

  pnpm backend:dev
  

  Starts the backend development server (Cloudflare Worker).

• Deploy the backend (Cloudflare Worker)

  pnpm backend:deploy
  

  Deploys the backend to Cloudflare Workers.

• Deploy the frontend (production)

  pnpm frontend:deploy
  

  Builds and deploys the frontend for production.

---

Tech Stack

Frontend

• Astro — Modern framework for fast websites.
• Vue.js — For interactive and reactive components.
• Tailwind CSS — Utility-first CSS framework.
• DaisyUI — Pre-built Tailwind components for faster UI development.

Backend

• Cloudflare Workers — Serverless backend platform.
• Hono.js — Lightweight web framework for fast APIs.
• Cloudflare D1 — Lightweight SQL database integrated with Cloudflare.

---

Environment Variables and Secrets

To keep your sensitive data safe (like API keys), this project uses Wrangler secrets.
Add them via the terminal:

npx wrangler secret put YOUR_SECRET_NAME

Secrets are injected automatically at runtime and are not stored in the repository.

---

Deployment Recommendation

For a fully automated workflow, you can integrate with GitHub Actions and use Cloudflare API tokens as GitHub secrets:

- name: Deploy to Cloudflare
  run: npx wrangler deploy
  env:
    CLOUDFLARE_API_TOKEN: ${{ secrets.CLOUDFLARE_API_TOKEN }}

This way, you keep your deploy process secure and automated!

---

Let me know if you want — I can also add optional sections like Project Structure, Contributing, or a badge/header design to make it even cleaner! 🚀