https://github.com/iamdevlinph/issues-tracker
Track issues across multiple Github repositories in one place.
https://github.com/iamdevlinph/issues-tracker
github issues
Last synced: about 4 hours ago
JSON representation
Track issues across multiple Github repositories in one place.
- Host: GitHub
- URL: https://github.com/iamdevlinph/issues-tracker
- Owner: iamdevlinph
- Created: 2026-04-21T21:11:41.000Z (3 months ago)
- Default Branch: main
- Last Pushed: 2026-06-01T17:42:15.000Z (about 1 month ago)
- Last Synced: 2026-06-01T19:26:10.966Z (about 1 month ago)
- Topics: github, issues
- Language: TypeScript
- Homepage: https://issues-tracker.devlin.ph/
- Size: 432 KB
- Stars: 1
- Watchers: 0
- Forks: 0
- Open Issues: 6
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
Welcome to your new TanStack Start app!
# Getting Started
## FAQ
1. .pem private key generate from the github app is in pkcs#1 format. Convert to pkcs #8
```bash
openssl pkey -in input.private-key.pem -out output.pkcs8.pem
```
## Stack
- TanStack Start
- TanStack Query
- TailwindCSS
- shadcn/ui
- Framer Motion for minor animations
- Zustand for client state management
- Octokit for Github REST APIs
- Biome for linting and formatting
To run this application:
```bash
pnpm install
pnpm dev
```
# Building For Production
To build this application for production:
```bash
pnpm build
```
## Testing
This project uses [Vitest](https://vitest.dev/) for testing. You can run the tests with:
```bash
pnpm test
```
## Styling
This project uses [Tailwind CSS](https://tailwindcss.com/) for styling.
### Removing Tailwind CSS
If you prefer not to use Tailwind CSS:
1. Remove the demo pages in `src/routes/demo/`
2. Replace the Tailwind import in `src/styles.css` with your own styles
3. Remove `tailwindcss()` from the plugins array in `vite.config.ts`
4. Uninstall the packages: `npm install @tailwindcss/vite tailwindcss -D`
## Linting & Formatting
This project uses [Biome](https://biomejs.dev/) for linting and formatting. The following scripts are available:
```bash
pnpm lint
pnpm format
pnpm check
```
## Shadcn
Add components using the latest version of [Shadcn](https://ui.shadcn.com/).
```bash
pnpm dlx shadcn@latest add button
```
## Routing
This project uses [TanStack Router](https://tanstack.com/router) with file-based routing. Routes are managed as files in `src/routes`.
### Adding A Route
To add a new route to your application just add a new file in the `./src/routes` directory.
TanStack will automatically generate the content of the route file for you.
Now that you have two routes you can use a `Link` component to navigate between them.
### Adding Links
To use SPA (Single Page Application) navigation you will need to import the `Link` component from `@tanstack/react-router`.
```tsx
import { Link } from "@tanstack/react-router";
```
Then anywhere in your JSX you can use it like so:
```tsx
About
```
This will create a link that will navigate to the `/about` route.
More information on the `Link` component can be found in the [Link documentation](https://tanstack.com/router/v1/docs/framework/react/api/router/linkComponent).
### Using A Layout
In the File Based Routing setup the layout is located in `src/routes/__root.tsx`. Anything you add to the root route will appear in all the routes. The route content will appear in the JSX where you render `{children}` in the `shellComponent`.
Here is an example layout that includes a header:
```tsx
import { HeadContent, Scripts, createRootRoute } from "@tanstack/react-router";
export const Route = createRootRoute({
head: () => ({
meta: [
{ charSet: "utf-8" },
{ name: "viewport", content: "width=device-width, initial-scale=1" },
{ title: "My App" },
],
}),
shellComponent: ({ children }) => (
Home
About
{children}
),
});
```
More information on layouts can be found in the [Layouts documentation](https://tanstack.com/router/latest/docs/framework/react/guide/routing-concepts#layouts).
## Server Functions
TanStack Start provides server functions that allow you to write server-side code that seamlessly integrates with your client components.
```tsx
import { createServerFn } from "@tanstack/react-start";
const getServerTime = createServerFn({
method: "GET",
}).handler(async () => {
return new Date().toISOString();
});
// Use in a component
function MyComponent() {
const [time, setTime] = useState("");
useEffect(() => {
getServerTime().then(setTime);
}, []);
return
Server time: {time};
}
```
## API Routes
You can create API routes by using the `server` property in your route definitions:
```tsx
import { createFileRoute } from "@tanstack/react-router";
import { json } from "@tanstack/react-start";
export const Route = createFileRoute("/api/hello")({
server: {
handlers: {
GET: () => json({ message: "Hello, World!" }),
},
},
});
```
## Data Fetching
There are multiple ways to fetch data in your application. You can use TanStack Query to fetch data from a server. But you can also use the `loader` functionality built into TanStack Router to load the data for a route before it's rendered.
For example:
```tsx
import { createFileRoute } from "@tanstack/react-router";
export const Route = createFileRoute("/people")({
loader: async () => {
const response = await fetch("https://swapi.dev/api/people");
return response.json();
},
component: PeopleComponent,
});
function PeopleComponent() {
const data = Route.useLoaderData();
return (
- {person.name}
{data.results.map((person) => (
))}
);
}
```
Loaders simplify your data fetching logic dramatically. Check out more information in the [Loader documentation](https://tanstack.com/router/latest/docs/framework/react/guide/data-loading#loader-parameters).
# Demo files
Files prefixed with `demo` can be safely deleted. They are there to provide a starting point for you to play around with the features you've installed.
# Learn More
You can learn more about all of the offerings from TanStack in the [TanStack documentation](https://tanstack.com).
For TanStack Start specific documentation, visit [TanStack Start](https://tanstack.com/start).