Learning Space Modules - Monkey Everyday

Table of Contents

• Design Resources
• Planning Tools
  • Coda
  • Basecamp
• Contributing
  • Pre-requisites
  • Getting Started
• Deployments
  • Learning Space - Web
  • Learning Space - Tutor
  • Learning Space - API
• Technologies
  • Web-based Frontend
  • Backend
  • Communication
  • Repository Management Tool
• Repository Structure

Design Resources

• Figma Prototype - design เว็บทั้งหมดของ Learning Space ประกอบด้วยเว็บของนักเรียนและเว็บของติวเตอร์
• Figma Design System - component ที่ใช้ในเว็บ และอาจจะมีบางหน้าของเว็บที่ยังไม่พร้อมสำหรับการ prototype

Planning Tools

Coda

1. Requirements ทั้งหมดของ Learning Space ทั้ง functional และ non-functional ของเว็บนักเรียนและเว็บติวเตอร์
2. Account สำหรับทดสอบ ทั้งบน staging และ production
3. Migration Plan ต่าง ๆ สำหรับการทำให้ระบบใหม่ compatible กับระบบเก่า

โดยทีม developers จะฟัง breif จาก PM จากนั้นจะมาเขียน backlog ลงใน Backlog For Dev > Sprint X กัน จากนั้นจะทำการ estimate point และให้แต่ละคนเลือกงานที่จะทำใน sprint โดย คำนึงถึงความเหมาะสมของงานและความสามารถในการ burn point ของทีม

Basecamp

ใช้สำหรับการติดตาม progress ของงานแต่ละ sprint ที่ plan เอาไว้ใน Coda โดย developer จะต้องเป็นคนเพิ่ม card เข้าไปใน Basecamp เอง เพื่อให้ PM ได้รับ notification ว่างานไหนเสร็จตอนไหน แล้วใน sprint เหลืองานอะไรบ้าง

Contributing

Pre-requisites

• Node.js - JavaScript runtime
• PNPM - Package manager
• Docker - Containerization platform
• Docker Compose - Tool for defining and running multi-container Docker applications

Getting Started

1. Clone the repository

   git clone git@github.com:softnetics/luminate.git

2. Install dependencies

   pnpm install

   Check if you have the correct version of Node.js and PNPM. If not, we encourage you to use corepack

3. Prepare .env file

   cp apps-api/marketplace/.env.sample apps-api/marketplace/.env
   cp apps-web/marketplace/.env.sample apps-web/marketplace/.env
   cp apps-web/tutor/.env.sample apps-web/tutor/.env

4. Prepare local database instance

   docker compose up -d

5. Code generation for Typescript

   pnpm codegen

6. Start the development server

    # All services
    pnpm dev --filter '@web/*' --filter '@api/*'
    # Student Only
    pnpm web:dev
    # Tutor Only
    pnpm tutor:dev
    # API Only
    pnpm api:dev

   See in the console for the URL of the development server. Basically, as shown below.

   Service	URL
   Web	http://localhost:3000
   Tutor	http://localhost:3001
   API	http://localhost:4000

Deployments

เราจะใช้ GitHub Action และ Vercel ในการทำ deployment automation โดยเมื่อมี code ถึง push ขึ้นมาที่ main branch เครื่องมือทั้งสองจะทำการ build และ deploy ไปที่ production environment โดยอัตโนมัติ ในขณะที่ staging environment จะ deploy โดยอัตโนมัติเมื่อมี code ถึง push ขึ้นมาที่ staging branch

Learning Space - Web

Staging https://learning-space-staging.vercel.app

Production https://learning-space-prod.vercel.app/

Learning Space - Tutor

Staging https://learning-space-tutor-staging.vercel.app/

Production TODO

Learning Space - API

Staging https://luminate-marketplace-api-staging.fly.dev

Production TODO

Technologies

Web-based Frontend

• Next.js - React Framework
• Tailwind CSS - CSS Framework
• Radix UI - Component Library
• Shadcn UI - Designed components
• TypeScript - Typed JavaScript

Backend

• Fastify - Fast and low overhead web framework, for Node.js
• Prisma - Next-generation Node.js and TypeScript ORM
• @wessberg/di - Compile-time dependency injection for TypeScript

Communication

• ts-rest - For e2e type-safe communication between frontend and backend

Repository Management Tool

• Turborepo - Monorepo management tool

Repository Structure

ประกอบไปด้วย 3 folder หลัก ๆ

lumiante/
├── .changeset
├── apps-api/
│   └── learning-space/
│       └── package.json
├── apps-web/
│   ├── learning-space/
│   │   └── package.json
│   └── tutor/
│       └── package.json
└── packages/
    ├── example-1
    └── example-2

apps-api: รวบรวม service ที่เกี่ยวข้องกับ backend ทั้งหมด

apps-web: รวบรวม service ที่เกี่ยวข้องกับ frontend ทั้งหมด

packages: รวบรวม internal package ที่สามารถแชร์ได้ระหว่าง service ไม้ว่าจะเป็นระหว่าง frontend กับ frontend, backend กับ backend หรือ frontend กับ backend ซึ่ง internal packages ทั้งหมดนี้มีจำนวนเยอะมาก สามารถอ่านรายละเอียดได้ที่ README.md ของแต่ละ package