npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

@trinityresearch/app

v0.1.4

Published

Build new apps quickly

Downloads

7

Readme

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 [email protected]:djfrsn/trinity-lib.git --depth=1

Install npm dependencies:

cd trinity-lib
npm install

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:

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

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

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 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

Frontend

Backend