🚀 Opal Labs — Frontend

A modern, Notion-like productivity platform built with cutting-edge web technologies.

🌐 Live Demo • 🛠 Backend Repo

---

✨ Introduction

This is a public copy of a private repository where I am collaborating with a team of 7 developers to build a Notion-like productivity application.

This repository contains the frontend portion of the project.
For the backend implementation, visit 👉 Opal Labs Backend

🧱 Tech Stack

• Framework: Next.js (App Router)
• Language: TypeScript
• Auth: Google OAuth 2.0
• Database: PostgreSQL
• Caching: Redis
• Testing: Playwright
• Backend Language: Go
• Methodology: Agile

---

🛠 Setup

yarn install

1. Install all required workspace @recommended extensions
2. Add the required .env values from the team drive

---

🚀 Getting Started

Start the development server:

yarn dev

Then open:

👉 http://localhost:3000

---

🔐 Google OAuth 2.0

Follow the instructions in the shared document:

👉 Google OAuth 2.0 Setup Guide

---

📘 Storybook

Run Storybook on port 6000:

yarn storybook

---

🧪 Testing & Quality Checks

Run linting and type checks:

yarn lint
yarn check-types

These commands run:

• Pre-push via husky
• CI/CD via GitHub Actions

---

🎭 Playwright Testing

Playwright is used for end-to-end testing of user interactions and API flows.

Usage

1. Install dependencies:

   yarn

2. Start the dev server:

   yarn dev

3. Generate test code:

   npx playwright codegen

4. Save generated tests to:

   tests/TestWithoutBackend.spec.ts
   

5. Run tests:

   npx playwright test

6. View reports:

   npx playwright show-report

7. Run tests visually:

   npx playwright test --ui

📚 Learn more: Playwright Documentation

---

🤝 Contributing

Contributions are welcome!

• Open an issue for bugs or feature requests
• Submit a PR for improvements

---

📄 License

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