{"id":21243946,"url":"https://github.com/aaronksaunders/tanstack-start-auth-1","last_synced_at":"2026-02-18T12:01:27.940Z","repository":{"id":259332255,"uuid":"876942648","full_name":"aaronksaunders/tanstack-start-auth-1","owner":"aaronksaunders","description":"Get a first look at Tanstack Start Authentication Example integrated with Prisma ORM in this video. Learn along with me about the Tanstack Start fullstack framework, router, and how to start  creating an application demonstrating Login, LogOut and Account Creation.","archived":false,"fork":false,"pushed_at":"2024-12-09T17:14:03.000Z","size":204,"stargazers_count":3,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-10-19T12:39:23.897Z","etag":null,"topics":["fullstack-development","prisma","reactjs","tanstack-router","tanstack-start","webdevelopment"],"latest_commit_sha":null,"homepage":"https://youtu.be/kpjU2nMbZdw","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/aaronksaunders.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}},"created_at":"2024-10-22T20:12:06.000Z","updated_at":"2025-01-22T03:56:03.000Z","dependencies_parsed_at":"2024-10-24T13:39:26.057Z","dependency_job_id":"a0c40cdf-3b84-41dd-8e53-756aedd14f02","html_url":"https://github.com/aaronksaunders/tanstack-start-auth-1","commit_stats":null,"previous_names":["aaronksaunders/tanstack-start-auth-1"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/aaronksaunders/tanstack-start-auth-1","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/aaronksaunders%2Ftanstack-start-auth-1","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/aaronksaunders%2Ftanstack-start-auth-1/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/aaronksaunders%2Ftanstack-start-auth-1/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/aaronksaunders%2Ftanstack-start-auth-1/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/aaronksaunders","download_url":"https://codeload.github.com/aaronksaunders/tanstack-start-auth-1/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/aaronksaunders%2Ftanstack-start-auth-1/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":29578141,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-02-18T08:38:15.585Z","status":"ssl_error","status_checked_at":"2026-02-18T08:38:14.917Z","response_time":162,"last_error":"SSL_read: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"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":["fullstack-development","prisma","reactjs","tanstack-router","tanstack-start","webdevelopment"],"created_at":"2024-11-21T01:14:53.089Z","updated_at":"2026-02-18T12:01:27.909Z","avatar_url":"https://github.com/aaronksaunders.png","language":"TypeScript","readme":"# TanStack Start Example with Basic Auth\n\nThis project is a basic authentication example using TanStack, Prisma, and TailwindCSS.\n\n## Videos\n- See walkthrough of application here in this video - https://youtu.be/kpjU2nMbZdw\n- First video setting up basic Tanstack Start Application - https://youtu.be/oOqjZWpb-EI\n\n## Project Structure\n\n\n- `/app`: Contains the main application code\n   - `/components`: Reusable React components\n   - `/routes`: Route components and API handlers\n      - `/_authed`: Route Components for authenticated users\n   - `/styles`: CSS styles, including Tailwind configuration\n   - `/utils`: Utility functions and services\n   - `/prisma`: Database schema and migrations\n   - `/public`: Static assets\n\n\n## Features\n\n- React-based frontend with TanStack Router for routing\n- Authentication - Login, Logout, Create Account\n- Protecting Pages for Authenticated Users\n- Saving Information In Session\n- Server-side rendering (SSR) support\n- SQLite database integration using Prisma ORM\n- API routes for backend functionality\n- Tailwind CSS for styling\n\n## Technologies Used\n\n- [TanStack Start](https://tanstack.com/start)\n- [TanStack Router](https://tanstack.com/router)\n- [Prisma ORM](https://www.prisma.io/)\n- [React](https://reactjs.org/)\n- [TypeScript](https://www.typescriptlang.org/)\n- [Tailwind CSS](https://tailwindcss.com/)\n- [Vite](https://vitejs.dev/)\n- [SQLite](https://www.sqlite.org/)\n\n\n## Setup and Installation\n\n1. Clone the repository\n2. Install dependencies:\n   ```\n   npm install\n   ```\n3. Set up the database:\n   ```\n   npm run generate\n   npm run push\n   ```\n4. Start the development server:\n   ```\n   npm run dev\n   ```\n\n## Available Scripts\n\n- `npm run dev`: Start the development server\n- `npm run build`: Build the production-ready application\n- `npm run start`: Start the production server\n- `npm run generate`: Generate Prisma ORM schema\n- `npm run push`: Push schema changes to the database\n- `npm run studio`: Open Prisma Studio for database management\n- `npm run format`: Format code using Prettier\n- `npm run lint`: Lint the codebase using ESLint\n- `npm run test`: Run the test suite\n\n## Development\n\nThis project uses Vite for fast development and building. The development server will rebuild assets\non file changes.\n\n## Database\n\nThe project uses SQLite with Prisma ORM. The database schema is defined in `prisma/schema.prismas.ts`. You\ncan use Prisma Studio to manage your database by running `npm run studio`.\n\n## Routing\n\nRouting is handled by TanStack Router. Route components are located in the `/app/routes` directory.\n\n## Styling\n\nTailwind CSS is used for styling. The main CSS file is located at `/app/styles/app.css`.\n\n## API Routes\n\nAPI routes are defined in the `/app/routes/api` directory. These routes handle server-side logic and\ndatabase operations.\n\n## Deployment and Production\n\nThis project uses Vinxi, a powerful meta-framework for building full-stack JavaScript applications.\nTo deploy the application:\n\n1. Build the project:\n\n   ```\n   npm run build\n   ```\n\n   This command uses Vinxi to build the application with the `node-server` preset, optimizing it for\n   server-side rendering with a Node.js backend.\n\n2. Start the production server:\n   ```\n   npm run start\n   ```\n   This command starts the Vinxi server in production mode, serving your built application.\n\n### Node.js Server\n\nThe built project runs on a Node.js server, which handles both serving the static assets and\nserver-side rendering (SSR) of your React application. This setup provides several benefits:\n\n- Improved initial page load times due to server-side rendering\n- Better SEO as search engines can crawl the fully rendered content\n- Seamless handling of both client-side and server-side routing\n\n### Environment Variables\n\nWhen running the production server, make sure to set any necessary environment variables. You can do\nthis by creating a `.env` file in the root of your project or by setting them directly in your\ndeployment environment.\n\n### Hosting Recommendations\n\nThis Vinxi-powered application can be deployed to various Node.js-compatible hosting platforms, such\nas:\n\n- Vercel\n- Netlify\n- DigitalOcean App Platform\n- Heroku\n- AWS Elastic Beanstalk\n\nEnsure that your chosen hosting platform supports Node.js and can run the `npm run start` command to\nstart the server.\n\n### Performance Considerations\n\n- The production build is optimized for performance, but you may want to implement additional\n  caching strategies or a CDN for static assets in a high-traffic production environment.\n- Monitor your application's performance and resource usage in production, and scale your server\n  resources as needed.\n\nFor more detailed information on deploying Vinxi applications, refer to the\n[Vinxi documentation](https://vinxi.vercel.app/guide/deployment).\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Faaronksaunders%2Ftanstack-start-auth-1","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Faaronksaunders%2Ftanstack-start-auth-1","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Faaronksaunders%2Ftanstack-start-auth-1/lists"}