PomoTodo is a simple todo list app that uses the Pomodoro Technique to help you focus on your tasks.

live URL: https://pomotodo-five.vercel.app/

Table of Contents

• Features
• Tech Stack
• Getting Started
• Folder Structure
• Screenshots

Features

• Task Management with CRUD and sorting
• Pomodoro Timer with 25 minutes work and 5 minutes break (15 minutes break every 4 pomodoros)
• User Authentication with Auth0
• UI/UX similar to the shared dribbble design but unique in its own way
• Analytics Dashboard with charts and graphs
• Custom Task Categories
• PWAs
• Notifications

Tech Stack

• Next.js
• TypeScript
• GraphQL
• Grommet
• Auth0
• Apollo
• Prisma
• PostgreSQL
• Supabase

Getting Started

1. Clone the repo
2. Add this to your .env.local file:

AUTH0_SECRET='<auth secret from Auth0>'
AUTH0_BASE_URL='http://localhost:3000'
AUTH0_ISSUER_BASE_URL='<issuer base url from auth0 >'
AUTH0_CLIENT_ID='<Auth0 Client Id>'
AUTH0_CLIENT_SECRET='<Auth0 Client secret>'

3. Add this to your .env file:

DATABASE_URL="<postgres URL>"
NODE_ENV="development"

4. Install dependencies npm install
5. Run the development server npm run dev
6. Open http://localhost:3000 with your browser to see the result.

Folder Structure

├── components
│   ├── dashboard
│   |   ├── Graph.tsx # Graph component
│   |   ├── PieChart.tsx # Header component
│   |   └── StatCard.tsx # Stats component
│   ├── layout
│   |   ├── Layout.tsx # Layout component
│   |   ├── MyHeader.tsx # Header component
│   |   └── MyNabBar.tsx # Mobile navbar component, only shown on mobile
│   ├── pomodoro
│   |   └── Timer.tsx # Timer component with 25 minutes work and 5 minutes break (15 minutes break every 4 pomodoros)
│   ├── popups
│   |   └── FilterPopup.tsx # Filter task popup component
│   └── tasks
|       ├── TaskComponent.tsx # Task card with options to edit, delete and mark as done
│       ├── TaskForm.tsx # Task form to add and edit tasks
│       ├── TaskList.tsx # Task list map component
│       └── TaskPage.tsx # Task page with task list and header
├── context
|   └── appStateContext.tsx # Context for global state
├── graphql
│   ├── context # Functions to get user and check if user is authenticated
│   ├── resolvers # GraphQL resolvers
│   ├── schema # GraphQL schema
│   └── gqlQueries.ts # GraphQL queries
├── lib
│   ├── apollo.ts # Apollo client
│   └── prisma.ts # Prisma client
├── pages
│   ├── api
│   │   ├── auth
│   │   │   └── [...auth0].ts
│   │   └── graphql.ts
│   ├── _app.tsx
│   ├── _document.tsx
│   ├── dashboard # Dashboard page with simple analytics
│   ├── index.tsx 
│   ├── settings.tsx # Simple settings page with logout button
│   └── tasks.tsx # Only accessible on mobile
├── prisma
│   ├── migrations
│   └── schema.prisma
├── public
│   ├── favicon.ico
│   ├── images
│   └── manifest.json # PWA manifest
├── styles
|   └── global.css
├── utils
│   ├── notification.ts # get permissions and send notification
│   └── quotes.ts # random quotes array
├── .env
├── .env.local
├── .gitignore
├── .prettierrc
├── LICENSE
├── README.md
├── next-env.d.ts
├── package-lock.json
├── package.json
├── tsconfig.json
└── yarn.lock

Screenshots