Flyballers

Flyballers is a Jamstack application for managing Flyball events. The motivation for this application is it create an alternative to Flyball Geek.

Development

Redwood

For development, check out RedwoodJS.

Prerequisites

Redwood requires Node.js (>=18.x) and Yarn (>=1.15).

Are you on Windows? For best results, follow their Windows development setup guide.

Start by installing dependencies:

yarn install

Then start the development server:

yarn rw dev

Your browser should automatically open to http://localhost:8910.

The Redwood CLI

Congratulations on running your first Redwood CLI command! From dev to deploy, the CLI is with you the whole way. And there's quite a few commands at your disposal: yarn rw --help. For all the details, see the CLI reference.

Prisma and the database

Redwood uses Prisma, a next-gen Node.js and TypeScript ORM, to talk to the database. Prisma's schema offers a declarative way of defining your app's data models. And Prisma Migrate uses that schema to make database migrations hassle-free:

yarn rw prisma migrate dev

# ...

? Enter a name for the new migration: › create posts

rw is short for redwood

You'll be prompted for the name of your migration, e.g. 'create posts'.

Now you can generate everything we need to perform all the CRUD (Create, Retrieve, Update, Delete) actions on our model:

yarn rw g scaffold post

Navigate to http://localhost:8910/posts/new, fill in the title and body, and click "Save":

Did we just create a post in the database? Yup! With yarn rw g scaffold <model>, Redwood created all the pages, components, and services necessary to perform all CRUD actions on our posts table.

GraphQL

Redwood uses GraphQL via Apollo Client. An important thing to note is that, if you make a change to the API via the SDL file, you will need to generate the new GraphQL types:

yarn rw g types

Frontend first with Storybook

Redwood integrates Storybook so that you can work on design without worrying about data.

Mockup, build, and verify your React components, even in complete isolation from the backend:

yarn rw storybook

Before you start, see if the CLI's setup ui command has your favorite styling library:

yarn rw setup ui --help

Testing with Jest

Redwood fully integrates Jest with the front and the backends and makes it easy to keep your whole app covered by generating test files with all your components and services:

yarn rw test
yarn rw test --no-watch
yarn rw test api --no-watch
yarn rw test web --no-watch

To make the integration even more seamless, Redwood augments Jest with database scenarios and GraphQL mocking.

To run integration tests locally, Prisma requires a local running Postgres instance to use as its test database. The docker-compose.yml file at the root of this project provides this as a service in a helpful docker container. To spin up the container, run:

yarn docker:up

After which you can run Jest as per Redwood's design. Alternatively, if you wanted to run the full test suite locally, you can do that using the Yarn script yarn test.

You can also take down the container once you've finished running integration tests:

yarn docker:down

To ensure that we run our full suite of tests on push via CI, we run the local Postgres service from within GitHub Actions. See .github/workflows/ci.yml.

Ship it

Redwood is designed for both serverless deploy targets like Netlify and Vercel and serverful deploy targets like Render and AWS:

yarn rw setup deploy --help

Linting and Formatting

We use ESLint and Prettier to lint our code. The configuration for both is largely the Redwood defaults for TypeScript.

Each has their own ignore file: .eslintignore and .prettierignore, which should only be used for files that:

Aren't committed into version control.
Are automatically generated.

You can run linting manually via the Yarn scripts:

yarn lint
yarn format

Design

Atomic Design

Atomic design is a methodology for creating user interfaces that breaks down complex UIs into smaller, reusable building blocks called atoms, which can be combined to form more complex components and templates.

Atoms: The smallest building blocks of a UI, such as buttons, inputs, and labels.
Molecules: A group of atoms that work together to perform a specific task, such as a search bar.
Organisms: A group of molecules that work together to form a more complex UI component, such as a navigation menu.
Templates: A group of organisms arranged in a specific layout to form a reusable, consistent design pattern.
Pages: A specific instance of a template that contains actual content.

To incorporate atomic design in a Redwood project, you can follow these steps:

Identify the atoms: Identify the basic UI elements that you want to use in your project, such as buttons, inputs, and labels.
Create molecules: Combine the atoms to create more complex UI elements, such as a search bar or a form.
Build organisms: Combine the molecules to create even more complex UI components, such as a navigation menu or a card.
Create templates: Arrange the organisms in a specific layout to form reusable design patterns, such as a login page or a dashboard.
Build pages: Use the templates to create specific instances of your UI, such as a login page with actual content.

Infrastructure

Supabase

Flyballers was built using Supabase on the backend.

For development, please create your own test database within your account. Once you've done that, set the relevant environment variables in your .env file as per the documentation.

You should switch off email validation on sign up on your Supabase instance.

Vercel

Flyballers is deployed on merge to the main branch using Vercel.

Contributing

Please contact Jack Trute via Bassett Allsorts Flyball team on Facebook. If you have a pull request, please raise it with:

A suitable description.
Any Jest/Storybook tests.
As few file changes as possible to complete your feature or fix.

and I will get back to you when able.

JrobT/flyballers