/dg-todo

Primary LanguageTypeScript

TODO list app

Welcome! This a simple TODO list app created as a test tasks to show my coding skills.

Technologies used: TypeScript, Next.js, Tailwind, Prisma + PostgreSQL, pnpm.

Note

The only authentication method is using GitHub OAuth.

See live demo

Requirements

Design

  • Esthetically pleasing and easy-to-use UI
  • Desktop-first design

Task list

  • Show list of tasks per authenticated user
  • Task has a name and description
  • Form for creating and editing tasks

Persistence

  • Store tasks in database

Error handling

  • Make sure user is informed about possible errors

Extra: Offline mode

To make the task a bit more challenging and educating I've implemented an offline mode allowing user to work with tasks when out of network connection. When the user gets back online the pending changes are synched with database.

Here's a demo how it looks like.

Screen.Recording.2024-06-28.at.13.18.20.mov

How to run

First you need to create your .env file. Fill your own variables.

cp .env.development.example .env.development.local

Run the development server.

pnpm dev

Open http://localhost:3000 with your browser to see the result.

Read more about Next.js development in Next.js Documentation.

How to work with databse

Edit prisma.schema following the Prisma docs.

# push schema changes to database
pnpm prisma:push

# regenerate client
pnpm prisma:client

Deploy on Vercel

The easiest way to deploy your Next.js app is to use the Vercel Platform from the creators of Next.js.

Check out our Next.js deployment documentation for more details.

Missing features