Taskify

Task Management made simple - Checkout Now

Project Overview:

Taskify is a task management web application designed to help users organize their tasks efficiently. It provides features for creating tasks, setting deadlines, assigning priorities, and tracking task statuses. This README will guide you through setting up the project locally and provide an overview of the technologies used.Taskify.

Technologies Used:

1. React: The front-end of the application is built using React, a JavaScript library for building user interfaces.

2. Firebase: Firebase is used for backend services such as authentication, storage, and hosting.

   • Authentication: Firebase Authentication is used for user authentication, allowing users to sign up, log in, and securely access the application.
   • Storage: Firebase Storage is utilized for storing user-uploaded files, such as profile pictures.
   • Hosting: The application is hosted on Firebase Hosting, providing a scalable and reliable hosting solution.

3. React Router: React Router is used for client-side routing, enabling navigation within the single-page application.

4. React Query: React Query is used for data fetching and caching, providing a powerful solution for managing asynchronous data in React applications.

5. Axios: Axios is used for making HTTP requests to interact with external APIs and fetching data from the backend.

6. Tailwind CSS: Tailwind CSS is used for styling the user interface, providing a utility-first CSS framework for building responsive and customizable designs.

Project Setup:

To set up and run the project locally, follow these steps:

1. Clone the Repository:

   git clone https://github.com/nasimrifat101/taskify-client
   

   Replace your-username and your-project with your GitHub username and the name of the project repository.

2. Navigate to the Project Directory:

   cd your-project
   

3. Install Dependencies:

   npm install
   

   This command installs all the necessary dependencies listed in the package.json file.

4. Set Up Firebase:

   • Create a Firebase project on the Firebase Console.
   • Enable Firebase Authentication and Firebase Storage services.
   • Set up Firebase Hosting if you intend to deploy the application.
   • Copy the Firebase configuration object provided during project creation.

5. Environment Variables:

   • Create a .env file in the root directory of the project.
   • Add environment variables for Firebase configuration:

     VITE_APIKEY=your-firebase-api-key
     VITE_AUTHDOMAIN=your-firebase-auth-domain
     VITE_PROJECTID=your-firebase-project-id
     VITE_STORAGEBUCKET=your-firebase-storage-bucket
     VITE_MESSAGINGSENDERID=your-firebase-messaging-sender-id
     VITE_APPID=your-firebase-app-id
     

   • Replace your-firebase-* placeholders with the actual values from your Firebase project configuration.

6. Run the Application:

   npm start
   

   This command starts the development server and opens the application in your default web browser. Any changes made to the code will automatically reload the application.

Deployment:

To deploy the application to Firebase Hosting:

1. Build the Application:

   npm run build
   

   This command creates an optimized production build of the application in the build directory.

2. Deploy to Firebase Hosting:

   firebase deploy
   

   Make sure you have the Firebase CLI installed (npm install -g firebase-tools). This command deploys the application to Firebase Hosting, and upon completion, it provides a hosting URL where the application is accessible.

Contributing:

If you wish to contribute to the project, feel free to fork the repository, make your changes, and submit a pull request. Make sure to follow the project's coding conventions and guidelines.

License:

This project is licensed under the MIT License, which allows for free use, modification, and distribution of the code. Make sure to include the license file in your project if you decide to use it.