App Manage Tasks

This is a Manage Tasks web application built with Angular CLI 16, Firebase 9, and Firestore. The app allows users to register, browse a list of task, and create personalized task to asign to persons nad skills.

Table of Contents

• Demo
• Features
• Tech Stack
• Prerequisites
• Installation
• Running the App
• Build
• Firebase Configuration
• Deploying to Firebase Hosting
• License

Demo

A demo of the app can be found here (https://app-manage-tasks.web.app).

Features

• User registration and login
• Browse Manage Tasks
• Manage list of tasks
• SweetAlert2 for user notifications

Tech Stack

• Angular CLI: 16.2.15
• Firebase: 10
  • Firebase Authentication
  • Firestore (NoSQL database)
  • Firebase Hosting
• Tailwind CSS: 3.4.13 for responsive styling
• SweetAlert2: 11.6.13 for notifications

Prerequisites

Make sure you have the following installed on your machine:

• Node.js (version 16 or higher is recommended): Download Node.js
• Angular CLI (v16 or higher): Install Angular CLI globally

  npm install -g @angular/cli
  npm install -g firebase-tools

Installation

• Clone the Repository Clone the project to your local machine using the following command: git clone https://github.com/your-username/app-manage-tasks.git

  cd app-manage-tasks

• Install Dependencies

  npm install

• Configure Firebase
  • To use Firebase services such as authentication and Firestore, configure Firebase as follows:
    • Create a Firebase project at Firebase Console.
    • Register your web app and copy the Firebase configuration details.
    • Add your Firebase configuration to the environment files:
    • In src/environments/environment.ts (for development):

    export const environment = {
        production: false,
        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',
            measurementId: 'YOUR_MEASUREMENT_ID'
        }
    };

• Setup Tailwind CSS

  @tailwind base;
  @tailwind components;
  @tailwind utilities;

Running the App

• To run the app locally, use the Angular CLI development server:

  npm start
  

• Custom Server Port

  • The app is configured to run on port 4500 by default. If you want to change this port, you can modify the start script in package.json.

    "start": "ng serve -o --port 4500"

Build

• To build the project for production, run:

  npm run build

Firebase Configuration

• Initialize Firebase Hosting
  • To deploy the app to Firebase, you need to configure Firebase Hosting.
    • Run the following command to initialize Firebase in the project:

      firebase init

    • Select Hosting from the list of Firebase services.
    • Choose the Firebase project you created earlier.
    • Set the public directory to dist/[app-manage-tasks], where [app-manage-tasks] is the name of your Angular project.
    • Choose No when asked if the app should be configured as a Single Page Application (SPA).

Deploying to Firebase Hosting

• After building the project and configuring Firebase Hosting, you can deploy the app to Firebase using the following command:

  firebase deploy

• Firebase will deploy the contents of the dist/ directory to Firebase Hosting, and the app will be live at the URL provided after deployment.

License

• This project is licensed under the MIT License.
  • Complete Integration: All installation, configuration, and command steps are integrated within the same README.md file.
  • Commands Included: All commands, such as npm install, firebase deploy, etc., are directly included in the file without being separated.
  • Full Flow: Follows the flow defined in the table of contents, without leaving any steps out or independent.