{"id":20879929,"url":"https://github.com/mirayatech/baki","last_synced_at":"2026-04-14T04:02:28.118Z","repository":{"id":307830784,"uuid":"681718457","full_name":"mirayatech/Baki","owner":"mirayatech","description":"Task management app built with React, GraphQL, Apollo, TypeScript.","archived":false,"fork":false,"pushed_at":"2023-12-05T09:04:57.000Z","size":76,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-08-02T14:40:04.485Z","etag":null,"topics":["apollo","apollo-client","apollo-server","crud","graphql","javascript","react","sdl","taskmanagement","todo","typescript"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/mirayatech.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2023-08-22T15:52:33.000Z","updated_at":"2025-06-09T18:59:23.000Z","dependencies_parsed_at":"2025-08-02T14:19:11.720Z","dependency_job_id":"c3c423af-c8f7-46e6-93f5-2a34706addc5","html_url":"https://github.com/mirayatech/Baki","commit_stats":null,"previous_names":["mirayatech/baki"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/mirayatech/Baki","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mirayatech%2FBaki","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mirayatech%2FBaki/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mirayatech%2FBaki/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mirayatech%2FBaki/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/mirayatech","download_url":"https://codeload.github.com/mirayatech/Baki/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mirayatech%2FBaki/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":31781292,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-04-14T02:24:21.117Z","status":"ssl_error","status_checked_at":"2026-04-14T02:24:20.627Z","response_time":153,"last_error":"SSL_read: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["apollo","apollo-client","apollo-server","crud","graphql","javascript","react","sdl","taskmanagement","todo","typescript"],"created_at":"2024-11-18T07:18:20.185Z","updated_at":"2026-04-14T04:02:28.083Z","avatar_url":"https://github.com/mirayatech.png","language":"TypeScript","readme":"# Task Management with GraphQL and Apollo Client/Server Project 🚀\n\n## My Journey into GraphQL 📖\n\nThis project represents my deep dive into the fascinating world of GraphQL. My main goal was to understand GraphQL better and, more importantly, to gain hands-on experience. To accomplish this, I decided to use Apollo Server and build a GraphQL server, all while actively working on various queries and mutations.\n\n## Task Management at Its Core 📋\n\nAt the heart of this project lies a task management system. Users can create, read, update, and delete tasks. It's all about simplifying task management.\n\n## Behind the Scenes: Server-Side Logic 🖥️\n\nInside the **Server** directory, you'll find the core logic of our project in `index.js`. Here's a sneak peek at what's happening:\n\n- **Apollo Server Setup**: I set up an Apollo Server using the `@apollo/server` package. This server is armed with a carefully designed schema (`typeDefs`) and the necessary resolvers (`resolvers`).\n\n- **Resolvers**: These are the workhorses of our server. They handle everything from querying tasks to creating, updating, and deleting them.\n\n- **Data Storage**: To mimic a database, I adopted a simple in-memory storage approach using the `tasks` array.\n\n- **Schema Definition**: Using the Schema Definition Language (SDL), I meticulously defined our GraphQL schema. It specifies the types, queries, mutations, and input types available for this project.\n\n## Bringing It to Life on the Client Side 🌟\n\n- **`main.tsx`**: This is where I configure Apollo Client to connect to our GraphQL server. It's the bridge between the client and server.\n\n- **`App.tsx`**: This central React component is responsible for rendering our user interface. It showcases the project title and houses the `Tasks` component.\n\n- **`types.tsx`**: TypeScript comes into play here, providing structured types for the client application, ensuring data consistency.\n\n- **`schemas.ts`**: GraphQL queries and mutations are defined using Apollo Client's `gql` function. This is how we communicate with the server.\n\n- **`Tasks.tsx`**: This component is the powerhouse. It handles data retrieval, task creation, and task card rendering, all thanks to Apollo Client's `useQuery` and `useMutation` hooks.\n\n- **`Taskcard.tsx`**: These individual task cards are where the magic happens. You can edit tasks, mark them as completed, or delete them, all made possible by Apollo Client's `useMutation` hook.\n\n## Key Technologies 🔧\n\n- **Apollo Server**: This played a pivotal role in setting up the GraphQL server on the server side.\n\n- **Apollo Client**: It's the engine that connects our client-side application to the GraphQL API.\n\n- **React**: The building block of our user interface, allowing me to create a dynamic and responsive experience.\n\n- **GraphQL**: The language that powers our API, enabling efficient data querying and manipulation.\n\n- **TypeScript**: A valuable tool that added a layer of safety and maintainability to the project with static typing.\n\n## What I've Learned 🧠\n\n- **Crafting a GraphQL Schema**: I've mastered the art of defining a GraphQL schema using the Schema Definition Language (SDL).\n\n- **Resolvers in Action**: Skillfully implementing GraphQL resolvers for queries and mutations has been a crucial part of this journey.\n\n- **Apollo Server Configuration**: I've successfully configured a GraphQL server using Apollo Server, making the connection between the client and server seamless.\n\n- **CRUD Operations with GraphQL**: Through GraphQL mutations, I've learned how to perform basic CRUD operations—Create, Read, Update, Delete—with precision.\n\n- **Connecting the Dots**: Forming connections between GraphQL types, such as relationships between tasks and their properties, has been a key focus.\n\n## Video 🎥\n\n\nhttps://github.com/mirayatech/Baki/assets/71933266/9e987307-6a10-4569-ae9d-b08d4f080bd9\n\n\n\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmirayatech%2Fbaki","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmirayatech%2Fbaki","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmirayatech%2Fbaki/lists"}