A task management web application built with React, Vite, and Firebase.

1 2

• User Authentication

  • Email/password login and registration
  • Google sign-in integration
  • Password reset functionality
  • Profile management

• Task Management

  • Create, edit, and delete tasks
  • Mark tasks as complete/incomplete
  • Set priority levels (high, medium, low)
  • Add due dates and descriptions
  • Filter tasks by status (all, active, completed)

• User Interface

  • Responsive design for mobile and desktop
  • Clean, modern interface with Material UI
  • Intuitive navigation with protected routes

• Frontend

  • React 18
  • Vite
  • React Router Dom
  • Material UI

• Backend Services

  • Firebase Authentication
  • Firebase Firestore

• Node.js (v16+)
• npm or yarn
• Firebase account

1. Clone the repository:

git clone https://github.com/yourusername/taskify.git
cd taskify

2. Install dependencies:

npm install

3. Create a Firebase project:

   • Go to Firebase Console
   • Create a new project named "Taskify"
   • Enable Authentication with Email/Password and Google sign-in methods
   • Create a Firestore database

4. Configure Firebase:

   • Create a .env file in the root directory:

   VITE_FIREBASE_API_KEY=your-api-key
   VITE_FIREBASE_AUTH_DOMAIN=your-project-id.firebaseapp.com
   VITE_FIREBASE_PROJECT_ID=your-project-id
   VITE_FIREBASE_STORAGE_BUCKET=your-project-id.appspot.com
   VITE_FIREBASE_MESSAGING_SENDER_ID=your-messaging-sender-id
   VITE_FIREBASE_APP_ID=your-app-id
   

   • Update src/firebase.js to use these environment variables:

   const firebaseConfig = {
    apiKey: import.meta.env.VITE_FIREBASE_API_KEY,
    authDomain: import.meta.env.VITE_FIREBASE_AUTH_DOMAIN,
    projectId: import.meta.env.VITE_FIREBASE_PROJECT_ID,
    storageBucket: import.meta.env.VITE_FIREBASE_STORAGE_BUCKET,
    messagingSenderId: import.meta.env.VITE_FIREBASE_MESSAGING_SENDER_ID,
    appId: import.meta.env.VITE_FIREBASE_APP_ID
   };

5. Set up Firestore security rules:

rules_version = '2';
service cloud.firestore {
 match /databases/{database}/documents {
 match /tasks/{taskId} {
 allow read, write: if request.auth != null && request.auth.uid == resource.data.userId;
 allow create: if request.auth != null && request.resource.data.userId == request.auth.uid;
 }
 match /users/{userId} {
 allow read, write: if request.auth != null && request.auth.uid == userId;
 }
 }
}

Run the development server:

npm run dev

Visit http://localhost:5173 to see the application.

Build the application:

npm run build

This will create a dist directory with the production build.

You can deploy this application to Firebase Hosting:

1. Install Firebase CLI:

npm install -g firebase-tools

2. Login to Firebase:

firebase login

3. Initialize Firebase:

firebase init

Select Hosting and choose your Firebase project.

4. Deploy:

firebase deploy

src/
├── components/
│ ├── auth/
│ │ ├── Login.jsx
│ │ ├── Register.jsx
│ │ └── ProtectedRoute.jsx
│ ├── layout/
│ │ ├── Navbar.jsx
│ │ └── Footer.jsx
│ └── tasks/
│ ├── TaskForm.jsx
│ ├── TaskList.jsx
│ └── TaskItem.jsx
├── contexts/
│ └── AuthContext.jsx
├── hooks/
│ └── useTasks.jsx
├── pages/
│ ├── HomePage.jsx
│ ├── LoginPage.jsx
│ ├── RegisterPage.jsx
│ ├── DashboardPage.jsx
│ └── ProfilePage.jsx
├── services/
│ ├── authService.js
│ └── taskService.js
├── utils/
│ └── dateUtils.js
├── App.jsx
├── main.jsx
├── firebase.js
└── index.css

1. Fork the repository
2. Create a feature branch:

git checkout -b feature/amazing-feature

3. Commit your changes:

git commit -m 'Add some amazing feature'

4. Push to the branch:

git push origin feature/amazing-feature

5. Open a Pull Request

This project is licensed under the MIT License - see the LICENSE file for details.

• React
• Vite
• Firebase
• Material UI