MTG Grizzly

Getting Started

1. Install the dependencies

npm install

2. Start the development server

npm run dev

3. Visit the site via your browser at localhost:3000

• Home Page (Set Selection)
• Example Set Page (Lost Caverns of Ixalan)

Resources

MTG Grizzly Specific

• GitHub Repo
• Project Board
• Vercel Dashboard

General

• Next.js Documentation
• Learn Next.js Tutorial
• Next.js Deployment Documentation
• Tailwind Documentation

Notes

• This project is hosted on Vercel
• This project has fast refresh enabled
• This project uses next/font to automatically optimize and load Inter, a custom Google Font
• This project leverages Next.js' app router
• This project leverages Tailwind CSS
• This project leverages Radix's Primitives and Icons
• This project leverages the Scryfall API
• This project adheres to the Conventional Commits specification
• ⚠️ This project must remain in compliance with Scryfall's Guidelines
• ⚠️ This project must remain in compliance with WOTC's Fan Content Policy

Aliases

The project has various aliases configured for your importing needs.

import { Card } from '@/components';
import type { DraftSet } from '@/types';
import sets from '@/root/src/app/api/sets/sets.json';
import sets from '@/src/app/api/sets/sets.json';
import { React, render, screen, userEvent } from 'test-utils';

Please avoid relative imports that require traversing directories. Some examples:

// 👎
import CardsQueryContext from './../CardsQueryContext';
import CardsQueryContext from './components/CardsQueryContext';
import { SearchFilter } from './components/SearchFilter';

// 👍
import CardsQueryContext from './CardsQueryContext';
import CardsQueryContext from '@/src/app/sets/[set]/CardsQueryContext';
import { SearchFilter } from './components';

READMEs

There are READMEs throughout the codebase to help document important information close to where it matters.

Below are links to all of the READMEs:

• API README
• App README
• Components README
• Cypress README
• Scripts README
• Types README
• Utils README

Contributing

1. Check out the Project Board or Project Issues for available tasks
2. Check out the Project Notes
3. Open a pull request with your changes and references the issue you're working on (e.g. "Resolves #01234")

Testing

• Test features first and foremost; this is the bare minimum coverage expected
• Do not test functionality already tested for us, e.g. if we're using a package we know has good test coverage, don't waste your time verifying it does what we expect
• Familiarize yourself with the common mistakes made when using @testing-library
• Familiarize yourself with Cypress' best practices
• Produce structured test suite outputs using describe (see existing tests for examples)
• We leverage both cypress and jest for testing purposes