@trinityresearch/app

Trinity Research Application

This repo contains an implementation of a fullstack web application designed to author and display research content. The underlying code is a general purpose library and architecture reference for creating new modern web applications. The core techonologies are programming language - TypeScript, web framework - Next.js, UI library - React, CSS framework - TailwindCSS and State management - Apollo Client. The application interfaces with a backend built using a GraphQL server, via Schema and Resolvers - Nexus Schema, a Database client - Prisma Client and data stored in SQLite.

Getting started

1. Clone repo and install dependencies

Clone this repository:

git clone [e-mail]:djfrsn/trinity-lib.git --depth=1

Install npm dependencies:

cd trinity-lib
npm install

Alternative: Install package and import code

Run NPM install lib:

npm i @trinityresearch/lib

Import code via JS/TS/Node:

import parseUrl from '@trinityresearch/lib'

2. Generate database client/types and seed data

Run this command to setup the database:

npm run setup

The above runs commands for the following:

a. Generate the database client and type files

The following command to create your Prisma client and Nexus type files. The Prisma client creates an interface to the DB and Nexus provides the schema, this mostly happens in /pages/api. The frontend depends on the Apollo server to allow us to access the generated client via GraphQL. To generate the files, we run the generate:prisma and generate:nexus with the following:

npm run generate

b. Create and seed the database

The following command to create your SQLite database file. This also creates the User and Post tables that are defined in prisma/schema.prisma:

Create your SQLite database file by running the following command. The User and Post tables defined in prisma/schema.prisma will be created.

npm run migrate:prisma

The data from the seed file prisma/seed.ts will be used to populate the database with mock data.

3. Run the app

npm run dev

Visit http://localhost:3000/ in your browser to see the app running.

Modify the application

The application defaults to displaying a UI with db seed data and example Prismic CMS data for this repo. You can add applications features via Prisma Schema or add new UI by replacing the apiEndpoint in sm.json with a new Prismic Repository, then create new template slices.

Modifying the application usually means one of the following will happen:

• Create a new repeatable page section with React and the Slice Machine
• Add new React components for feature update
• Author new pages without code via Prismic UI
• Update schema and server API to support feature update

Create a new Slice

A reusable section of a page, in the form of a slice allows us to create building blocks to form pages.

Run Slice Machine

npm run slicemachine

• Create a new slice or content-type via the Slice Machine on localhost.

Reference the patterns established in UtilBarTitle.tsx for slices. The slice should contain code that makes for a unique component and import resuable code. Reference the /create page when creating new content-types.

Create a new Page with Prismic

New pages can be created without code on Prismic using the "Page" content type and existing app sections with unique content. If a new static zone is required the content type "Create" along with the associated React UI establishes this pattern.

• Create a new Prismic document with a content type of "Page", the field uid will be the path for the page and render using the [uid].tsx file. Title and description are used in the HTML head.

Create a new React component

Components are any reusable UI code found in /pages or /slices.

• Add new components in the dir ./components and export them in ./index.ts to allow for use as an npm package.

Add server side api code

Adding a new row or column is done by changing or adding Models in schema.prisma. Fetching this data requires an update to object type resolvers in /pages/api. Once this is done, the change in backend data can be used in the front end GraphQL queries and components.

• Follow the 4 step process for doing so is laid out in the Evolving the app section of the official Prisma Next.js example.

References

General

• Official Prisma Next.js/GraphQL example
• Prismic.io Next.js Documentation
• Prismic Content Modeling
• Prismic Helpers
• Prismic Client

Frontend

• Next.js
• React
• TailwindCSS
• Apollo Client
• Prismic Templating

Backend

• GraphQL
• Nexus Schema
• Prisma Client
• Prismic/Next
• SQLite