Task App 🚀

A Next.js-based task management application that allows users to create, view, and manage their tasks. It features user authentication, real-time updates, and the ability to mark tasks as public or private. The application leverages Firebase for data storage and authentication, providing a seamless and efficient task management experience.

🚀 Features

• User Authentication: Secure user authentication using NextAuth.js and Google OAuth.
• Task Creation: Users can create and add tasks with descriptions.
• Task Visibility: Tasks can be marked as public or private.
• Real-time Updates: Task lists update in real-time using Firebase Firestore's onSnapshot feature.
• Task Deletion: Users can delete tasks.
• Like/Dislike Feedback: Users can like or dislike tasks, with real-time feedback counts.
• Responsive Design: The application is designed to be responsive and accessible on various devices.
• Homepage Statistics: Displays the number of posts and comments.
• Toast Notifications: Provides user feedback through toast notifications.

🛠️ Tech Stack

• Frontend:
  • React: ^19.0.0
  • Next.js: 15.3.1
  • NextAuth.js: ^4.24.11
  • React Icons: ^5.5.0
  • React Toastify: ^11.0.5
• Backend:
  • Firebase: ^11.6.1 (Firestore)
• Languages:
  • TypeScript: ^5
  • JavaScript
• Build Tools:
  • npm
• Other:
  • CSS Modules
  • HTML
  • JSX

📦 Installation

Prerequisites

• Node.js (version 18 or higher)
• npm or yarn package manager
• Firebase project set up with Firestore enabled
• Google OAuth credentials

Installation

1. Clone the repository:

   git clone <repository_url>
   cd task-app

2. Install dependencies:

   npm install # or yarn install

3. Configure environment variables:

   • Create a .env.local file in the root directory.
   • Copy the contents of copy.env into .env.local and fill in the placeholder values with your actual credentials:

   GOOGLE_CLIENTE_ID=<your_google_client_id>
   GOOGLE_CLIENTE_SECRET=<your_google_client_secret>
   NEXTAUTH_URL=<your_nextauth_url> (e.g., http://localhost:3000)
   JWT_SECRET=<your_jwt_secret>
   NEXT_PUBLIC_URL=<your_public_url> (e.g., http://localhost:3000)
   API_KEY=<your_api_key>
   

4. Configure Firebase:

   • Initialize Firebase in src/services/firebaseConection.ts with your Firebase project credentials.

💻 Usage

Running locally

1. Start the development server:

   npm run dev # or yarn dev

2. Open your browser and navigate to http://localhost:3000 (or the URL specified in your .env.local file).

📂 Project Structure

task-app/
├── .next/                  # Next.js build output
├── node_modules/           # Node.js dependencies
├── public/                # Public assets (images, fonts, etc.)
│   └── assets/
│       └── hero.png
├── src/                   # Source code
│   ├── components/        # Reusable React components
│   │   ├── header/
│   │   │   └── header.tsx
│   │   └── textarea/
│   │       ├── index.tsx
│   │       └── textarea.module.css
│   ├── pages/             # Next.js pages (routes)
│   │   ├── api/           # API routes
│   │   ├── dashboard/
│   │   │   └── index.tsx
│   │   ├── _app.tsx       # Custom App component
│   │   └── index.tsx      # Homepage
│   ├── services/          # Firebase connection and other services
│   │   └── firebaseConection.ts
│   └── styles/            # Global styles and CSS modules
│       ├── dashboard.module.css
│       ├── globals.css
│       └── home.module.css
├── copy.env               # Environment variable template
├── next.config.ts         # Next.js configuration
├── package.json           # Project metadata and dependencies
├── package-lock.json      # Dependency lockfile
├── README.md              # Project documentation
└── tsconfig.json          # TypeScript configuration

📸 Screenshots

---

📅 Projeto criado para estudos e prática pessoal