TEAM-TASK-BOARD

Teamwork. Tasks. Done.

Built with the tools and technologies:

Table of Contents

• Overview
• Features
• Project Structure
  • Project Index
• Getting Started
  • Prerequisites
  • Installation
  • Usage
• License

---

Overview

Team Task Board is a collaborative task management web application streamlining teamwork. It features user authentication, task creation & editing, due date sorting, and a clean, intuitive interface. Ideal for teams needing a simple, efficient way to manage projects and boost productivity.

---

Features

	Feature	Summary
⚙️	Architecture	Uses a client-server architecture with the MERN stack. The client is a React application, the server is a Node.js Express application, and the database is MongoDB. The .env file stores environment variables for the server.
🔩	Code Quality	The codebase follows best practices for React projects on the client side and maintains a clean, well-structured, and modular codebase on the server side.
🔌	Integrations	Uses npm for package management. The server integrates Mongoose for MongoDB connectivity and Express for building the API. The client integrates Axios for communication with the server's RESTful API.
🧩	Modularity	The project is structured with separate client and server directories, ensuring modularity. Inside the client directory, React components and modules follow recommended project structure best practices. Inside the server directory, the project is organized with appropriately named directories based on functionality, and key elements are exported as modules for reuse in different parts of the project.
🛡️	Security	User authentication is handled via JWT in the server’s middleware. Passwords stored in the database are hashed for security.
📦	Dependencies	Relies on npm, and various JavaScript packages (specified in package.json and package-lock.json files). The manifest.json file contains metadata about the client application. The dependencies are managed using npm.

---

Project Structure

└── team-task-board/
    ├── client
    │   ├── package-lock.json
    │   ├── package.json
    │   ├── public
    │   ├── README.md
    │   └── src
    ├── LICENSE
    ├── README.md
    └── server
        ├── .env
        ├── config
        ├── controllers
        ├── middlewares
        ├── models
        ├── package-lock.json
        ├── package.json
        ├── routes
        └── server.js

Project Index

TEAM-TASK-BOARD/

client

package-lock.json

- The client\package-lock.json file is a dependency management file for the "client" portion of the project - It specifies the exact versions of all client-side JavaScript packages used, ensuring consistent builds and preventing dependency conflicts - This is crucial for maintaining the integrity and reproducibility of the client-side application within the larger project architecture.

package.json

- package.json configures the React client application - It specifies project dependencies, including React, testing libraries, and Axios for API calls, along with Font Awesome for icons and React Router for navigation - The scripts section defines commands for development, building, and testing - Browser compatibility settings ensure broad support - The file manages the client-side application's environment and build process.

public

index.html	- The index.html file serves as the main entry point for the React application, "Team Task Board" - It provides the basic HTML structure, including metadata and links to necessary resources - The element acts as a container where the React application renders, dynamically populating the page with the interactive task board interface - The file's purpose is to set up the initial page structure for the application's user interface.
manifest.json	- The manifest.json file configures the web app's metadata for installation on a user's device - It specifies application name, icons, startup behavior, and color themes - This ensures a consistent and branded user experience across different platforms, enhancing the overall application presentation within the larger React application architecture.
robots.txt	- robots.txt controls web crawler access to the client-side application - It instructs all user agents to allow access to all pages, effectively making the entire site crawlable by search engines and other bots - This ensures that the application's content is fully indexed and discoverable online - The file's role is crucial for search engine optimization within the overall project architecture.

src

App.css	- App.css defines the global styling for the React application's user interface - It sets the background color, font, and removes default margins and padding - The stylesheet also customizes the appearance of the scrollbar, enhancing the visual appeal and user experience within the application's overall design - This contributes to a consistent visual theme across the entire client-side application.
App.js	- App.js serves as the main application component, routing users between the home, login, and registration pages - It manages user authentication by checking for a stored token upon loading, setting the current user state accordingly - A navigation bar, providing logout functionality, is rendered conditionally based on login status - The component uses React Router for navigation and state management for user authentication.
App.test.js	- App.test.js verifies a core component's rendering within the React application - It confirms the presence of expected text, ensuring basic functionality and structural integrity of the application's primary component, App.js, during development - This contributes to the overall quality assurance and testing strategy of the client-side codebase.
index.css	- index.css establishes the global stylesheet for the React client application - It sets default body styles, including font, margin, and anti-aliasing, and defines a monospace font for code elements - This ensures consistent visual presentation across the entire user interface, contributing to a unified user experience.
index.js	- The index.js file bootstraps the React application - It renders the main application component, App, within a React StrictMode for enhanced development - This file serves as the entry point for the client-side application, initiating the rendering process and integrating performance monitoring tools if enabled - It connects the React application to the HTML document.
reportWebVitals.js	- reportWebVitals.js measures and reports website performance metrics - It uses the web-vitals library to collect key metrics like Cumulative Layout Shift (CLS), First Input Delay (FID), First Contentful Paint (FCP), Largest Contentful Paint (LCP), and Time to First Byte (TTFB) - This data informs performance optimization efforts within the larger client-side application.
setupTests.js	- setupTests.js configures the testing environment for the React application's client-side code - It integrates jest-dom, enhancing Jest's testing capabilities with DOM-specific assertions - This improves the efficiency and readability of component tests within the larger project, enabling developers to easily verify UI elements and their interactions - The setup streamlines testing throughout the client application.

