streaks

Visualize your consistency

Technologies Used

• Next.js 14
• NextUI v2
• Tailwind CSS
• Tailwind Variants
• TypeScript
• Framer Motion
• next-themes
• Zustand

How to Use

Install dependencies

pnpm i

Run the development server

pnpm dev

Setup pnpm (optional)

If you are using pnpm, you need to add the following code to your .npmrc file:

public-hoist-pattern[]=*@nextui-org/*

After modifying the .npmrc file, you need to run pnpm install again to ensure that the dependencies are installed correctly.

.env

AUTH_SECRET=
AUTH_GITHUB_ID=
AUTH_GITHUB_SECRET=
DATABASE_URL="file:./data.db"

Roadmap

On Going

• Trash icon - danger color
• Use as guest
• Persist data in local storage
• Calculate streak
• Edit task (inline)
• Delete project (modal) (except 'All Projects')
  • Cascade delete all associated tasks
• Edit project name (modal) (except 'All Projects')
  • Update project tag for tasks in 'Completed' tab
• Populate edit field with current project name (workaround?)
• Save current tab in URL search params
• Open 'Completed' tab when a date is clicked on activity map
• Clean up
• Host it

Up Next

• Delay in checking off task
• Mobile friendly design
• Sort based on project in completed tab
• Undo on today's completed tasks
• Focus on text input in new project modal
• Drag and drop tasks to reorder
• Emjoi picker in new project modal
• Year drop down in activity map
• Loading spinner after clicking Sign In button

Later

• Use slices instead of two stores
• Settings page

Dev Time

Resources

Zustand best practices