{"id":24881930,"url":"https://github.com/toreylittlefield/quadrant-basic-test-challenge","last_synced_at":"2026-04-14T14:32:30.473Z","repository":{"id":40703214,"uuid":"375999621","full_name":"toreylittlefield/quadrant-basic-test-challenge","owner":"toreylittlefield","description":"Coding Challenge with React, Node, Express, Apollo GraphQL","archived":false,"fork":false,"pushed_at":"2023-01-08T00:40:38.000Z","size":5198,"stargazers_count":2,"open_issues_count":8,"forks_count":0,"subscribers_count":3,"default_branch":"main","last_synced_at":"2025-03-27T07:16:03.667Z","etag":null,"topics":["apollo","express","express-graphql","graphql","nodejs","react","styled-components"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","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/toreylittlefield.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}},"created_at":"2021-06-11T11:15:16.000Z","updated_at":"2023-03-07T08:25:43.000Z","dependencies_parsed_at":"2023-02-08T03:45:30.495Z","dependency_job_id":null,"html_url":"https://github.com/toreylittlefield/quadrant-basic-test-challenge","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/toreylittlefield/quadrant-basic-test-challenge","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/toreylittlefield%2Fquadrant-basic-test-challenge","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/toreylittlefield%2Fquadrant-basic-test-challenge/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/toreylittlefield%2Fquadrant-basic-test-challenge/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/toreylittlefield%2Fquadrant-basic-test-challenge/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/toreylittlefield","download_url":"https://codeload.github.com/toreylittlefield/quadrant-basic-test-challenge/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/toreylittlefield%2Fquadrant-basic-test-challenge/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":31801333,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-04-14T11:13:53.975Z","status":"ssl_error","status_checked_at":"2026-04-14T11:13:53.299Z","response_time":153,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.5: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":["apollo","express","express-graphql","graphql","nodejs","react","styled-components"],"created_at":"2025-02-01T12:14:29.847Z","updated_at":"2026-04-14T14:32:30.456Z","avatar_url":"https://github.com/toreylittlefield.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003cp align=\"center\"\u003e\n  \u003ca href=\"https://github.com/toreylittlefield/quadrant-basic-test-challenge/blob/main/project-files/Proto-Instructions.png\" rel=\"noopener\"\u003e\n \u003cimg height=200px src=\"https://raw.githubusercontent.com/toreylittlefield/quadrant-basic-test-challenge/main/project-files/Proto-Instructions.png\" alt=\"Project logo\"\u003e\u003c/a\u003e\n\u003c/p\u003e\n\n\u003ch3 align=\"center\"\u003eQuadrant Basic Test\u003c/h3\u003e\n\n\u003cdiv align=\"center\"\u003e\n\n[![Status](https://img.shields.io/badge/status-active-success.svg)]()\n[![GitHub Issues](https://img.shields.io/github/issues/toreylittlefield/quadrant-basic-test-challenge.svg)](https://github.com/toreylittlefield/quadrant-basic-test-challenge/issues)\n[![GitHub Pull Requests](https://img.shields.io/github/issues-pr/toreylittlefield/quadrant-basic-test-challenge.svg)](https://github.com/toreylittlefield/quadrant-basic-test-challenge/pulls)\n[![Netlify Status](https://api.netlify.com/api/v1/badges/75d4747b-85ce-4fa7-8ba5-769a47fac224/deploy-status)](https://app.netlify.com/sites/quadrant-basic-test/deploys)\n\n\u003c/div\u003e\n\n---\n\n\u003cp align=\"center\"\u003e A practical challenge creating a basic form component for a eCommerce CRM using React with Node.js and GraphQL\n    \u003cbr\u003e\n\u003c/p\u003e\n\n## 📝 Table of Contents\n\n- [View Live Site](#live-site)\n- [Quick Start](#quick-start)\n- [About](#about)\n- [System Architecture](#architecture)\n- [File Structure](#file-structure)\n- [Getting Started](#getting_started)\n- [Testing](#tests)\n- [Deployment](#deployment)\n- [Usage](#usage)\n- [Built Using](#built_using)\n- [Authors](#authors)\n- [Acknowledgments](#acknowledgement)\n  \u003c!-- - [TODO](../TODO.md) --\u003e\n  \u003c!-- - [Contributing](../CONTRIBUTING.md) --\u003e\n\n## ▶️ View Live Site \u003ca name = \"live-site\"\u003e\u003c/a\u003e\n\nSee the live project @ [https://quadrant-basic-test.netlify.app/](https://quadrant-basic-test.netlify.app/) hosted on Netlify\n\n[![Netlify Status](https://api.netlify.com/api/v1/badges/75d4747b-85ce-4fa7-8ba5-769a47fac224/deploy-status)](https://app.netlify.com/sites/quadrant-basic-test/deploys)\n\n## 💨 Quick Start \u003ca name = \"quick-start\"\u003e\u003c/a\u003e\n\n_Requires npm and node_\n\n###### Run:\n\n```\ngit clone https://github.com/toreylittlefield/quadrant-basic-test-challenge.git\n```\n\n```\ncd quadrant-basic-test-challenge\n```\n\n```\ncd client\nnpm install\nnpm start\n```\n\n```\ncd server\nnpm install\nnpm start\n```\n\n## 🧐 About \u003ca name = \"about\"\u003e\u003c/a\u003e\n\nThis repo consists of a React Single Page Application that demonstrates a single client facing component for adding, editing, and deleting existing fashion items \u0026 listings in a larger eCommerce CRM. The backend is built with Node.js and runs an Express GraphQL server which queries \u0026 mutations item \u0026 listing data for the CRM.\n\n## 🏗 System Architecture \u003ca name = \"architecture\"\u003e\u003c/a\u003e\n\n\u003cp align=\"left\"\u003e\n  \u003ca href=\"https://github.com/toreylittlefield/quadrant-basic-test-challenge/tree/main/project-files\" rel=\"noopener\"\u003e\n \u003cimg height=550 src=\"https://raw.githubusercontent.com/toreylittlefield/quadrant-basic-test-challenge/main/project-files/Quadrant%20React%20Basic-Test.png\" alt=\"Project Draw.io System Architecture\"\u003e\u003c/a\u003e\n\u003c/p\u003e\n\n## 📁 File Structure \u003ca name = \"file-structure\"\u003e\u003c/a\u003e\n\n#### Frontend\n\n```\n├ client/\n├── src/\n| ├── components/\n| | ├── Buttons/...\n| | ├── ImageLoader/...\n| | ├── Inputs/...\n| | ├── Navs/...\n| | └── index.js // \u003c- All Styled Components\n| |\n| ├── utils/\n| |  └── ... \u003c- All Utilities\n| |\n| ├── ui/\n| | ├── globalstyles.js \u003c- For Global themeing\n| | └── ...\n| |\n| ├── screens/\n| |  └── MainPage.js \u003c- Only Page View\n| |\n| ├── Apollo/ \u003c-- Apollo GraphQL Services\n| | ├── queries.js\n| | └── mutations.js\n| |\n| ├── assets/ \u003c-- Icons/Images\n| | ├── images/...\n| | └── icons/...\n| |\n| └── __tests__/ \u003c- Our Client Tests\n|  ├── ...test.js\n|  └── App.test.js\n|\n├── App.js \u003c- React App \u0026 Apollo Client Instance\n└── public/\n  └── index.html\n```\n\n## 🏁 Getting Started \u003ca name = \"getting_started\"\u003e\u003c/a\u003e\n\nThese instructions will get you a copy of the project up and running on your local machine for development and testing purposes. See [deployment](#deployment) for notes on how to deploy the project on a live system.\n\n### Prerequisites\n\nSystem Requirements\n\n- npm v6.14.5+\n- Node.js v12.18+\n\nTo check Node \u0026 npm versions run:\n\n```\nnpm -v\nnode -v\n```\n\nFor installation \u0026 downloading Node.js \u0026 npm see:\n[Setup Node \u0026 npm](https://docs.npmjs.com/downloading-and-installing-node-js-and-npm)\n\n### Installing\n\nLocal Development Installation Instructions Are As Follows\n\n- Clone the repo:\n\n```\ngit clone https://github.com/toreylittlefield/quadrant-basic-test-challenge.git\n```\n\n- Open the directory\n\n```\ncd quadrant-basic-test-challenge\n```\n\n##### Client (Frontend)\n\nTo run the React App client on port 3000\n\n- Open the terminal at the root project directory \u0026 run\n\n```\ncd client\nnpm install\nnpm start\n```\n\nThen open the developer React server @ http://localhost:3000/\n\n##### Express GraphQL Server (Backend)\n\nTo run the Express GraphQL Server on port 4000\n\n- Open the terminal at the root project directory \u0026 run\n\n```\ncd server\nnpm install\nnpm start\n```\n\nOptional: run the Express GraphQL server playground @ http://localhost:4000/graphql\n\n## 🔧 Running the tests \u003ca name = \"tests\"\u003e\u003c/a\u003e\n\nExplain how to run the automated tests for this system.\n\n### Break down into end to end tests\n\nExplain what these tests test and why\n\n```\nGive an example\n```\n\n### And coding style tests\n\nExplain what these tests test and why\n\n```\nGive an example\n```\n\n## 🎈 Usage \u003ca name=\"usage\"\u003e\u003c/a\u003e\n\nAdd notes about how to use the system.\n\n## 🚀 Deployment \u003ca name = \"deployment\"\u003e\u003c/a\u003e\n\nAdd additional notes about how to deploy this on a live system.\n\n## ⛏️ Built Using \u003ca name = \"built_using\"\u003e\u003c/a\u003e\n\n##### Frontend\n\n- [Styled Components](https://styled-components.com/) - CSS-in-JS Styling Library\n- [Material UI](https://material-ui.com/) - React Component Library\n- [React](https://reactjs.org/) - UI JS Library -\u003e _Created with [create-react-app](https://github.com/facebookincubator/create-react-app)_\n- [Apollo Client](https://www.apollographql.com/docs/react) - State | Store Management For GraphQL\n- **Optional** --- [Redux-Toolkit](https://redux-toolkit.js.org/) - State | Store Management\n\n##### Backend\n\n- [NodeJs](https://nodejs.org/en/) - Server Environment\n- [Express](https://expressjs.com/) - Server Framework\n- [Express GraphQL](https://github.com/graphql/express-graphql) - GraphQL Express Server Middleware\n- [Apollo Server](https://www.apollographql.com/docs/apollo-server/) - GraphQL Server\n- **Optional** --- [MongoDB / PostgresSQL](https://www.mongodb.com/) - Database / Store\n\n## ✍️ Authors \u003ca name = \"authors\"\u003e\u003c/a\u003e\n\n- [@toreylittlefield](https://github.com/toreylittlefield) - The one who completed this project\n\n- [@kukielp](https://github.com/kukielp) - Mentor \u0026 reviewer for this project (thanks!)\n\n\u003c!-- See also the list of [contributors](https://github.com/toreylittlefield/quadrant-basic-test-challenge/contributors) who participated in this project. --\u003e\n\n## 🎉 Acknowledgements \u003ca name = \"acknowledgement\"\u003e\u003c/a\u003e\n\n- Special thanks to Paul K. for providing his time, knowledge, mentorship, and for pushing me to build out this challenge.\n\u003c!-- - Hat tip to anyone whose code was used\n- Inspiration\n- References --\u003e\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftoreylittlefield%2Fquadrant-basic-test-challenge","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ftoreylittlefield%2Fquadrant-basic-test-challenge","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftoreylittlefield%2Fquadrant-basic-test-challenge/lists"}