components

Navbar

index.js	- The Navbar component renders a navigation bar, providing links to the application's home, login, and registration pages - It dynamically displays a personalized greeting and logout button for logged-in users, enhancing user experience and managing authentication within the React-based task board application - The component integrates with React Router for navigation and FontAwesome for icons.
styles.module.css	- Styles define the navigation bar's appearance within the client-side application - The CSS establishes a fixed, full-width navbar with a dark background, positioning elements for branding and user actions - Specific styles are applied to buttons, text, and icons, ensuring a consistent visual theme across the navigation component - This contributes to the overall user interface design.

TaskForm

index.js

- TaskForm provides a user interface for creating and submitting new tasks - It gathers task details including title, notes, checklist items, difficulty, due date, and status - Upon submission, it sends a POST request to a backend API endpoint to persist the new task, leveraging local storage for authentication - Successful submission triggers a page reload; errors are handled and displayed to the user - The component integrates with FontAwesome for visual elements and uses a controlled form for data management.

styles.module.css

- Styles define the visual presentation of a task form within a React application - The CSS module dictates the form's layout, using a card-style design with specific colors, shadows, and input field styling - It ensures consistent visual appearance across the application, enhancing user experience by providing a visually appealing and user-friendly interface for task creation or modification.

TaskItem

index.js

- TaskItem renders individual task details within a larger task management application - It displays task information and provides editing and deletion functionalities, conditional on user authorization - The component dynamically updates the task's visual appearance based on its status, enhancing user experience and providing clear visual cues - Data is managed locally within the component before updates are propagated to the application's backend.

styles.module.css

- Styles define the visual presentation of task items within a client-side application - The CSS module dictates card layout, text styling, form arrangement, button centering, and list item formatting, contributing to a consistent user interface for task display and management within the broader application's component structure.

TaskList

index.js

- TaskList component fetches and displays a user's tasks, sorted by due date, from a backend API - It renders individual tasks using the TaskItem component, enabling deletion and editing functionalities - These actions are performed via API calls, leveraging authentication tokens for secure access - The component updates the displayed task list after successful API interactions.

pages

HomePage

index.js

- HomePage renders the main application interface - It displays a task form for adding new tasks, conditionally shown based on user login status - A task list component presents existing tasks - The page uses styled components for visual layout, integrating seamlessly with the TaskList and TaskForm components to provide a user-friendly task management experience.

styles.module.css

- Styles define the layout of the homepage within the client-side application - The CSS dictates a responsive design, centering content and arranging elements in columns for larger screens, transitioning to a single column layout on smaller screens - It ensures consistent visual presentation across different devices by managing margins and flexbox properties for optimal user experience - This contributes to the overall user interface of the application's homepage.

LoginPage

index.js	- LoginPage handles user authentication within the client-side application - It presents a login form, collects user credentials, and submits them to a backend server for verification - Upon successful authentication, it stores a token locally and redirects the user to the application's home page - Error handling is included to manage failed login attempts.
styles.module.css	- Styles define the visual presentation of the login page within a larger web application - The CSS dictates the vertical spacing, central alignment of form elements, card styling (dimensions, background, padding), and button placement - These styles contribute to the user interface's overall look and feel, enhancing user experience during login.

RegisterPage

index.js

- RegisterPage handles new user registration - It presents a form for collecting user credentials (name, email, password), submits this data to a backend server via an API call, and redirects to the login page upon successful registration - Error handling is included to manage failed registration attempts, providing feedback to the user - The component uses React and Axios for frontend functionality.

styles.module.css

- Styles define the visual layout of the registration page within a larger web application - The CSS dictates page element positioning, using vertical margins and flexbox for centering form elements within a dark-colored card - It ensures consistent visual presentation across different screen sizes, enhancing user experience during account creation.

server

