{"id":24317897,"url":"https://github.com/tenal/boutiqueboarding","last_synced_at":"2026-04-10T11:01:38.876Z","repository":{"id":272813008,"uuid":"675063152","full_name":"Tenal/boutiqueboarding","owner":"Tenal","description":"Dog boarding web app built with React, TypeScript, Material UI, and a custom hooks-based architecture. 95% unit test coverage. Integrated CI/CD with GitHub Actions.","archived":false,"fork":false,"pushed_at":"2026-02-23T02:54:09.000Z","size":35761,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2026-02-23T08:50:26.390Z","etag":null,"topics":["cicd","custom-hooks","formspree","githubactions","jest","material-ui","netlify","node-sass","react","react-testing-library","recoil","typescript"],"latest_commit_sha":null,"homepage":"https://boutiqueboarding.ca/","language":"HTML","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/Tenal.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}},"created_at":"2023-08-05T16:41:55.000Z","updated_at":"2026-02-23T02:54:13.000Z","dependencies_parsed_at":null,"dependency_job_id":"272118b9-4544-4f36-ae42-2039e54667ee","html_url":"https://github.com/Tenal/boutiqueboarding","commit_stats":null,"previous_names":["tenal/boutiqueboarding"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/Tenal/boutiqueboarding","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Tenal%2Fboutiqueboarding","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Tenal%2Fboutiqueboarding/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Tenal%2Fboutiqueboarding/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Tenal%2Fboutiqueboarding/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Tenal","download_url":"https://codeload.github.com/Tenal/boutiqueboarding/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Tenal%2Fboutiqueboarding/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":31639524,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-04-10T07:40:12.752Z","status":"ssl_error","status_checked_at":"2026-04-10T07:40:11.664Z","response_time":98,"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":["cicd","custom-hooks","formspree","githubactions","jest","material-ui","netlify","node-sass","react","react-testing-library","recoil","typescript"],"created_at":"2025-01-17T14:27:55.357Z","updated_at":"2026-04-10T11:01:38.871Z","avatar_url":"https://github.com/Tenal.png","language":"HTML","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Boutique Boarding\n\nA web application for dog boarding services built with React, TypeScript, Material UI, and SCSS modules. State management uses Recoil and React Hooks, with Formspree for form submissions. Jest and React Testing Library handle unit testing, integrated with GitHub Actions for CI/CD.\n\n## Table of Contents\n- [Overview](#overview)\n- [Project Structure](#project-structure)\n- [Architecture](#architecture)\n  - [Application Structure](#application-structure)\n  - [Component Design](#component-design)\n  - [State Management](#state-management)\n  - [Data Flow](#data-flow)\n  - [Styling Strategy](#styling-strategy)\n  - [Testing Strategy](#testing-strategy)\n- [URLs \u0026 Ports](#urls-and-ports)\n- [Installation \u0026 Setup](#installation-and-setup)\n- [Scripts](#scripts)\n- [Dependencies](#dependencies)\n- [Testing \u0026 Coverage](#testing-and-coverage)\n- [License](#license)\n\n## Overview\nBoutique Boarding is a full-stack web application for dog boarding services. Parts of the application are still under development, but once the backend is complete it will offer features like booking management, customer reviews, and automated email notifications using React and TypeScript.\n\n## Project Structure\n```\n/boutiqueboarding\n  ├── frontend/           # React TypeScript client application\n  │  ├── public/          # Static assets and public resources\n  │  └── src/\n  │     ├── components/   # Shared UI components\n  │     ├── resources/    # Application assets (images, icons)\n  │     ├── utils/        # Helper functions and shared utilities\n  │     ├── views/        # Page-level components and routes\n  │     └── styling/\n  │        ├── css/       # Global SCSS styles and variables\n  │        └── mui/       # Material UI theme and variable customization\n  └── backend/            # API service application (in development)\n```\n\n## Architecture\n\n#### Application Structure\n- **Monorepo**: Managed using npm workspaces.\n- **Frontend**: React with TypeScript and Material UI.\n- **State Management**: Recoil for global state and React hooks for local state.\n- **Forms**: Managed using Formspree.\n- **Styling**: SCSS modules and Material UI customization.\n- **Testing**: Unit tests using Jest and React Testing Library.\n\n#### Component Design\n- **Custom Hooks Pattern**: Components focus on rendering while business logic is delegated to custom hooks.\n- **Component Organization**: Each feature is a self-contained module:\n\n```\nComponentName/\n├── ComponentName.tsx          # React component\n├── ComponentName.test.tsx     # Component tests\n├── useComponentName.ts        # Custom hook (if needed)\n└── useComponentName.test.ts   # Hook tests (if needed)\n```\n\n#### State Management\n- **Local State**: Managed using `useState` and `useReducer`.\n- **Global State**: Managed using Recoil atoms and selectors.\n- **Form State**: Managed with Formspree hooks for server-side submissions.\n\n#### Data Flow\n- **Props-Driven**: Components receive data via props.\n- **Custom Hooks**: Encapsulate business logic, data fetching, and transformations.\n- **Event Handlers**: Handle user interactions at the component level.\n- **Async Operations**: Managed within custom hooks using `useEffect` and async functions.\n\n#### Styling Strategy\n- **Theming**: Custom Material UI theme overrides.\n- **SCSS Modules**: For granular styles beyond MUI's capabilities.\n- **Global Variables**: Shared styles using SCSS variables and mixins.\n- **Responsive Design**: Managed using Material UI breakpoints.\n\n#### Testing Strategy\n- **Tools**: Jest and React Testing Library.\n- **Scope**: Focused on unit testing (E2E testing in development).\n- **Location**: Tests colocated with components for better context.\n- **Organization**: Follows the same feature-based structure as components.\n\n## URLs and Ports\n\n- **Development Environment**\n  - Frontend: http://localhost:3000\n  - API: TBD\n\n- **QA Environment**\n  - Frontend: https://boutiqueboarding-dev.netlify.app\n  - API: TBD\n\n- **Production Environment**\n  - Frontend: https://www.boutiqueboarding.com\n  - API: TBD\n\n## Installation \u0026 Setup\n_Please note that Formspree is currently used for form submissions. As such, you will need a Formspree Key to run this app._\n\n1. **Clone the repository:**\n   ```bash\n   git clone https://github.com/Tenal/boutiqueboarding.git\n   cd boutiqueboarding\n   ```\n2. **Install dependencies:**\n   ```bash\n   npm install\n   ```\n3. **Configure environmental variables (your env file should be in the /frontend directory):**\n   ```\n   REACT_APP_FORMSPREE_KEY=xxxxx\n   ```\n4. **Start the development server:**\n   ```bash\n   npm run start:frontend\n   /or/\n   npm run start\n   ```\n\n## Scripts\n- **Start Frontend:** `npm run start:frontend`\n- **Start Backend:** `npm run start:backend`\n- **Start Both:** `npm start`\n- **Run Tests:** `npm test`\n- **Build Project:** `npm run build`\n- **Calculate Test Coverage:** `npm run test:coverage`\n- **Run linting:** `npm run lint`\n\n## Dependencies\n- **Root Dependencies:** `concurrently`\n- **Frontend Dependencies:**\n  - React ecosystem: `react`, `react-dom`, `react-router-dom`, `recoil`\n  - MUI: `@mui/material`, `@mui/icons-material`\n  - Styling: `@emotion/react`, `@emotion/styled`, `node-sass`\n  - Forms: `@formspree/react`\n  - Testing: `jest`, `@testing-library/*`, `jest-fetch-mock`, `jest-environment-jsdom`\n  - TypeScript: `typescript`, `ts-jest`\n  - Linting: `eslint`, `eslint-config-airbnb`, `eslint-config-prettier`\n\n## Testing \u0026 Coverage\nRun the following commands to test the application:\n\n```bash\n# Run all tests\nnpm test\n\n# Run tests with coverage\ncd frontend \u0026\u0026 npm run test:coverage\n\n# Watch tests\ncd frontend \u0026\u0026 npm run test:watch\n```\n\n- **Coverage Report:** Test coverage is generated in `coverage/coverage-summary.json`.\n- **Coverage Threshold:** Set to 80% for statements, branches, functions, and lines. Current coverage averages over 95%.\n\n## License\nThis project is private and not intended for public use or distribution.\n\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftenal%2Fboutiqueboarding","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ftenal%2Fboutiqueboarding","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftenal%2Fboutiqueboarding/lists"}