gurunate/learning-portrait

A grade book that thinks like you do.

Learning Portrait

A grade book that thinks as you do.

Overview

Learning Portrait is a Yarn workspace monorepo (monolithic repository).

Workspaces

• api
• app
• data-graph
• design

Getting Started

Prerequisites

This project uses Node.js (v20+) and Yarn (v4+) open-source package manager. After installing Node, run the following commands to enable Yarn:

$ corepack enable
$ yarn set version stable
$ yarn config set nodeLinker "node-modules"

Install

$ yarn

Generate Keys

To generate random bytes with openssl, use the openssl rand utility which is the openssl random number generator.

$ openssl rand -hex 32 | pbcopy

References

Links

• Figma: Learning Portrait v8.1
• Figma: Learning Portrait v5

learning-portrait's Issues

Add User Authentication

Objective

• Allow a user to authenticate (e.g., start a user session)
• Allow a user to sign out (e.g., end the user session)

In Scope

• Add Auth.js user authentication to the app.
• Add a credentials provider

Out of Scope

• OAuth2 integrations
  • Cognito
  • Google
  • Facebook
• Authorization
  • No role management or enforcement

Reference

• What Are Refresh Tokens and How to Use Them Securely
• Authentication in Next.js 14 (App Router) using NextAuth with Credential provider

Add learningportrait.com to Vercel hosting

A Record

76.76.21.21

CNAME

cname.vercel-dns.com.

Next Meeting (Agenda)

Purpose: Clarity on tasks needed to reasonably meet May 15 milestone

AGENDA

• Review open action items (esp, canonical, user journeys & technical roadmap)
• Name next steps for async
• Set next meeting

Colored Borders

Add colored borders when selecting a rating.

Add Help Docs

Provide help documentation.

Sample

• Introduction to Chromatic

Data tweaks

Change User name to Jeff

Instead of "Eureka" - Let's use "Jeff". Jeff Harding will be one of our leading teacher advisors. So let's tailor to him for now. (I don't know where "Eureka" came from". For fun, we can use another famous Jeff for the profile picture - https://ca-times.brightspotcdn.com/dims4/default/5e94df7/2147483647/strip/true/crop/3840x5760+0+0/resize/1200x1800!/quality/75/?url=https%3A%2F%2Fcalifornia-times-brightspot.s3.amazonaws.com%2F30%2F0c%2Fe04f247c4ad29c1c4ac55983414a%2F3084754-ca-jeff-goldblum-profile-kkn-a4749.JPG

Create Conversations dialog

Figma source

Add Content Management System (CMS)

Allow non-engineers to manage website content such as help and marketing copy.

Allow Instructor to order Objectives with drag-and-drop

Problem

The order objectives are displayed is important. An instructor needs to be able to change the order easily. We need to provide a UI with drag-and-drop capabilities.

Sample

https://dev.to/florantara/creating-a-drag-and-drop-list-with-react-hooks-4c0i

Create marketing website

• Showcase the application functionality
• Lead generation
• Contact form
• About us
• Documentation

Add Turborepo

Add Turborepo to the LP monorepo to increase build time.

Links

• Add Turborepo to your existing monorepo
• What’s difference between Turborepo and Yarn v3?

Add MFA

Nate to get us access to Projects

Create Naming Conventions page

Figma source

Create Account Sign Up

Create an account sign-up screen that allows users to register for an LP account.

Samples

Sign up

Create an account

Verify your email

Screen

Messsage

Add Onboarding Tour

Add React Joyride to showcase the Learning Portrait app to new users and explain the functionality of the features.

See demo

Fix icon size in Google & Facebook buttons

Create Objective dialog

Figma source

Add Structured Logging to APP

Setup Postmark Email Service

User Postmark to send email messages.

https://postmarkapp.com/

Create Value Proposition

Setup the Data Graph

Create the data-graph workspace with Apollo GraphQL.

Guiding Principle

All data should flow through the data-graph.

https://www.howtographql.com/typescript-apollo/0-introduction/

Allow User to Add and Switch Multiple Accounts

As a user, I may have multiple Learning Portrait accounts. I may be a teacher at multiple schools or districts with separate email or LP accounts for each location. I may be a teacher, parent, student, or any combination. Whatever the reason, we need to make it easy for our users to move between accounts without signing in and signing out or using different browsers or devices.

Acceptance Criteria

• Allow a user to add another account
• Allow a user to switch better accounts

Samples

Artifacts Comparison for Standards Based Gradebooks

Create Updated Layout

Create a Backing APIs

Create the backing API service(s) to support the data model.

Naming Conventions / Canonical

Update this document
https://docs.google.com/document/d/1mvypDW1ZFg4vDAbsu4TGTkHxP9fMyJ1OTCzU8DnU_ys/edit

Create Dashboard page

Mock

Figma source

Setup User Management

Setup an identity provider (IdP) (e.g., AWS Cognito) to store user profiles, credentials, and roles.

Create Course Setup page

Figma source

Create Student Profile page

Figma source

Add Structured Logging to API

Add a Core workspace

Create a @learning-portrait/core workspace to house

• Types
• Logs
• Utils

Add GrowthBook feature flag management

Add GowthBook community free version.

This will also us to add feature flags and decouple releases from deployments.

Fix rating select default value border color

Problem

The border color isn't correct when loaded.

Expection

The correct corresponding border color with the selected value.

Actual

The border color is the default grey.

Add api.learningportrait.com DNS record

cname.vercel-dns.com.

Create View Portfolio menu

Placeholder text missing on Sign In inputs

Screenshot

Design

https://www.figma.com/file/AnL18DKGLfAfbF7G0QdcfU/Learning-Portrait-2.0?type=design&node-id=349-1494&mode=design&t=woOZ14KCduKrlwvS-4

Add file uploads

• Add Vercel Blob storage
• Add an upload API with @vercel/blob

Deploy Design to Vercel

Create a new Vercel deployment for the LP design workspace.

share technical roadmap

Create User Profile pages

Figma designs needed.

Review and comment on User Journeys

https://docs.google.com/document/d/1ElGl1urCuVvgTEi7E-AfJGyDhj9w__O8DmeWr9HId-s/edit

Setup learningportrait.com email addresses

Create LP-specific email addresses for team members.

Add API Route Middleware Auth

Add middleware auth enforcement for API routes.

References

• https://next-auth.js.org/configuration/nextjs#middleware
• https://nextjs.org/docs/app/building-your-application/routing/middleware

Create Evidence dialog

Figma source

Create Data Model ERD

Create a Data Model ERD (entity relationship diagram) to illustrate the domain objects and their relationships to each other.

• Course
• Student
• Evidence
• User
• Message

Add Passkey Auth

https://www.hanko.io/blog/passkeys-nextjs-nextauth

put milestones thought Jan 2024