spartan

Welcome to the spartan mono-repo. This Nx repository holds both the spartan/stack and spartan/ui libraries.

Important: This is a work in progress, and we update the README as major development efforts are started.

The 300 spartans

All of spartan is an MIT-licensed open source project with its ongoing development made possible by contributors and sponsors.

Our initial 300 contributors and sponsors are featured here and on the front page of spartan.ng

1. goetzrobin
2. elite-benni
3. thatsamsonkid
4. ashley-hunter
5. zeropsio
6. snyder-tech
7. mihajm
8. ajitzero
9. arturgawlik
10. deepakrudrapaul
11. evanfuture
12. AdditionAddict
13. Altamimi-Dev
14. ferat
15. jeremy-js-devweb
16. heddendorp
17. tutkli
18. Pascalmh
19. okkindel
20. marcjulian
21. oidre
22. nartc
23. santoshyadavdev
24. markostanimirovic
25. theo-matzavinos
26. jkuri
27. dongphuong0905
28. DominikPieper
29. brandonroberts
30. izikd-
31. ryancraigmartin
32. gaetanBloch
33. gergobergo
34. rpacheco124
35. benjaminforras
36. jstnjs
37. r3ps4J
38. Celtian
39. miljan-code
40. alexciesielski
41. ty-ler
42. m-risto
43. badsgahhl
44. monacodelisa
45. tomdev9
46. ragul1697
47. kkamman
48. i-am-the-slime
49. DevWedeloper
50. mrsofiane
51. mateoetchepare
52. DonaldMurillo
53. toniskobic
54. eneajaho
55. Den-dp
56. 0xfraso
57. Muneersahel
58. danilolmc
59. tomalaforge
60. canserkanuren
61. cjosue15
62. hirenchauhan2
63. Roguyt
64. tsironis13
65. 0xfraso
66. guillermoecharri
67. ValentinFunk
68. Femi236
69. dineshkp
70. robingenz
71. Balastrong
72. OlegSuncrown
73. stewones
74. shinkhouse
75. donaldxdonald
76. BenoitPE
77. MerlinMoos
78. miljan-code
79. Georg632
80. hillin
81. Besbash
82. davidedammino
83. marcindz88
84. thyco
85. hitro11
86. GODrums
87. samsonkumawong
88. PR4SAN
89. JeevanMahesha
90. dlhck
91. tomer953
92. drdreo
93. OlegSuncrown
94. tlandenberger
95. yackinn
96. OmerGronich
97. kubalinio
98. AlexHladin
99. CO97
100. MatanShushan
101. maxhov
102. josueggh
103. namdien177
104. zelenchuk
105. a-malacarne
106. YasinKuralay
107. nico13051995
108. francotalarico
109. koenigderluegner
110. Turtl3e
111. minhnguyen120898
112. liam-langstaff
113. dw-0
114. Khumozin
115. abiramcodes
116. garygrossgarten
117. Oussemasahbeni
118. benpsnyder
119. dhwani1806
120. elite-lucas
121. esteecodes
122. felhag
123. notsufferbutbutter
124. vlrjuan
125. Dafnik
126. hassantayyab
127. mathwizard
128. RaminGe
129. abos-gergo
130. jpsullivan
131. ayangabryl
132. s-froghyar
133. aziz-zina
134. avihayAsus
135. multignite
136. sefatanam
137. LinboLen
138. Oneill19
139. homj
140. Musta-Pollo
141. mitja-kurath
142. alisterpineda
143. amitshalev2
144. SOG-web
145. Joebeurg

Become a spartan today!

Zerops: The Strategic Alliance

spartan.ng has formed a powerful alliance with Zerops, a developer-first cloud platform that shares our commitment to advancing the Angular ecosystem.

Through their strategic support, Zerops has enabled:

• Dedicated resources for our core development team
• Accelerated component development on our path to v1
• Creation of production-ready templates and starter kits
• Long-term sustainability for the entire project

Zerops eliminates deployment complexity so developers can focus on building great software—a philosophy that perfectly aligns with our mission to create powerful yet easy-to-implement components.

Experience the cloud platform that's powering Spartan.ng's future →

spartan/ui

spartan/ui is our effort to port the incredible shadcn/ui project over to the Angular ecosystem.

The idea is to create un-styled primitives similar to Radix with the help of the Angular CDK and other proven community solutions And then add the beautiful shadcn styles with primitives (and components where necessary).

You can find all UI primitives in the libs/ui folder.

Each primitive is made up off an un-styled brain library, which provides all functionality and a helm library, which adds the styles.

There's also a libs/cli folder, which contains the Nx-plugin & Angular CLI code that allows users to add spartan/ui to their Nx or Angular workspace in a simple way.

The skills/spartan folder contains the spartan agent skill - procedural knowledge that teaches AI coding assistants how to build spartan/ui correctly. Users install it with npx skills add spartan-ng/spartan. See the Skills docs.

Install Dependencies

Run pnpm install to install the dependencies of this project.

Development with storybook

A storybook project is set up and is the primary way to develop UI components. You can run it with:

pnpm run storybook

At the root of each primitive's folder, e.g. libs/ui/accordion you will find a stories file, e.g, accordion.stories.ts.

Use these files to add stories and drive development of the primitives.

Testing

spartan uses Jest for tests. To test all projects locally, run the following command from the root folder:

pnpm run test

e2e testing

Cypress e2e testing is set up to run on the storybook. You can run it with:

pnpm run e2e

To add your own e2e tests add them to the apps/ui-storybook-e2e application.

spartan/stack

An example application running on Supabase, Drizzle, Analog, tRPC, Tailwind, Angular, and Nx. It also serves as the documentation page introducing the stack and UI library.

Follow the directions in the official documentation to set up your own project: https://www.spartan.ng/stack/overview

Example App

In the apps folder of this repository, you can also find an example application of the spartan stack. It also serves as the documentation page for this project.

For now. The goal is to move the docs to Astro.

Follow the directions below to get it up and running:

Prerequisites

• You will need pnpm as your package manager.
• You will need to set up a Supabase account (it's free)
• You will need NodeJs installed. The version I have working is 20.17.0.

Development server

Then you can run the following command:

pnpm nx serve app

or

pnpm run dev

for a dev server. Navigate to http://localhost:4200/. The app will automatically reload if you change any of the source files.

Database

We use Drizzle to connect to a Supabase instance for the example app.

Add an .env file to your repo with the following contents:

Add a .env file at the root of your Nx workspace and add the connection string like so:

DATABASE_URL="postgresql://postgres:[YOUR-PASSWORD]@db.[YOUR-SUPABASE-REFERENCE-ID].supabase.co:5432/postgres?schema=public"

And make sure to run the following script in your Supabase editor to set up the necessary tables:

create table
  public.note (
    id bigserial,
    title text not null,
    content text null,
    created_at timestamp with time zone null default current_timestamp,
    constraint notes_pkey primary key (id)
  ) tablespace pg_default;

[!NOTE] > .env should be added to .gitignore

Understand this workspace

Run pnpm nx graph to see a diagram of the dependencies of the projects.

Further help

Reach out to me on Twitter or GitHub if you run into any issues.