Todolist

This is a T3 Stack project bootstrapped with create-t3-app.

v1

Frontend

Key features

  • Create a todolist Create Todolist
  • Edit todolist title Update Todolist
  • Create a todo item Create Todo
  • Edit todo item title Edit Todo
  • Check todo item Check Todo
  • Delete todo/todolist confirmation modal Delete Todolist
  • Authentication Authentication
  • SSR (Prefetching)
To achieve the desired result (already have a pre-rendered page from server side) I've used a SSGHelper function to prefetch the initial query. I've created a reusable utility function to create this SSG.
export const getSSGHelpers = async (
  req: GetServerSidePropsContext["req"],
  res: GetServerSidePropsContext["res"]
) => {
  const session = await getServerAuthSession({ req, res });
  const ssg = createProxySSGHelpers({
    router: appRouter,
    ctx: createInnerTRPCContext({ session }),
    transformer: superjson,
  });
  return ssg;
};
Usage example:
export const getServerSideProps: GetServerSideProps = async ({ req, res }) => {
  const ssg = await getSSGHelpers(req, res);

  await ssg.todolists.getAll.prefetch();
  return {
    props: {
      trpcState: ssg.dehydrate(),
    },
  };
};
  • Informative toasts
Informative toasts for error, loading & success. Those toasts are implemented using global state via jotai & with React portals so that they can be rendered on the body directly instead of inside of the application. They can be called using the hook useCreateToast and the helper functions that it returns, successToast, errorToast & loadingToast all of which accepts two parameters, first being the text to be displayed on the toast and the second being optional and the duration that the toast will be displayed for.

Implementation example:

const { errorToast } = useCreateToast();
const onError = <DataType extends { message: string }>(error: DataType) => {
  errorToast(error.message);
};

Backend

Key features

  • Create a todolist
  • Edit todolist title
  • Create a todo item
  • Edit todo item title
  • Check todo item title
  • Delete todo/todolist confirmation modal
  • Error handling and getting informative errors to the frontend
  • Authentication

Upcoming

Frontend

Features

  • Create shopping list instead of a regular todolist
  • Convert a regular todolist to shopping list
  • If the todolist is a shopping list, todo items should display it's amount
  • If the todolist is a shopping list, it should be possible to increase or decrease the item's amount
  • Should be possible to edit the item's amount on todo item edition screen

Backend

Features

  • Validate if a todolist is empty on edit endpoint, in case it's not, it should not be possible to change it's type
  • Create shopping list instead of a regular todolist
  • Endpoint for increasing/decreasing amount of an item, should validate either the todolist is of type shopping list, if it's not it should return an error
  • Adapt todo item edit endpoint to be possible to edit the amount as well, should validate either the todolist is of type shopping list, if it's not it should return an error

Technologies used

  • TypeScript as the main language of the project
  • tRPC as backend & frontend communication interface
  • Prisma as ORM
  • PostgreSQL as DB
  • NextJS as the main JS framework for both backend and frontend
  • TailwindCSS as the main CSS framework
  • Jotai for global state management (Frontend)
  • Vercel for hosting
  • NextAuth & Google oAuth for authentication

TypeScriptPrismaPostgreSQLNextJSTailwindCSSVercel