https://t3-manage-it.vercel.app/
- NextJS
- NextAuth
- TailwindCSS
- tRPC
- Prisma
- PlanetscaleDB
- DaisyUI
- ReactMarkdown
- CodeMirror
- DayJS
- React Icons
The goal of this app is to have a simple app that can help a user manage their own projects and be more productive.
It allows a user to have multiple projects at once, multiple sprints within each project and todos within a sprint.
Each project has it's own dashboard which contains forms for creating more sprints and todos and tracking your progress.
The todos can be toggled to a complete status, edited and deleted at any time. Completing a increments the DaisyUI Radial Progress Bar by percentage.
On the backend, I used PlanetscaleDB, Prisma and tRPC. This combination is wildly productive and makes making a deployed typesafe full stack app a breeze.
In 2 lines of code, I can have my backend connected to my frontend.
Backend
getAllProjects: protectedProcedure.query(({ ctx }) => {
return ctx.prisma.project.findMany();
}),
Frontend
const { data: projects } = api.project.getAllProjects.useQuery();
As for PlanetscaleDB, this is my first try at it and I have to say it's very user friendly. I used two databases (prod and dev), then when I'm satisfied with the changes I make to the prisma.schema file, I can create a deploy request on my dev branch and it pushes the changes to my production db. Planetscale will detect the changes I made to the schema and hold off until I say go.
The Frontend uses a variety of tools like NextJS, TailwindCSS, DaisyUI, CodeMirror, React Markdown, and DayJS. There is plenty of good information available in their respective docs, YouTube and blogs on how to use all of them.
I used DaisyUI for the Navbar, Theme, Radial Progress Bar, Inputs, and Buttons.
Tailwind Typography, CodeMirror and ReactMarkdown were used to create a markdown enabled description inputs and rendering.
DayJS, for dates.
React Icons for all icons.
Vercel
This is a T3 Stack project bootstrapped with create-t3-app.