dev tasks

A minimal, fast, and stylish task manager for developers. Sign in with Google, create tasks, update titles and descriptions, toggle completion, and manage your list in real time — powered by Firebase and a modern React + Vite + Tailwind stack.

Features

• Google authentication: One-click sign-in using Firebase Auth
• Task CRUD: Create, read, update, and delete tasks
• Toggle completion: Mark tasks as done/undone from the list
• Per-user data: Each user's tasks are isolated in Firestore under users/{uid}/tasks
• Toasts and UX: Crisp feedback using react-hot-toast
• Modern UI: Tailwind CSS with playful shadows and animations

Tech Stack

• React (Vite) with React Router
• Firebase: Auth + Cloud Firestore
• Tailwind CSS for styling
• ESLint for linting

Getting Started

1) Prerequisites

• Node.js 18+ and npm
• A Firebase project with Web App credentials

2) Firebase setup

In Firebase console:

• Enable Authentication → Sign-in method → Google
• Create a Web App and copy the configuration values
• Enable Cloud Firestore in production or test mode

3) Environment variables

Create a .env file in the project root with the following keys (Vite requires the VITE_ prefix):

VITE_FIREBASE_APIKEY=your_api_key
VITE_FIREBASE_AUTHDOMAIN=your_project.firebaseapp.com
VITE_FIREBASE_PROJECTID=your_project_id
VITE_FIREBASE_STORAGEBUCKET=your_project.appspot.com
VITE_FIREBASE_MESSAGING_SENDERID=your_sender_id
VITE_FIREBASE_APPID=your_app_id
VITE_FIREBASE_MEASUREMENTID=your_measurement_id

4) Install and run

npm install
npm run dev

The app runs at http://localhost:5173 by default.

Scripts

• npm run dev: start Vite dev server
• npm run build: production build
• npm run preview: preview build locally
• npm run lint: run ESLint

Project Structure

src/
  components/
    Error.jsx
    Footer.jsx
    Loading.jsx
  context/
    AuthContext.jsx         # Auth state, Google sign-in, user bootstrap
  firebase/
    config.js               # Firebase config (reads VITE_ env vars)
    tasks.js                # Firestore helpers for tasks
  hooks/
    useTask.js              # Fetch one task
    useTasks.js             # Fetch list of tasks
  pages/
    Landing.jsx             # Entry with CTA to try tasks
    AuthPage.jsx            # Google sign-in trigger
    Tasks.jsx               # List with add + toggle complete
    Task.jsx                # Edit title/description, delete
  routes/
    AppRoutes.jsx
  App.jsx
  main.jsx

Data Model

• Users collection: users/{uid}
• Tasks subcollection: users/{uid}/tasks/{taskId}
• Task fields: { title: string, description: string, completed: boolean, createdAt: Timestamp, updatedAt: Timestamp }

Notes

• Ensure you are signed in to create or edit tasks.
• On first sign-in, a user document is created in users/{uid} automatically.

License

MIT