Project README

Project Overview

This project is a task and process management application designed to streamline workflows by assigning tasks to users with specific roles, such as admin, validator, and contributor. The application utilizes Firebase for authentication and Firestore for data storage, ensuring scalability and reliability.

---

Technologies Used

Frontend:

• React: For building the user interface.
• TypeScript: For static type checking and better developer experience.
• MobX: For state management.

Backend:

• Firebase Authentication: For user authentication and management.
• Firestore: For real-time NoSQL database storage.

Miscellaneous:

• Tailwind CSS: For styling.
• Vite: For fast builds and development server.

---

Prerequisites

Before running the project, ensure you have the following installed:

• Node.js (v16 or later)
• npm or yarn
• Firebase Project set up with:
  • Authentication enabled.
  • Firestore database configured.

---

Installation

1. Clone the Repository:

   git clone <repository-url>
   cd <project-directory>

2. Install Dependencies:

   npm install
   # or
   yarn install

3. Set Up Firebase Configuration:

   • Create a Firebase project at Firebase Console.
   • Enable Authentication and Firestore.
   • Generate a Firebase configuration file and replace the placeholder in the project’s firebaseConfig.ts file:

     const firebaseConfig = {
       apiKey: "YOUR_API_KEY",
       authDomain: "YOUR_AUTH_DOMAIN",
       projectId: "YOUR_PROJECT_ID",
       storageBucket: "YOUR_STORAGE_BUCKET",
       messagingSenderId: "YOUR_MESSAGING_SENDER_ID",
       appId: "YOUR_APP_ID",
     };

4. Run the Development Server:

   npm run dev
   # or
   yarn dev

   Open the app in your browser at http://localhost:3000.

---

Project Structure

.
├── src
│   ├── api            # Firebase API configuration and utilities
│   ├── components     # Reusable UI components
│   ├── pages          # Page components for routing
│   ├── stores         # MobX stores for state management
│   ├── styles         # Global and component-specific styles
│   ├── types          # TypeScript types and interfaces
│   └── utils          # Helper functions
├── public             # Static assets
├── package.json       # Project dependencies and scripts
├── README.md          # Project documentation
└── vite.config.ts     # Vite configuration

---

Usage

1. Login/Sign Up:

   • Admin, validator, and contributor roles are assigned based on user data stored in Firestore.

2. Role-Based Navigation:

   • The application dynamically renders navigation options based on the logged-in user's role.

3. Task Management:

   • Admins can create, assign, and update tasks.
   • Validators review tasks and update their statuses.
   • Contributors complete tasks assigned to them.

---

Scripts

• Start Development Server:

  npm run dev

• Build for Production:

  npm run build

• Run Tests:

  npm run test

---

Deployment

To deploy the project, you can use Firebase Hosting or any static hosting service.

Firebase Hosting

1. Install Firebase CLI:

   npm install -g firebase-tools

2. Login to Firebase:

   firebase login

3. Initialize Firebase Hosting:

   firebase init hosting

4. Build and Deploy:

   npm run build
   firebase deploy

---

Contributing

1. Fork the repository.
2. Create a new branch for your feature:

   git checkout -b feature-name

3. Commit your changes:

   git commit -m "Description of changes"

4. Push to your fork and create a pull request.

---

License

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

---

Support

For any issues or questions, please contact the project maintainer at [email protected] or create an issue in the GitHub repository.