📝 GraphQL Task Manager

A professional full-stack task management application that demonstrates modern web development practices using GraphQL API architecture with a Spring Boot backend and vanilla JavaScript frontend.

🎯 Project Overview

This project showcases a complete implementation of a task management system built with GraphQL, demonstrating how to create a scalable API layer and consume it from a custom frontend without relying on JavaScript frameworks. It serves as an excellent example of full-stack development skills, API design, and modern database integration.

---

✨ Key Features

• Task Management: Create, read, update, and delete tasks with title and description
• Status Tracking: Mark tasks as completed or revert them back to pending
• GraphQL API: Efficient data fetching with queries and mutations
• Responsive Design: Clean, mobile-friendly interface
• Real-time Updates: Immediate UI updates after database operations
• Secure Operations: Uses GraphQL variables for safe parameter passing

---

🏗️ Technical Architecture

Backend Components

• Spring Boot 3: Modern Java framework for building RESTful APIs
• Spring GraphQL: Implementation of GraphQL Java for schema-first API development
• Spring Data JPA: Data access layer with repository pattern
• PostgreSQL: Robust relational database for persistent storage
• Java 17: Leveraging modern Java features

Frontend Components

• Vanilla JavaScript: Pure JavaScript implementation without frameworks
• HTML5/CSS3: Modern markup and styling with responsive design
• Fetch API: For making GraphQL requests to the backend

Project Structure

src/
├── main/
│   ├── java/com/example/taskmanager/
│   │   ├── model/         → Task entity with JPA annotations
│   │   ├── repository/    → TaskRepository interface extending JpaRepository
│   │   ├── service/       → TaskService with business logic
│   │   └── graphql/
│   │       ├── query/     → TaskQueryResolver for data retrieval
│   │       └── mutation/  → TaskMutationResolver for data modifications
│   └── resources/
│       ├── static/        → Frontend assets (index.html, CSS, JS)
│       ├── graphql/       → GraphQL schema definition
│       └── application.properties → Configuration

---

🛠️ Technology Stack

Layer	Technology	Purpose
Language	Java 17	Backend implementation
Framework	Spring Boot 3	Application framework
API	Spring GraphQL	GraphQL API implementation
Database	PostgreSQL	Data persistence
ORM	Spring Data JPA	Object-relational mapping
Frontend	HTML5, CSS3, JavaScript	User interface
Build Tool	Maven	Dependency management and build

---

🚀 Getting Started

Prerequisites

• Java 17 or higher
• Maven 3.6+
• PostgreSQL 12+
• Git

Installation Steps

1. Clone the repository

   git clone https://github.com/your-username/task-manager-graphql.git
   cd task-manager-graphql

2. Database Setup

   Install PostgreSQL if not already installed, then create a database:

   CREATE DATABASE taskdb;

   Update database credentials in src/main/resources/application.properties:

   spring.datasource.url=jdbc:postgresql://localhost:5432/taskdb
   spring.datasource.username=postgres
   spring.datasource.password=your_password
   spring.jpa.hibernate.ddl-auto=update
   spring.jpa.show-sql=true

3. Build and Run the Application

   ./mvnw clean install
   ./mvnw spring-boot:run

4. Access the Application

   • Frontend UI: http://localhost:8080/
   • GraphQL Playground: http://localhost:8080/graphiql

---

📊 GraphQL Schema

The application implements the following GraphQL schema:

type Task {
  id: ID!
  title: String!
  description: String
  completed: Boolean!
}

type Query {
  tasks: [Task!]!
  task(id: ID!): Task
}

type Mutation {
  addTask(title: String!, description: String): Task!
  updateTask(id: ID!, title: String, description: String, completed: Boolean): Task!
  deleteTask(id: ID!): Boolean!
}

---

🔧 API Usage Examples

Adding a New Task

mutation CreateTask {
  addTask(title: "Learn GraphQL", description: "Build a task manager") {
    id
    title
    completed
  }
}

Retrieving All Tasks

query GetAllTasks {
  tasks {
    id
    title
    description
    completed
  }
}

Updating Task Status

mutation UpdateTaskStatus {
  updateTask(id: "1", completed: true) {
    id
    title
    completed
  }
}

---

💻 Frontend Implementation

The frontend is built with vanilla JavaScript and demonstrates:

• GraphQL query and mutation execution
• Dynamic DOM manipulation
• Event handling for user interactions
• Responsive design principles
• Error handling and user feedback

Key files:

• src/main/resources/static/index.html: Main application structure
• src/main/resources/static/css/style.css: Styling and responsive design
• src/main/resources/static/js/app.js: JavaScript application logic

---

🎨 UI Preview

The interface features:

• Clean, modern design with intuitive navigation
• Task creation form with validation
• Task list with status indicators
• Action buttons for completing and deleting tasks
• Responsive layout for mobile and desktop

---

🔮 Future Enhancements

• Authentication & Authorization: JWT-based security with Spring Security
• Advanced Features: Task categories, due dates, priority levels
• UI Improvements: Dark mode, animations, enhanced accessibility
• Testing: Unit and integration tests for all components
• Performance: Caching, pagination, and optimization
• Deployment: Docker containerization and cloud deployment

---

🤝 Contributing

Contributions are welcome! Please follow these steps:

1. Fork the repository
2. Create a feature branch (git checkout -b feature/amazing-feature)
3. Commit your changes (git commit -m 'Add some amazing feature')
4. Push to the branch (git push origin feature/amazing-feature)
5. Open a Pull Request

---

📜 License

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

---

🙏 Acknowledgments

• Spring Boot team for the excellent framework
• GraphQL Foundation for the innovative API technology
• PostgreSQL community for the robust database system
• All contributors who help improve this project

---

👤 Author

• Rajeev Nayan

---