https://github.com/anataliocs/stellar-nextjs-protostar
Stellar UI boilerplate generation Next.js, Tailwind, TypeScript, ESLint, Prettier, Husky, Lint-Staged, Jest, React Testing Library, PostCSS, Storybook, Plop, GH actions built on top of the Stellar design system to automate creation of React components and tests.
https://github.com/anataliocs/stellar-nextjs-protostar
blockchain design-system nextjs reactjs smart-contracts stellar-network
Last synced: 5 days ago
JSON representation
Stellar UI boilerplate generation Next.js, Tailwind, TypeScript, ESLint, Prettier, Husky, Lint-Staged, Jest, React Testing Library, PostCSS, Storybook, Plop, GH actions built on top of the Stellar design system to automate creation of React components and tests.
- Host: GitHub
- URL: https://github.com/anataliocs/stellar-nextjs-protostar
- Owner: anataliocs
- License: mit
- Created: 2025-05-20T22:27:12.000Z (about 1 year ago)
- Default Branch: main
- Last Pushed: 2025-06-06T12:21:47.000Z (about 1 year ago)
- Last Synced: 2025-06-07T00:09:36.407Z (about 1 year ago)
- Topics: blockchain, design-system, nextjs, reactjs, smart-contracts, stellar-network
- Language: TypeScript
- Homepage: https://design-system.stellar.org/
- Size: 588 KB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 10
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Protostar: Stellar React Component Code Generator
Next JS 15+, Tailwind CSS 3 and TypeScript
[](https://github.com/anataliocs/stellar-nextjs-protostar/actions/workflows/main.yml)
[](https://github.com/anataliocs/stellar-nextjs-protostar/actions/workflows/dependency-review.yml)
[](https://github.com/anataliocs/stellar-nextjs-protostar/actions/workflows/dependabot/dependabot-updates)
[](https://github.com/anataliocs/stellar-nextjs-protostar/actions/workflows/github-code-scanning/codeql)
[](https://github.com/anataliocs/stellar-nextjs-protostar/actions/workflows/sonarqube.yml)
[](https://github.com/anataliocs/stellar-nextjs-protostar/actions/workflows/codecov.yml)
[](https://sonarcloud.io/summary/new_code?id=anataliocs_stellar-nextjs-protostar)
[](https://sonarcloud.io/summary/new_code?id=anataliocs_stellar-nextjs-protostar)
[](https://sonarcloud.io/summary/new_code?id=anataliocs_stellar-nextjs-protostar)
[](https://sonarcloud.io/summary/new_code?id=anataliocs_stellar-nextjs-protostar)
[](https://sonarcloud.io/summary/new_code?id=anataliocs_stellar-nextjs-protostar)
[](https://codecov.io/gh/anataliocs/stellar-nextjs-protostar)
[](https://app.fossa.com/projects/git%2Bgithub.com%2Fanataliocs%2Fstellar-nextjs-protostar?ref=badge_shield&issueType=license)
[](https://app.fossa.com/projects/git%2Bgithub.com%2Fanataliocs%2Fstellar-nextjs-protostar?ref=badge_shield&issueType=security)
**Protostar**
> BB star in the earliest stage of Stellar evolution
>
> Accumulating traction and vibes from the ecosystem
>
> Precursor stage before nuclear fusion (Product Market Fit) 🌟
🚀 Boilerplate Next.js, Tailwind, TypeScript, ESLint, Prettier, Husky, Lint-Staged, Jest, React Testing Library, PostCSS,
Storybook, Plop, GH actions
## Getting Started
```bash
pnpm create next-app -e https://github.com/anataliocs/stellar-nextjs-protostar
```
Then:
```bash
pnpm generate
```
## :rocket: Features
Developer experience first:
- [Next.js](https://nextjs.org) for Static Site Generator
- Type checking [TypeScript](https://www.typescriptlang.org)
- Integrate with [Tailwind CSS](https://tailwindcss.com)
- [Storybook](https://storybook.js.org) for components documentation
- Strict Mode for TypeScript and React 18
- Linter with [ESLint](https://eslint.org)
- Code Formatter with [Prettier](https://prettier.io)
- [Husky](https://typicode.github.io/husky/#/) for Git Hooks
- Pre-commit hook to ensure clear commit msg
- [Lint-staged](https://github.com/okonet/lint-staged) for running linters on Git staged files
- Testing with [Jest](https://jestjs.io/) and [react-testing-library](https://testing-library.com/)
- Absolute Imports using `@` prefix
- Nextjs custom layouts
- [T3 env](https://env.t3.gg/) Manage your environment variables with ease
- Message convention for git
- Maximize lighthouse score
- GH actions
- Components generation with [Plop](https://plopjs.com/)
and [atomic design](https://bradfrost.com/blog/post/atomic-web-design/) convention
## 🧪 Testing
All tests are collocated with the source code inside the same directory. So, it makes it easier to find them. Coverage
threshold is set to `70%`. In the `.jest` folder there is a custom provider for the all tests.
## :information_source: How To Use
Run:
```bash
pnpm create next-app -e https://github.com/anataliocs/stellar-nextjs-protostar
```
## 🚀 Deploy to production
Install command on Vercel:
```
corepack use pnpm@`pnpm -v` && pnpm i
```
You can see the results locally in production mode with:
```shell
pnpm build
```
```shell
pnpm start
```
## :gear: Generating components
```bash
pnpm generate Button
```
Result (if you chose an atom component):
```
└── components
└── atoms
└── Button
├── component.ts
├── Button.stories.tsx
├── Button.test.tsx
└── Button.tsx
```
## License
Licensed under the MIT License, Copyright © 2025
See [LICENSE](LICENSE) for more information