{"id":15857363,"url":"https://github.com/mcabreradev/pxr-poc","last_synced_at":"2025-10-11T05:32:38.909Z","repository":{"id":192872988,"uuid":"687634804","full_name":"mcabreradev/pxr-poc","owner":"mcabreradev","description":null,"archived":false,"fork":false,"pushed_at":"2024-03-27T22:40:37.000Z","size":11872,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"dev","last_synced_at":"2025-02-07T12:46:53.177Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"https://pxr-poc.vercel.app","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/mcabreradev.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-09-05T17:21:57.000Z","updated_at":"2023-09-05T17:41:25.000Z","dependencies_parsed_at":null,"dependency_job_id":"5f14cf00-7edf-438b-a1cc-4492b8eb8bd3","html_url":"https://github.com/mcabreradev/pxr-poc","commit_stats":{"total_commits":471,"total_committers":2,"mean_commits":235.5,"dds":0.04670912951167727,"last_synced_commit":"c1891d12a1f8ed1495fa630f38489599aa03e890"},"previous_names":["mcabreradev/pxr-poc"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mcabreradev%2Fpxr-poc","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mcabreradev%2Fpxr-poc/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mcabreradev%2Fpxr-poc/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mcabreradev%2Fpxr-poc/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/mcabreradev","download_url":"https://codeload.github.com/mcabreradev/pxr-poc/tar.gz/refs/heads/dev","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":246701289,"owners_count":20820033,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","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":[],"created_at":"2024-10-05T20:22:36.545Z","updated_at":"2025-10-11T05:32:33.877Z","avatar_url":"https://github.com/mcabreradev.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003cdiv align=\"center\"\u003e\n  \u003cimg src=\"https://acontraluz.paxer.com/media/paxer/img/logo_completo/with-bg/logo_paxer_bg_white-320.png\" /\u003e\n\u003c/div\u003e\n\n[![Code Check](https://github.com/Prinhotels/paxer-ecomm/actions/workflows/lint.yml/badge.svg?branch=dev)](https://github.com/Prinhotels/paxer-ecomm/actions/workflows/lint.yml)\n\n## Tech Stack\n\n- ⚡️ Next.js 14\n- ⚛️ React 18\n- ✨ TypeScript\n- 💨 Tailwind CSS 3\n- 💅 Styled Components\n- 🃏 Jest — Configured for unit testing\n- 📏 ESLint — Find and fix problems in your code, also will **auto sort** your imports\n- 💖 Prettier — Format your code consistently\n- 🐶 Husky \u0026 Lint Staged — Run scripts on your staged files before they are committed\n- 🤖 Conventional Commit Lint — Make sure you \u0026 your teammates follow conventional commit\n- 🔥 Snippets — A collection of useful snippets\n- 🗺 Site Map — Automatically generate sitemap.xml\n- 📦 Bun - An all-in-one toolkit for JavaScript and TypeScript apps\n- 🈸 Internationalization (i18n)\n- 🐻 Zustand - A state management library for React\n- 🔌 React Query - Server state management\n- 📄 React Hook Form - Performant, flexible and extensible forms with easy-to-use validation\n- 💎 Storybook - A frontend workshop for building UI components and pages in isolation\n- 🙂 SVG Icons by [Iconify](https://iconify.design/)\n- 🛃 Github Actions\n- 📅 Calendar [react-datepicker](https://reactdatepicker.com)\n\nTODO:\n\n- Playwright / e2e - Enables reliable end-to-end testing\n\n---\n\n\u003c!-- START doctoc generated TOC please keep comment here to allow auto update --\u003e\n\u003c!-- DON'T EDIT THIS SECTION, INSTEAD RE-RUN doctoc TO UPDATE --\u003e\n\n## Table of Contents\n\n- [Prerequisites](#prerequisites)\n- [Getting Started](#getting-started)\n  - [1. Clone the repository:](#1-clone-the-repository)\n  - [2. Install dependencies](#2-install-dependencies)\n  - [3. Run the development server](#3-run-the-development-server)\n  - [4. Run the build script](#4-run-the-build-script)\n  - [5. Run the production server](#5-run-the-production-server)\n  - [6. Commit Message Convention](#6-commit-message-convention)\n- [React Functional Components](#react-functional-components)\n- [Styled Components](#styled-components)\n- [Tailwind CSS](#tailwind-css)\n- [Tailwind CSS with Styled Components](#tailwind-css-with-styled-components)\n- [i18n](#i18n)\n- [Storybook](#storybook)\n- [Testing](#testing)\n- [React Query](#react-query)\n  - [How to use React Query?](#how-to-use-react-query)\n- [React Hook Form](#react-hook-form)\n  - [How to use React Hook Form?](#how-to-use-react-hook-form)\n- [Zustand](#zustand)\n  - [What is Zustand?](#what-is-zustand)\n  - [How to use Zustand?](#how-to-use-zustand)\n\n\u003c!-- END doctoc generated TOC please keep comment here to allow auto update --\u003e\n\n## Prerequisites\n\nPaxer Ecommerce requires that you have installed the following in order to run locally:\n\n- Use node v18\n  - If you're using `nvm`, it's as easy as running `nvm install`. Our `.nvmrc` already specifies the correct version\n  - To make sure nvm loads the correct version every new terminal, follow [this guide](https://github.com/nvm-sh/nvm#nvmrc)\n  - If you're using node some other way, make sure you're using the correct version, follow [this guide](https://nodejs.org/en/download/)\n- Use [`pnpm`](https://pnpm.io/)\n\n  - There is no problems using NPM, but we encourage you to use `pnpm` in this project, follow [this guide](https://pnpm.io/installation)\n\n- Copy the `.env.example` file, rename it to `.env` and set the corresponding values for each variable.\n\n## Getting Started\n\n### 1. Clone the repository:\n\n```bash\ngit clone git@github.com:Prinhotels/Paxer-ecomm.git\n```\n\n### 2. Install dependencies\n\nIt is encouraged to use **pnpm** so the husky hooks can work properly.\n\n```bash\npnpm install\n```\n\n### 3. Run the development server\n\nYou can start the server using this command:\n\n```bash\npnpm run dev\n```\n\nOpen [http://localhost:3000](http://localhost:3000) with your browser to see the result.\n\n### 4. Run the build script\n\nFirst, build the app using this command:\n\n```bash\npnpm run build\n```\n\n### 5. Run the production server\n\nYou can start the server using this command:\n\n```bash\npnpm run start\n```\n\n### 6. Commit Message Convention\n\nThis starter is using [conventional commits](https://www.conventionalcommits.org/en/v1.0.0/), it is mandatory to use it to commit changes.\n\n- build: changes that affect the build system or external dependencies (example scopes: gulp, broccoli, npm)\n- ci: changes to our CI configuration files and scripts (example scopes: Travis, Circle, BrowserStack, SauceLabs)\n- docs: documentation only changes\n- feat: a new feature\n- fix: a bug fix\n- perf: a code change that improves performance\n- refactor: a code change that neither fixes a bug nor adds a feature\n- style: changes that do not affect the meaning of the code (white-space, formatting, missing semi-colons, etc)\n- test: adding missing tests or correcting existing tests\n- chore: updating npm tasks etc; no production code change\n- revert: revert to a commit\n- wip: work in progress\n\nLet's say you're working on ticket PXR-1017. A valid commit message will be:\n\n```\nfeat(customer): PXR-1017 add customer reservation\n```\n\nmore info follow [Angular Convention](https://github.com/angular/angular/blob/22b96b9/CONTRIBUTING.md#-commit-message-guidelines).\n\n---\n\n## React Functional Components\n\nAs standard project Paxer-Ecomm will use react functional components for each component created.\n\n```javascript\nfunction Hotel() {\n  const text = 'Hello Customer';\n\n  return (\n    \u003cdiv className='App'\u003e\n      \u003ch1\u003e {text} \u003c/h1\u003e\n    \u003c/div\u003e\n  );\n}\n```\n\n## Styled Components\n\nPaxer-Ecomm follows the styled components standards:\n\n```typescript\nimport styled from 'styled-components';\n\nconst Title = styled.h1`\n  font-size: 20px;\n  text-align: center;\n  color: #bf4f74;\n`;\n\nfunction Hotel() {\n  const text = 'Hello Customer';\n\n  return (\n    \u003cdiv className='App'\u003e\n      \u003cTitle\u003e {text} \u003c/Title\u003e\n    \u003c/div\u003e\n  );\n}\n```\n\nMore information about typing [Styled Components](https://styled-components.com/docs/basics#getting-startedt)\n\n## Tailwind CSS\n\nTailwinds CSS is a utility-first CSS framework for rapidly building custom user interfaces.\n\n```typescript\nfunction Hotel() {\n  const text = 'Hello Customer';\n\n  return (\n    \u003cdiv className='App'\u003e\n      \u003ch1 className='text-center text-xl text-pink-700'\u003e{text}\u003c/h1\u003e\n    \u003c/div\u003e\n  );\n}\n```\n\n## Tailwind CSS with Styled Components\n\nWe can create Tailwind CSS + React components like styled components with classes name on multiple lines. Here is an example:\n\n```typescript\nimport tw from 'tailwind-styled-components';\n\nconst Title = tw.h1`\n  text-center\n  text-xl\n  text-pink-700\n`;\n\nfunction Hotel() {\n  const text = 'Hello Customer';\n\n  return (\n    \u003cdiv className='App'\u003e\n      \u003cTitle\u003e {text} \u003c/Title\u003e\n    \u003c/div\u003e\n  );\n}\n```\n\nFor more information follow [this guide](https://www.npmjs.com/package/tailwind-styled-components)\n\n# i18n\n\nThis project use [i18next](https://react.i18next.com/) to enable internationalization, but primary use here will be enable quick change and maintainability of wording of the app.\n\nUsage examples\n\n```typescript\nfunction MyComponent() {\n  const { t } = useTranslation();\n\n  return \u003cp\u003e{t('my translated text')}\u003c/p\u003e;\n}\n```\n\n# Storybook\n\nStorybook is a tool for UI development. It makes development faster and easier by isolating components.\n\nstorybook file example:\n\n```typescript\nimport type { Meta, StoryObj } from '@storybook/react';\n\nimport Footer from './';\n\nconst meta: Meta\u003ctypeof Footer\u003e = {\n  title: 'Components/Footer',\n  component: Footer,\n  tags: ['autodocs'],\n  argTypes: {},\n};\n\nexport default meta;\ntype Story = StoryObj\u003ctypeof Footer\u003e;\n\nexport const Default: Story = {\n  args: {\n    className: 'bg-gray-100',\n  },\n};\n```\n\nTo run the storybook use the following command:\n\n```bash\npnpm run stoybook\n```\n\nOpen [http://localhost:6006](http://localhost:6006) with your browser to see the result.\n\n# Testing\n\nTesting is a very important part of the development process. We use Jest as our test runner and React Testing Library to test our components.\n\nJest test example:\n\n```typescript\nimport { render, screen } from '@testing-library/react';\nimport App from './App';\n\ntest('renders learn react link', () =\u003e {\n  render(\u003cApp /\u003e);\n  const linkElement = screen.getByText(/learn react/i);\n  expect(linkElement).toBeInTheDocument();\n});\n```\n\nTo run the tests use the following command:\n\n```bash\npnpm run test\n```\n\n# React Query\n\n## How to use React Query?\n\n```typescript\nimport { useQuery } from '@tanstack/react-query';\nimport axios from 'axios';\n\nconst fetchProperty = async (hotid: string) =\u003e {\n  const { data } = await axios.get('/api/property?hotid=' + hotid);\n  return data;\n};\n\nexport default function useQueryProperty(hotid: string) {\n  return useQuery({\n    queryKey: ['queryProperty', hotid],\n    queryFn: () =\u003e fetchProperty(hotid),\n  });\n}\n```\n\nUsage example:\n\n```typescript\nimport { useQueryProperty } from 'hooks';\n\nfunction Hotel() {\n  const { data, isLoading, error } = useQueryProperty('123456');\n\n  if (isLoading) {\n    return \u003cdiv\u003eLoading...\u003c/div\u003e;\n  }\n\n  if (error) {\n    return \u003cdiv\u003eError: {error}\u003c/div\u003e;\n  }\n\n  return (\n    \u003cdiv className='App'\u003e\n      \u003ch1\u003e {data.name} \u003c/h1\u003e\n    \u003c/div\u003e\n  );\n}\n```\n\nFor more information follow [this guide](https://react-query.tanstack.com/overview)\n\n# React Hook Form\n\n## How to use React Hook Form?\n\n```typescript\nimport { useForm, SubmitHandler } from 'react-hook-form';\n\nenum GenderEnum {\n  female = 'female',\n  male = 'male',\n  other = 'other',\n}\n\ninterface IFormInput {\n  firstName: String;\n  gender: GenderEnum;\n}\n\nexport default function App() {\n  const { register, handleSubmit } = useForm\u003cIFormInput\u003e();\n  const onSubmit: SubmitHandler\u003cIFormInput\u003e = (data) =\u003e console.log(data);\n\n  return (\n    \u003cform onSubmit={handleSubmit(onSubmit)}\u003e\n      \u003clabel\u003eFirst Name\u003c/label\u003e\n      \u003cinput {...register('firstName')} /\u003e\n      \u003clabel\u003eGender Selection\u003c/label\u003e\n      \u003cselect {...register('gender')}\u003e\n        \u003coption value='female'\u003efemale\u003c/option\u003e\n        \u003coption value='male'\u003emale\u003c/option\u003e\n        \u003coption value='other'\u003eother\u003c/option\u003e\n      \u003c/select\u003e\n      \u003cinput type='submit' /\u003e\n    \u003c/form\u003e\n  );\n}\n```\n\n# Zustand\n\n## What is Zustand?\n\nZustand is a small, fast and scalable bearbones state-management solution. It has a familiar API (based on hooks) and comes with a great set of tools and features that will make your life easier and your code cleaner.\n\n## How to use Zustand?\n\n```typescript\nimport create from 'zustand';\n\ntype StateType = {\n  count: number;\n  inc: () =\u003e void;\n  dec: () =\u003e void;\n};\n\nexport const useStore = create\u003cStateType\u003e((set) =\u003e ({\n  count: 0,\n  inc: () =\u003e set((state) =\u003e ({ count: state.count + 1 })),\n  dec: () =\u003e set((state) =\u003e ({ count: state.count - 1 })),\n}));\n```\n\nUsage example:\n\n```typescript\nimport { useStore } from './store';\n\nfunction Counter() {\n  const { count, inc, dec } = useStore();\n\n  return (\n    \u003cdiv\u003e\n      \u003ch1\u003e{count}\u003c/h1\u003e\n      \u003cbutton onClick={inc}\u003e+\u003c/button\u003e\n      \u003cbutton onClick={dec}\u003e-\u003c/button\u003e\n    \u003c/div\u003e\n  );\n}\n```\n\nFor more information follow [this guide](https://zustand.surge.sh/)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmcabreradev%2Fpxr-poc","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmcabreradev%2Fpxr-poc","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmcabreradev%2Fpxr-poc/lists"}