https://github.com/codiume/the-tap-stack
An opinionated stack for those who want to live on the edge (Typescript & Tailwind + Astro + Prisma & Planet scale)
https://github.com/codiume/the-tap-stack
astro planetscale prisma tailwindcss typescript
Last synced: 5 days ago
JSON representation
An opinionated stack for those who want to live on the edge (Typescript & Tailwind + Astro + Prisma & Planet scale)
- Host: GitHub
- URL: https://github.com/codiume/the-tap-stack
- Owner: codiume
- License: mit
- Created: 2022-08-21T15:58:43.000Z (over 2 years ago)
- Default Branch: main
- Last Pushed: 2022-09-04T11:03:53.000Z (over 2 years ago)
- Last Synced: 2025-03-27T20:11:17.569Z (23 days ago)
- Topics: astro, planetscale, prisma, tailwindcss, typescript
- Language: Astro
- Homepage: https://the-tap-stack.vercel.app
- Size: 223 KB
- Stars: 32
- Watchers: 3
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- Contributing: CONTRIBUTING.md
- License: LICENSE
- Code of conduct: CODE_OF_CONDUCT.md
- Security: SECURITY.md
Awesome Lists containing this project
- awesome-astro - Astro TAP Stack - Opinionated astro starter kit (Typescript & Tailwind + Astro + Prisma & Planet scale) (âšī¸ Repositories/Starter Kits/Components)
README
# đ The TAP Stack
## Table of contents
- [đ What is the TAP Stack?](#what-is-the-tap-stack)
- [đĻ Getting Started](#getting-started)
- [đ Guides](#guides)
- [đ Contributing](#contributing)
- [â¤ī¸ Acknowledgements](#acknowledgements)
## Philosophy
### What is the TAP Stack?
The **"TAP Stack"** is a web development stack focused on simplicity & fast performance. It consists of:
- **T**: [![typescript][typescript-badge]][typescript] [![tailwindcss][tailwindcss-badge]][tailwindcss]
- **A**: [![astro][astro-badge]][astro]
- **P**: [![prisma][prisma-badge]][prisma] [![planetscale][planetscale-badge]][planetscale]
### Is this some kinda template?
Kind of. We love [Astro][astro] and we strongly believe in the future of all the technologies mentioned above.
So we made `The TAP Stack` to do one thing, get you started with a deployable astro website as fast as possible.
### Can I deploy it to platforms ?
Yes, this repo in itself is already deployed to following platforms:
- **Vercel**: [https://the-tap-stack.vercel.app]
- **Netlify**: [https://the-tap-stack.netlify.app]
- **Cloudflare Pages**: [https://the-tap-stack.pages.dev]
## Getting Started
### Using your package manager
You can use both `npm`
```bash
npm init astro -- --template codiume/the-tap-stack
```
Or `yarn`
```bash
yarn create astro -- --template codiume/the-tap-stack
```
### Using Github interface
This template repo can be used to scaffold your astro website. Follow these steps to get started:
1. Go to [https://github.com/codiume/the-tap-stack]
2. Press the "Use this template" button at the top of this repo to create a new repo with the contents of this skeleton.
3. Clone the project to your local environment & Have fun creating your website.
### Deploy with Vercel
You can also deploy directly this project to your Vercel account:
[](https://vercel.com/new/clone?repository-url=https%3A%2F%2Fgithub.com%2Fcodiume%2Fthe-tap-stack&env=DATABASE_URL)
## Project Structure
```txt
/
âââ prisma/
â âââ schema.prisma
âââ public/
âââ src/
â âââ pages/
â âââ index.astro
â âââ components/
â âââ Article.astro
âââ package.json
```
## Guides
### Setup a Prisma & Database
1. Create a database on PlanetScale
2. Copy `DATABASE_URL` from PlanetScale to your `.env`
3. Push your prisma schema to PlanetScale `npx prisma db push`
## Contributing
Please see [contributing.md](CONTRIBUTING.md) for details.
## Acknowledgements
The **TAP** Stack is inspired by [t3][t3] and all the amazing work [Julius Marminge][juliusmarminge] and the community is doing developing it.
[astro]: https://astro.build
[planetscale]: https://planetscale.com
[prisma]: https://www.prisma.io
[tailwindcss]: https://tailwindcss.com
[typescript]: https://www.typescriptlang.org
[t3]: https://github.com/t3-oss/create-t3-app
[juliusmarminge]: https://github.com/juliusmarminge
[typescript-badge]: https://img.shields.io/badge/Code-Typescript-informational?style=for-the-badge&logo=typescript&logoColor=white
[tailwindcss-badge]: https://img.shields.io/badge/Code-Tailwind-informational?style=for-the-badge&logo=tailwindcss&logoColor=white
[astro-badge]: https://img.shields.io/badge/Code-Astro-informational?style=for-the-badge&logo=astro&logoColor=white
[prisma-badge]: https://img.shields.io/badge/Tools-Prisma-informational?style=for-the-badge&logo=prisma&logoColor=white
[planetscale-badge]: https://img.shields.io/badge/Tools-planetscale-informational?style=for-the-badge&logo=planetscale&logoColor=white