Hoop Vision was bootstrapped using the T3 stack: https://create.t3.gg/. T3 is a modern web stack that prioritizes cutting-edge frameworks and typesafety.
Drizzle ORM is utilized to manage the database schema and query data efficiently, handling both migrations and schema pushes. During development, a local PostgreSQL database is used, while the production environment leverages Vercel's integrated PostgreSQL database.
The application routes API calls through tRPC, which offers seamless integration with Drizzle and maintains typesafety from the database through to the frontend. This also enables rapid API endpoint creation after initial boilerplate setup. Fetch API is employed to retrieve basketball game data from a third-party API.
NextAuth handles user authentication, using OAuth providers as recommended for security and simplicity. Once configured, NextAuth provides comprehensive account, session, and token management out of the box. It integrates well with tRPC, enabling the creation of protected API routes.
The project is styled using Tailwind CSS, with UI components powered by Shadcn.
-
OAuth configuration details are located in
server/auth.ts, where provider information can be adjusted as needed. Providers require some setup on the provider’s side, but once client IDs and secrets are obtained, they should be added to the.envfile. -
The file
env.jsperforms type checking and variable validation; any missing or undefined variables will result in an error. Ensure that both.envandenv.jscontain matching variables, orenv.jscan be removed if validation is not needed.
- Sign in to the app using any OAuth account.
- Execute either "db:seed:prod" or "db:seed:dev" to seed the database with sample games and bets. During seeding, use the same email as the OAuth account to ensure proper association.
-
The API route
/api/update-gamesexecutes essential app logic, retrieving updated game data from the basketball API and updating any related bets. -
Cron job scheduling is supported, with a template provided in
vercel.json. Note that Vercel’s free tier limits scheduling frequency to once per day. To accommodate more frequent updates, QStash (https://upstash.com/docs/qstash/overall/getstarted) is recommended, allowing frequent API calls for free. -
The basketball API has a daily query limit of 100 calls, so consider this when setting up the scheduling frequency to avoid overage.
-
The T3 Stack
A comprehensive stack of libraries and tools for a modern TypeScript project, complete with a CLI for easy bootstrapping. -
Refactoring UI
A practical guide on designing web UIs, created by the authors of Tailwind CSS, and referenced during this project’s design phase. -
Node.js Best Practices
A thorough guide on best practices for Node.js and TypeScript applications, emphasizing production-level code quality and maintainability. -
Supermaven An in-editor code assist tool