{"id":25880942,"url":"https://github.com/gideon877/taxi-queue-app","last_synced_at":"2026-05-06T14:38:44.326Z","repository":{"id":273924677,"uuid":"917782827","full_name":"Gideon877/taxi-queue-app","owner":"Gideon877","description":"The app is a taxi route and queue management system that tracks routes, fare calculations, and taxi availability while handling queues for passengers and taxis at various ranks.","archived":false,"fork":false,"pushed_at":"2026-05-05T15:24:54.000Z","size":135,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2026-05-05T17:27:28.427Z","etag":null,"topics":["axios","mui-material","reactts","typescript","zustand"],"latest_commit_sha":null,"homepage":"https://taxi-queue-app-qq1e.onrender.com/","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/Gideon877.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,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2025-01-16T16:30:23.000Z","updated_at":"2026-05-05T15:24:58.000Z","dependencies_parsed_at":"2025-01-23T19:37:40.401Z","dependency_job_id":null,"html_url":"https://github.com/Gideon877/taxi-queue-app","commit_stats":null,"previous_names":["gideon877/taxi-queue-app"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/Gideon877/taxi-queue-app","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Gideon877%2Ftaxi-queue-app","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Gideon877%2Ftaxi-queue-app/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Gideon877%2Ftaxi-queue-app/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Gideon877%2Ftaxi-queue-app/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Gideon877","download_url":"https://codeload.github.com/Gideon877/taxi-queue-app/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Gideon877%2Ftaxi-queue-app/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":32698845,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-05-06T08:33:17.875Z","status":"ssl_error","status_checked_at":"2026-05-06T08:33:17.221Z","response_time":117,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.6:443 state=error: 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":["axios","mui-material","reactts","typescript","zustand"],"created_at":"2025-03-02T14:30:02.768Z","updated_at":"2026-05-06T14:38:44.308Z","avatar_url":"https://github.com/Gideon877.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Taxi Queue App\n\n## Features of the Widget\nThe widget should manage two queues:\n1. **People Queue**: Tracks the number of people waiting for a taxi.\n2. **Taxi Queue**: Tracks the number of taxis available.\n\n### Operations\n1. **People Joining the Queue**:  \n   - Add 1 to the **People Queue**.\n\n2. **People Leaving the Queue**:  \n   - Remove 1 from the **People Queue**.\n\n3. **Taxis Joining the Queue**:  \n   - Add 1 to the **Taxi Queue**.\n\n4. **Taxis Leaving the Queue**:  \n   - Remove 1 from the **Taxi Queue**.  \n   - Remove 12 people from the **People Queue**.  \n   - A taxi can only leave if there are at least 12 people in the **People Queue**.\n\n\n\n## Notes\n- Ensure that the app maintains the conditions for a taxi departure.\n- Handle edge cases like attempting to remove a person or taxi when the respective queues are empty.\n- Extend functionality as needed for a larger system.\n\n\n### Project Report: NestJS, Drizzle ORM, and React Setup\n\n---\n\n## **NestJS**\n\n### **Setup Steps**\n1. **Initialize NestJS Project:**\n   - Created a new NestJS project using the Nest CLI.\n   - Installed necessary packages:\n     ```bash\n     npm install @nestjs/config @nestjs/typeorm @nestjs/common\n     ```\n\n2. **Configure Drizzle ORM:**\n   - Installed Drizzle ORM:\n     ```bash\n     npm install drizzle-orm drizzle-orm/pg\n     ```\n   - Set up PostgreSQL as the database.\n   - Created schema definitions using `pgTable` for entities: `rankTable`, `taxiRouteTable`, `queueTable`, and `queueRouteTable`.\n\n3. **Implemented Core Features:**\n   - Added services for:\n     - Creating routes (`addRoute` method).\n     - Deleting related routes based on conditions.\n     - Fetching route details with relations using `leftJoin`.\n\n---\n\n### **Bugs and Solutions**\n\n#### Bug 1: `Property 'leftJoin' does not exist on type...`\n- **Cause:** Misconfiguration of the Drizzle ORM query builder.\n- **Solution:** Updated Drizzle ORM setup to correctly initialize relationships. Ensured proper usage of `leftJoin` in query building.\n\n#### Bug 2: Duplicate routes creation in `addRoute`:\n- **Cause:** When re-creating a deleted route, the arrival route was also duplicated.\n- **Solution:** Modified the `addRoute` method to first check for existing routes using a `select` query before inserting new records.\n\n---\n\n## **Drizzle ORM**\n\n### **Setup Steps**\n1. **Schema Definition:**\n   - Created `pgTable` entities for database tables (`rank`, `route`, `queue`, `queue_route`).\n\n2. **Relationships:**\n   - Added foreign key references between tables (`fromRankId`, `toRankId` in `route`, and `queueId` in `queue_route`).\n\n3. **Query Optimization:**\n   - Wrote queries for filtering and joining tables:\n     - Fetch routes by `queueId`.\n     - Filter ranks not associated with specific routes.\n\n---\n\n### **Bugs and Solutions**\n\n#### Bug 1: Missing `queueId` in Query Results\n- **Cause:** Joins didn't fetch `queueId` from the `queue_route` table.\n- **Solution:** Updated query to include `queueId` in the selected fields using `leftJoin`.\n\n#### Bug 2: Incorrect Filtering of Ranks\n- **Cause:** Filtering logic for ranks not linked to routes was incorrect.\n- **Solution:** Used `filter` and `some` in JavaScript to exclude ranks with matching `toRankId`.\n\n---\n\n## **React**\n\n### **Setup Steps**\n1. **Project Initialization:**\n   - Created a React project using Vite.\n   - Installed Material-UI for components:\n     ```bash\n     npm install @mui/material @emotion/react @emotion/styled\n     ```\n\n2. **Avatar and Images:**\n   - Placed static images in the `public` folder and referenced them with relative paths.\n\n3. **Stats Section:**\n   - Designed a grid layout using Material-UI to display stats like passengers departed, taxis needed, passengers needed, and fare made.\n\n4. **Route Details Component:**\n   - Created a component to display route details:\n     - From Rank\n     - To Rank\n     - Fare\n     - Additional analytics\n\n---\n\n### **Bugs and Solutions**\n\n#### Bug 1: Static Images Not Loading\n- **Cause:** Incorrect path used in the `src` attribute of the `Avatar` component.\n- **Solution:** Updated the path to include `/public`, or used `import.meta.url` for relative references:\n  ```jsx\n  \u003cAvatar src=\"/queue.png\" alt=\"Queue\" /\u003e\n  ```\n\n#### Bug 2: Maximum Update Depth Exceeded\n- **Cause:** `setQueueId` was called inside the component body instead of within `useEffect`.\n- **Solution:** Moved `setQueueId` into a `useEffect`:\n  ```jsx\n  useEffect(() =\u003e {\n    setQueueId(Number(id));\n  }, [id, setQueueId]);\n  ```\n\n#### Bug 3: Grid Items Not Rendering Correctly\n- **Cause:** Incorrect use of the `size` prop in Material-UI's `Grid`.\n- **Solution:** Updated to use `xs` and `md` props separately:\n  ```jsx\n  \u003cGrid item xs={12} md={3}\u003e\n  ```\n\n---\n\n## **Summary**\n\n### **What We Achieved**\n1. **Backend (NestJS + Drizzle ORM):**\n   - Set up a CRUD API for managing routes and queues.\n   - Resolved issues with duplicate route creation and complex queries using joins and filters.\n\n2. **Frontend (React):**\n   - Created a dashboard to display queue and route analytics.\n   - Resolved UI issues with static images and grid layouts.\n\n3. **Integrations:**\n   - Successfully linked frontend stats with backend queries.\n\nThis approach provided a modular and scalable solution to manage and analyze taxi routes and queues effectively.\n\n\n\n\n\n\u003c!-- Using Drizzle ORM --\u003e\n\n\n### **Drizzle ORM Commands: A Beginner’s Guide (Using `npx drizzle-kit`)**\n\nDrizzle ORM simplifies database management, and using `npx drizzle-kit` enhances it further by providing easy migration tools. This guide explains the commands you'll commonly use, their purpose, and when to use them.\n\n---\n\n## **1. Install Drizzle ORM**\nFirst, install Drizzle ORM, the PostgreSQL adapter, and `drizzle-kit` CLI tools:\n```bash\nnpm install drizzle-orm drizzle-orm/pg-core\nnpm install -D drizzle-kit\n```\n\n---\n\n## **2. Configure Drizzle ORM**\nSet up your database configuration and schema:\n1. Create a `db.ts` file to define your database connection:\n   ```typescript\n   import { drizzle } from 'drizzle-orm/node-postgres';\n   import { Pool } from 'pg';\n\n   const pool = new Pool({\n       connectionString: process.env.DATABASE_URL,\n   });\n\n   export const db = drizzle(pool);\n   ```\n2. Define tables in separate files using `pgTable`:\n   ```typescript\n   import { pgTable, integer, text } from 'drizzle-orm/pg-core';\n\n   export const rankTable = pgTable(\"rank\", {\n       id: integer().primaryKey().generatedAlwaysAsIdentity(),\n       rankName: text().notNull(),\n   });\n   ```\n\n---\n\n## **3. Initialize Drizzle Configuration**\nCreate a `.env` file to specify your database connection string:\n```plaintext\nDATABASE_URL=your_database_connection_string\n```\n\nRun the following command to create the initial Drizzle configuration:\n```bash\nnpx drizzle-kit generate:config\n```\n\nThis will create a `drizzle.config.ts` file in your project.\n\n---\n\n## **4. Generate SQL Migrations**\nWhenever you make schema changes (e.g., adding or modifying tables), you need to generate a migration file.\n\n### **Command:**\n```bash\nnpx drizzle-kit generate\n```\n\n### **What it does:**\n- Compares your current schema files to the database.\n- Generates a migration file in the `migrations` folder containing the SQL changes required.\n\n### **When to use:**\n- After making changes to your `pgTable` definitions.\n\n---\n\n## **5. Apply Migrations**\nApply the generated migrations to your database.\n\n### **Command:**\n```bash\nnpx drizzle-kit up\n```\n\n### **What it does:**\n- Executes the migration scripts in the `migrations` folder.\n- Updates your database schema to match your Drizzle definitions.\n\n### **When to use:**\n- After running `npx drizzle-kit generate` to generate migrations.\n- When deploying a project and setting up the database schema on a new server.\n\n---\n\n## **6. Roll Back Changes (Optional)**\nIf a migration causes issues, you can roll it back.\n\n### **Command:**\n```bash\nnpx drizzle-kit down\n```\n\n### **What it does:**\n- Reverts the most recent migration applied to the database.\n\n### **When to use:**\n- If a migration introduces errors or is unnecessary.\n\n---\n\n## **7. Run Queries**\nYou can now use Drizzle ORM to interact with your database.\n\n### **Example: Select Query**\n```typescript\nconst routes = await db.select().from(rankTable);\n```\n\n### **Example: Insert Query**\n```typescript\nconst newRank = await db.insert(rankTable).values({ rankName: 'Cape Town' }).returning();\n```\n\n### **Example: Update Query**\n```typescript\nawait db.update(rankTable).set({ rankName: 'New Name' }).where(eq(rankTable.id, 1));\n```\n\n### **Example: Delete Query**\n```typescript\nawait db.delete(rankTable).where(eq(rankTable.id, 1));\n```\n\n---\n\n## **Common Issues and Debugging**\n\n### **Issue: Migration Not Applying Changes**\n- **Cause:** You forgot to run `npx drizzle-kit generate` after schema updates.\n- **Solution:** Run `npx drizzle-kit generate` to regenerate the migration file, then apply it with `npx drizzle-kit up`.\n\n### **Issue: Duplicate Tables**\n- **Cause:** You manually modified the database schema without updating Drizzle's schema files.\n- **Solution:** Always update schema files and regenerate migrations with `npx drizzle-kit generate`.\n\n---\n\n## **Workflow Summary**\n1. Define or update table schemas using `pgTable`.\n2. Run `npx drizzle-kit generate` to generate migration files.\n3. Apply migrations to the database with `npx drizzle-kit up`.\n4. Use Drizzle ORM methods to query and manipulate data.\n5. If needed, roll back problematic migrations using `npx drizzle-kit down`.\n\nWith these commands, you can efficiently manage your database schema and data using Drizzle ORM!","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgideon877%2Ftaxi-queue-app","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fgideon877%2Ftaxi-queue-app","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgideon877%2Ftaxi-queue-app/lists"}