-
Notifications
You must be signed in to change notification settings - Fork 79
Resources
This is a list of resources relevant to the tools, languages, libraries, and frameworks we're using. If there's something missing, reach out to a focus lead or e-board member!
Important
If you are not experienced using the below listed tools, languages, libraries, and frameworks, we do not recommend using AI coding tools to assist your work.
While AI coding tools like Claude Code and ChatGPT can increase the speed at which you write code, they are an impediment to your learning. They may help you become familiar with the tools we're using for this project, but that shouldn't be the primary goal of your contributing.
You don't want to be good at just one programming language, framework, or library: you want to be good at adapting to new tools, codebases, and teams. Using AI is actively counterproductive to this goal.
If you do not fully understand the code output by your AI coding tool of choice, we discourage your using it.
Git is a source/version control manager; GitHub is a server storing our code remotely
- If you're just git-ting started: https://www.freecodecamp.org/news/guide-to-git-github-for-beginners-and-experienced-devs/
- A more detailed introduction to Git: https://github.com/git-guides
- Download the Git CLI: https://git-scm.com/
- A Git GUI made by GitHub: https://desktop.github.com/ (VSCode has some Git tools built-in; try those too!)
- A heavy-duty Git GUI: https://www.gitkraken.com/
DevDogs recommends using whatever IDE you're most comfortable with. VSCode is one of the most popular IDEs out there, so if you're just starting out, it's worth a try!
- VSCode Download: https://code.visualstudio.com/download
VSCode's biggest advantage is the sheer number of extensions available in their marketplace. This is a short list of extensions (relevant to this project) which we recommend installing if you use VSCode.
- Dotenv: https://marketplace.visualstudio.com/items?itemName=mikestead.dotenv
- ESLint: https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint
- Prettier: https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode
- Pretty TypeScript Errors: https://marketplace.visualstudio.com/items?itemName=yoavbls.pretty-ts-errors
- Tailwind CSS IntelliSense: https://marketplace.visualstudio.com/items?itemName=bradlc.vscode-tailwindcss
- Download Node.js: https://nodejs.org/en (NPM is installed alongside Node.js by default)
PNPM is the package manager we're using for this project; it's similar to NPM, but saves a significant amount of time and storage in the long run
- Download PNPM: https://pnpm.io/
Nearly all of the code for this project is written in TypeScript.
- Start here: https://www.typescriptlang.org/docs/handbook/typescript-from-scratch.html
- A modern, thorough JavaScript tutorial: https://javascript.info/
- An older, friendlier tutorial: https://www.w3schools.com/typescript/index.php
- A great reference for all Web APIs: https://developer.mozilla.org/en-US/docs/Web/API
- The official TypeScript documentation: https://www.typescriptlang.org/docs/
React is the UI library we're using. It's the most popular modern UI library for web development.
- First, review HTML: https://www.w3schools.com/html/html_intro.asp
- Then, start here: https://react.dev/learn (complete the exercises!)
- The official React documentation: https://react.dev/reference/react
Instead of writing pure CSS, we're using Tailwind utility classes
- First, review CSS: https://www.w3schools.com/css/css_intro.asp
- Then, start here: https://tailwindcss.com/docs/styling-with-utility-classes (read through the "core concepts" pages; cross reference this with the CSS tutorial!)
- The official Tailwind documentation: https://tailwindcss.com/docs/installation/using-vite
Next.js is the full-stack (client- AND server-side) framework we're using for this web application
- This is a great course for reviewing React and learning Next.js: https://nextjs.org/learn/react-foundations
- If you're already confident with React, but not Next.js: https://nextjs.org/learn/dashboard-app
- The official Next.js documentation: https://nextjs.org/docs
Drizzle is an ORM for interacting with the MySQL database using TypeScript
- A tutorial for MySQL: https://www.freecodecamp.org/news/learn-mysql-beginners-course/ (we aren't writing pure SQL though!)
- The drizzle documentation: https://orm.drizzle.team/docs/overview
- RadixUI: https://www.radix-ui.com/primitives/docs/overview/introduction
- React Icons: https://react-icons.github.io/react-icons/ (we're using the Phosphor icons set)
- ESLint: https://eslint.org/
- Prettier: https://prettier.io/
- Turborepo: https://turborepo.dev/