{"id":17262823,"url":"https://github.com/igassmann/web-app-template","last_synced_at":"2025-10-27T09:41:00.874Z","repository":{"id":47764415,"uuid":"516294852","full_name":"IGassmann/web-app-template","owner":"IGassmann","description":"A template for building web apps.","archived":false,"fork":false,"pushed_at":"2024-10-01T09:00:21.000Z","size":2537,"stargazers_count":5,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-06-16T02:55:25.212Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"https://web-app-template.igassmann.me","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"unlicense","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/IGassmann.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2022-07-21T08:51:26.000Z","updated_at":"2024-10-01T09:00:05.000Z","dependencies_parsed_at":"2024-04-16T10:47:37.439Z","dependency_job_id":"58c74f54-7e3a-4c97-9aaa-daf099569db2","html_url":"https://github.com/IGassmann/web-app-template","commit_stats":null,"previous_names":[],"tags_count":0,"template":true,"template_full_name":null,"purl":"pkg:github/IGassmann/web-app-template","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/IGassmann%2Fweb-app-template","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/IGassmann%2Fweb-app-template/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/IGassmann%2Fweb-app-template/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/IGassmann%2Fweb-app-template/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/IGassmann","download_url":"https://codeload.github.com/IGassmann/web-app-template/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/IGassmann%2Fweb-app-template/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":261080624,"owners_count":23106602,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-10-15T07:54:49.030Z","updated_at":"2025-10-27T09:40:55.834Z","avatar_url":"https://github.com/IGassmann.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Web App Template\n\nThis is a complete template for building web apps. It's primarily intended for my own usage. I use\nit to gather my learnings and opinions on best practices and configurations.\n\n## Tech Stack\n\n- Next.js\n- TypeScript\n- Tailwind CSS\n- Clerk\n- Prettier\n- ESLint\n- SVGR\n- Conventional Commits\n- Airbnb Style Guide\n- pnpm\n- Segment Analytics\n- Sentry\n\n## Setup\n\nBefore being able to run the app for the first time, you need to follow the steps below:\n\n### Prerequisites\n\n- [Git](https://git-scm.com/downloads)\n- [Node.js v20](https://nodejs.org/en/download/)\n  - We recommend using [fnm](https://github.com/Schniz/fnm) to manage Node.js versions. After\n    installing it, run `fnm install` in the root directory of the project to install the proper\n    Node.js version.\n- Join the team on Vercel with your GitHub account.\n\n### Instructions\n\n1. Clone this repository\n2. Install [`pnpm`](https://pnpm.io/) with\n   [Corepack](https://nodejs.org/docs/latest-v20.x/api/corepack.html) by running\n   `corepack enable; corepack prepare`\n3. Install dependencies by running `pnpm install`\n4. Link local repository to its Vercel project by running `pnpm vercel link`\n5. Download environment variables by running `pnpm env:pull`\n\n## Developing\n\n### Running the App\n\n#### Development Mode\n\nTo start the app in development mode, run the following command:\n\n```sh\n$ pnpm dev\n```\n\nThis will start a local server that will automatically rebuild the app and refresh the page when you\nmake changes to the code. The app will be available at\n[http://localhost:3000](http://localhost:3000).\n\nThis is how you will run the app most of the time.\n\n#### Debug Mode\n\nIf you're debugging and want to attach a debugger, you can use the following command to start the\napp in debug mode:\n\n```sh\n$ pnpm dev:debug\n```\n\nTo learn how to attach a debugger to the app, see\n[this guide](https://nextjs.org/docs/advanced-features/debugging).\n\n#### Production Mode\n\nTo run the app in production mode, run the following commands in order:\n\n```sh\n# Build the app for production usage\n$ pnpm build\n\n# Start the app in production mode\n$ pnpm start\n```\n\nThis can be useful for testing the app in production mode locally.\n\n### Code Linting\n\nCode linting is handled by [ESLint](https://eslint.org/). You can use the following command for\nlinting all project's files:\n\n```sh\n$ pnpm lint\n```\n\nStaged files are automatically linted before commits. Be sure to **fix all linting errors before\ncommitting**.\n\nWe recommend using an\n[editor integration for ESLint](https://eslint.org/docs/user-guide/integrations).\n\n### Code Formatting\n\nCode formatting is handled by [Prettier](https://prettier.io/). You can use the following command to\nformat all project’s files:\n\n```sh\n$ pnpm format\n```\n\nStaged files are automatically formatted when committing.\n\nWe recommend using an [editor integration for Prettier](https://prettier.io/docs/en/editors.html).\n\n### Analytics\n\nTo measure the value and impact of a feature, it's essential to properly add analytics events to it\nbefore releasing it. Be sure to read through the [Data Tracking Plan](./docs/data-tracking-plan.md)\nto learn how we track analytics data.\n\n### Environment Variables\n\nEnvironment variables are handled by the [Vercel CLI](https://vercel.com/docs/cli/env). Use the\nfollowing commands to manage them:\n\n```sh\n# Download development environment variables for running the app locally\n$ pnpm env:pull\n\n# Add a new environment variable\n$ pnpm env:add\n\n# Remove an environment variable\n$ pnpm env:rm\n```\n\nCheck the [Vercel documentation](https://vercel.com/docs/concepts/projects/environment-variables)\nfor more information.\n\nYou should **never commit environment variables** to the repository. If you need to add a new\nenvironment variable, add it with the `pnpm env:add` command and then download it with the\n`pnpm env:pull` command.\n\n### Committing Changes\n\nBefore committing changes, make sure you are not on the `main` branch. If you are, create a new\nbranch with the following command:\n\n```sh\n$ git checkout -b \u003cbranch-name\u003e\n```\n\nWe have adopted the [Conventional Commits](https://www.conventionalcommits.org/) specification for\ncommit messages. This leads to more consistent and readable messages that are easy to follow when\nlooking through the project's history. This can be especially helpful when reviewing or bisecting\nthe code, as well as when writing the changelog for the project.\n\nThe commit messages should be structured as follows:\n\n```\n\u003ctype\u003e[optional scope]: \u003cdescription\u003e\n\n[optional body]\n\n[optional footer(s)]\n```\n\nThe `\u003ctype\u003e` should be one of the following:\n\n- `feat`: a new feature\n- `fix`: a bug fix\n- `refactor`: a code change made to make it easier to understand and cheaper to modify without\n  changing its observable behavior\n- `rewrite`: A re-implementation of an existing functionality\n- `perf`: a code change that improves performance\n- `docs`: documentation only changes\n- `style`: changes that do not affect the meaning of the code (white-space, formatting, missing\n  semi-colons, etc)\n- `test`: adding missing tests or correcting existing tests\n- `build`: changes that affect the build system or external dependencies (example scopes: `deps`,\n  `pnpm`, `ci`...)\n- `config`: changes to project configuration files (example scopes: `jest`, `package-json`,\n  `eslint`)\n- `chore`: maintenance tasks\n- `revert`: a revert of a previous commit\n\nTo make it easier to follow the specification, we have added a command line tool that will help you\nwrite commit messages. You can use it by running the following command after staging your changes:\n\n```sh\n$ git commit\n```\n\nThis will open an interactive prompt that will guide you through writing a commit message. You can\nalso use the `git commit -m \u003cmessage\u003e` command to bypass the prompt and write the message directly.\n\n### Submitting Changes\n\nOnce you have committed and pushed your changes, you need to\n[create a pull request](https://docs.github.com/en/pull-requests/collaborating-with-pull-requests/proposing-changes-to-your-work-with-pull-requests/creating-a-pull-request)\non GitHub.\n\nAs for commit messages, the **pull request title should follow the\n[Conventional Commits](https://www.conventionalcommits.org/) specification**. When merged, the pull\nrequest title will be used as the commit message on the `main` branch.\n\nFor the pull request description, follow the\n[pull request template](.github/pull_request_template.md). It is pre-filled when you create a pull\nrequest and contains instructions on what to write.\n\nCheck out the [Pull Request Guidelines](docs/pull-request-guidelines.md) to learn how to properly\nsubmit a pull request and review other people's pull requests.\n\nThe pull request will be automatically deployed to a\n[Vercel preview environment](https://vercel.com/docs/concepts/deployments/preview-deployments). You\ncan use this deployment to test and share your changes with others. Your teammates will be able to\nreview and [leave comments](https://vercel.com/docs/concepts/deployments/comments) on the live\ndeployment.\n\nOnce the pull request is approved and merged, the changes will be automatically deployed to the\nproduction environment.\n\n## Documentation\n\n### Architecture Decision Record\n\nWe use Architectural Decision Records (ADRs) for documenting architectural significant decisions.\n\nTo learn more about ADRs and browse them, check out\n[our architectural decision log](https://adr.web-app-template.igassmann.me/).\n\nTo learn how to write a new ADR, check out\n[docs/architectural-decisions/README.md](./docs/architectural-decisions/README.md).\n\n### Data Tracking Plan\n\nWe use a [Data Tracking Plan](./docs/data-tracking-plan.md) to document how we track data analytics.\n\n### REST API Guidelines\n\nOur REST APIs should follow our internal [REST API Guidelines](./docs/api-guidelines.md).\n\n## Roadmap\n\nYou can check the product's roadmap on [Linear](https://linear.app/).\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Figassmann%2Fweb-app-template","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Figassmann%2Fweb-app-template","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Figassmann%2Fweb-app-template/lists"}