Convex+Clerk+React+Other Stuff Template
Live Demo: https://rcctemplate.ethan-hanlon.xyz
Source Code: https://github.com/OccultSlolem/ReactClerkConvexTemplate
This template comes preconfigured with the following:
- Backend with Convex
- Demonstrations of mutations, queries, and HTTP endpoints
- Authentication with Clerk
- Routing with react-router-dom
- Bundling with Vite
- Styling with Chakra UI
- E2E Testing with Cypress
- CI/CD with Cypress and GitHub Actions
- Tailwind CSS
- Material Design Icons
I've done a few projects with Convex and Clerk recently and I was finding that I'd spend an annoying amount of time getting set up this far. This will definitely save me time on future projects and hopefully someone else's as well :)
Make sure to gitignore the dotenv files if you use this template.
GitHub
GitHub - OccultSlolem/ReactClerkConvexTemplate
Contribute to OccultSlolem/ReactClerkConvexTemplate development by creating an account on GitHub.
5 Replies
Sweeeet. Thank you @OccultSlolem. I hope a great many projects are shipped with that cat image still in source code somewhere
Michal's been working to make this easier. Agreed it feels like more work than it should. There's now a command:
If you try it out, let us know what's missing / could be improved!
More templates for any other folks looking around:
https://www.npmjs.com/package/create-convex
and of course https://convex.dev/templates
npm
create-convex
Scaffolding Your First Convex Project. Latest version: 0.0.3, last published: 18 days ago. Start using create-convex in your project by running
npm i create-convex. There are no other projects in the npm registry using create-convex.Templates
The backend application platform with everything you need to build your product.
Thanks! Hopefully it's useful. A lot of it wasn't just in setting up clerk + convex but also setting up the ancillary stuff - UI, routing, testing/CICD, and so on. I actually think Convex and Clerk set up pretty quickly.
Agreed. Setting up Tailwind is also an annoying step (you're using Chakra so not applicable). The
npm create convex is a bit opinionated in that it defaults to tailwind & shadcn for UI, and picks a router for the nextjs one
testing/CICD is really nice - none of our templates have that but it's a great ideaYou're free to steal this if you want a template that has that for the Convex templates page ;)
I have both Chakra and Tailwind CSS set up here. Might seem kinda redundant, but tailwind is useful for making really quick adjustments (like the
animate-pulse class on the loading screen)