.env	- The .env file configures the application's environment settings - It specifies the server port (5555), the MongoDB connection string (mongodb://127.0.0.1/team_task_board), and a JWT secret for authentication - These settings are crucial for the application's runtime, enabling database connectivity and secure user authorization within the larger team task board application.
package-lock.json	- The server/package-lock.json file is a dependency management file for the server component of the project - It specifies the exact versions of all required Node.js packages (like Express.js, bcryptjs, and jsonwebtoken), ensuring consistent and reproducible builds across different environments - This is crucial for maintaining the integrity and functionality of the server application within the larger project architecture.
package.json	- The package.json file configures the server application - It specifies project metadata, defines scripts for starting the server using Nodemon, and lists dependencies including Express for routing, Mongoose for database interaction, and libraries for security and JSON web tokens - Essentially, it acts as the server's manifest, managing its environment and dependencies.
server.js	- The server.js file acts as the main application server - It initializes the Express.js application, connects to a database, enables CORS, and defines routes for task and user management via imported modules - Essentially, it sets up and runs the backend API, handling requests and responses for the entire application - The server listens on a specified port for incoming requests.

config

db.js

- The db.js file establishes the database connection for the application - It uses Mongoose to connect to a MongoDB instance, whose URI is retrieved from environment variables - Successful connection logs a confirmation message; failure results in an error message and application termination - This ensures the application can only operate with a functional database connection, forming a crucial part of the server's initialization.

controllers

taskController.js	- The taskController.js file manages all HTTP requests related to tasks within a task management application - It handles creating, retrieving, updating, and deleting tasks, ensuring data integrity and providing appropriate HTTP responses - The controller interacts with a Task model and a User model to manage task data and author information, enforcing data validation before saving new tasks.
userController.js	- The userController.js file manages user authentication within the application - It handles user registration, securely hashing passwords before storage, and user login, verifying provided credentials against stored hashes - Upon successful authentication, it issues JSON Web Tokens (JWTs) for subsequent secured access - Error handling is implemented to manage invalid inputs and database issues.

middlewares

authMiddleware.js

- AuthMiddleware verifies user authentication for protected routes - It intercepts requests, extracts JWTs from authorization headers, and validates them using a secret key - Upon successful verification, it attaches the user ID to the request object for subsequent middleware or route handlers - Invalid tokens result in unauthorized access responses - This ensures secure access control within the application's server-side architecture.

models

Task.js	- Task.js defines the Mongoose schema for tasks within the application's database - It structures task data, including title, author, notes, checklist, difficulty, due date, and status - This schema facilitates database interaction and data management for tasks, serving as a crucial component of the server-side model layer.
User.js	- The User.js model defines the structure for user data within the application's database - It utilizes Mongoose to create a schema specifying user attributes like name, email, password, and creation timestamp - This schema facilitates user account management and persistence, serving as a crucial component of the application's authentication and user data storage.

routes

taskRoutes.js

- taskRoutes.js defines RESTful API endpoints for managing tasks - It leverages Express.js to handle HTTP requests, routing them to corresponding controller functions for retrieving, creating, updating, and deleting tasks - Authentication middleware protects create, update, and delete operations, ensuring only authorized users can modify task data - The module exports the configured router for integration into the main application server.

userRoutes.js

- User authentication functionality is provided via these routes - It defines Express.js routes for user registration and login, leveraging controller functions to handle the respective processes - These routes are integral to the server's overall architecture, enabling user access and session management within the application - The controllers, located in ../controllers/userController, contain the business logic for user creation and verification.

---

Getting Started

Prerequisites

Before getting started with team-task-board, ensure your runtime environment meets the following requirements:

• Programming Language: JavaScript runtime - Node.js
• Database: MongoDB
• Package Manager: Npm

Installation

Install team-task-board using the following method:

1. Clone the team-task-board repository:

git clone https://github.com/Eyelor/team-task-board

2. Navigate to the project directory:

cd team-task-board

3. Navigate to the server directory:

cd server

4. Install the server project dependencies:

Using npm

npm install
npm install nodemon

5. Navigate to the client directory:

cd ../client

6. Install the client project dependencies:

Using npm

npm install

Usage

Run team-task-board using the following method:

1. Make sure that MongoDB database is up and running

2. Navigate to the project directory:

cd team-task-board

3. Navigate to the server directory:

cd server

4. Run the server app:

Using npm

npm start

5. Navigate to the client directory in a new terminal:

cd team-task-board/client

6. Run the client app:

Using npm

npm start

---

License

This project is protected under the Apache 2.0 License. For more details, refer to the LICENSE file.

---