🚀 OptiFlow - Smart Task Management

A powerful, intuitive task management application that helps you organize your workflow with ease. Built with React.js and Firebase Authentication for secure user access.

✨ Features that Shine

• 📋 Intuitive Task Management

• 📊 Productivity Analytics

• 🔒 Secure User Authentication

🚀 Quick Setup

Prerequisites

# Node.js installation required
node -v  # Should be v14.0.0 or higher

# npm or yarn for package management
npm -v   # Should be v6.0.0 or higher
# or
yarn -v  # Should be v1.22.0 or higher

# Firebase project setup required
# Create a project at https://console.firebase.google.com/

Installation

1. Clone the repository

   git clone https://github.com/Anmol283/OptiFlow
   cd optiflow

2. Install dependencies

   npm install
   # or
   yarn install

3. Configure Firebase

   // In src/firebase/config.js, replace with your Firebase config
   const firebaseConfig = {
     apiKey: "YOUR_API_KEY",
     authDomain: "your-project-id.firebaseapp.com",
     projectId: "your-project-id",
     storageBucket: "your-project-id.appspot.com",
     messagingSenderId: "YOUR_MESSAGING_SENDER_ID",
     appId: "YOUR_APP_ID"
   };

4. Start the development server

   npm start
   # or
   yarn start

5. Access the application

   Open http://localhost:3000 in your browser
   

🛠️ Technical Architecture

optiflow/
├── 📁 public/                 # Static files
│   ├── index.html            # HTML entry point
│   ├── manifest.json         # PWA manifest
│   └── assets/               # Images and icons
├── 📁 src/                    # Source code
│   ├── 📁 components/         # React components
│   │   ├── Auth/             # Authentication components
│   │   ├── Dashboard/        # Dashboard layout
│   │   ├── Tasks/            # Task-related components
│   │   ├── UI/               # Reusable UI components
│   │   ├── Navbar.jsx        # Navigation bar component
│   │   ├── Firebase.jsx      # Firebase-related component
│   │   └── ThreeParticles.jsx # Particle.js component (assumed from "threeparticles")
│   ├── 📁 context/            # React context
│   ├── 📁 firebase/           # Firebase configuration
│   ├── 📁 hooks/              # Custom hooks
│   ├── 📁 pages/              # Application pages
│   │   ├── Login.jsx         # Login page
│   │   ├── Signin.jsx        # Sign-in page
│   │   ├── Dashboard.jsx     # Dashboard page
│   │   ├── Calendar.jsx      # Calendar page
│   │   ├── Report.jsx        # Report page
│   │   └── TaskLoader.jsx    # Task loader page
│   ├── 📁 redux/              # Redux store setup
│   │   ├── actions/          # Redux actions
│   │   ├── reducers/         # Redux reducers
│   │   └── store.js          # Redux store configuration
│   ├── 📁 styles/             # CSS/SCSS styles
│   ├── App.js                # Main App component
│   └── index.js              # JavaScript entry point
└── 📁 config/                 # Build configuration

🔒 Authentication Flow

User Registration

OptiFlow provides a seamless registration process:

1. Email/Password Registration

   const handleSignUp = async (e) => {
     e.preventDefault();
     try {
       await signUpUser(email, password);
       history.push('/dashboard');
     } catch (error) {
       setError(error.message);
     }
   };

2. Social Media Authentication

   • Google Sign-In
   • Github Sign-In

📋 Task Management Features

Creating Tasks

Users can create tasks with:

• Title and description
• Priority level (Low, Medium, High)
• Due date

🎨 Styling Highlights

• Modern UI: Sleek, minimalist design with Particle.js effects
• Animations: Framer Motion task loader and smooth transitions
• Accessibility: WCAG 2.1 compliant design

🔜 Roadmap

• Collaborative task sharing
• Task templates
• Email notifications
• Time tracking integration
• Advanced reporting features
• Mobile app version (React Native)

🤝 Contributing

1. Fork the Project
2. Create your Feature Branch (git checkout -b feature/AmazingFeature)
3. Commit your Changes (git commit -m 'Add some AmazingFeature')
4. Push to the Branch (git push origin feature/AmazingFeature)
5. Open a Pull Request

📄 License

Distributed under the MIT License. See LICENSE for more information.

📬 Let's Connect!

---

💻 Visit our website: OptiFlow

🌟 Star this repository if you find it helpful!

🙏 Acknowledgments

• React.js
• Firebase
• Redux
• Material-UI
• React DnD

---