{"id":30151843,"url":"https://github.com/reactplay/react-kolkata","last_synced_at":"2025-09-12T23:45:01.737Z","repository":{"id":306819134,"uuid":"1026783166","full_name":"reactplay/react-kolkata","owner":"reactplay","description":"Official website of React Kolkata ","archived":false,"fork":false,"pushed_at":"2025-08-03T13:45:02.000Z","size":181,"stargazers_count":0,"open_issues_count":0,"forks_count":1,"subscribers_count":0,"default_branch":"main","last_synced_at":"2025-08-06T01:37:27.466Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/reactplay.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":"CODE_OF_CONDUCT.md","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":"2025-07-26T15:51:13.000Z","updated_at":"2025-08-03T13:45:03.000Z","dependencies_parsed_at":"2025-07-28T16:26:58.741Z","dependency_job_id":null,"html_url":"https://github.com/reactplay/react-kolkata","commit_stats":null,"previous_names":["reactplay/reactkolkata","reactplay/react-kolkata"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/reactplay/react-kolkata","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/reactplay%2Freact-kolkata","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/reactplay%2Freact-kolkata/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/reactplay%2Freact-kolkata/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/reactplay%2Freact-kolkata/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/reactplay","download_url":"https://codeload.github.com/reactplay/react-kolkata/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/reactplay%2Freact-kolkata/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":269873158,"owners_count":24488993,"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","status":"online","status_checked_at":"2025-08-11T02:00:10.019Z","response_time":75,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"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":[],"created_at":"2025-08-11T11:07:22.881Z","updated_at":"2025-08-11T11:09:52.446Z","avatar_url":"https://github.com/reactplay.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# 🚀 React Kolkata\n\nThe comprehensive toolkit for developing Next.js projects.\n\nWith NextJsLaunchpad, you get\n\n- a robust foundation equipped with essential tools,\n- configurations, and best practices to streamline your development workflow.\n\nSay goodbye to setup headaches and hello to consistent code quality. Elevate your Next.js projects with NextJsLaunchpad.\n\n## ✨ Features\n\n- **Next.js**: Utilize the power of Next.js for server-rendered React applications.\n- **TypeScript**: Enhance your development experience with TypeScript's static typing.\n- **Tailwind CSS**: Rapidly build custom designs with Tailwind CSS's utility-first approach.\n- **ESLint**: Enforce code quality standards and catch errors early with ESLint.\n- **Prettier**: Keep your codebase clean and consistent with automatic code formatting using Prettier.\n- **Prettier Plugin Tailwindcss**: Automatic sorting of tailwind classnames using the official prettier plugin.\n- **Prettier Plugin Sort Imports**: Organize import declarations alphabetically within groups, which can help improve readability when working on larger projects.\n- **Husky**: Ensure code quality and prevent bad commits with pre-commit hooks powered by Husky.\n- **Docker Support**: Complete Docker configuration.\n\n  ```bash\n  -  Start the application using this Docker command:\n\n  docker-compose up\n\n  The command will:\n  1. Build the application container\n  2. Install all dependencies\n  3. Start the development server\n  4. Make the application available on localhost\n  ```\n\n- **Internationalization (i18n)**: Built-in support for multiple languages using next-intl, making it easy to create multilingual applications with locale-specific routing and translations.\n\n## Getting Started\n\n\u003e Usage\n\n```bash\nnpx create-next-app -e https://github.com/reactplay/react-kolkata.git\n```\n\n## Internationalization (i18n)\n\nNextJsLaunchpad comes with built-in internationalization support using next-intl. This integration provides:\n\n- Route-based locale handling with `/[locale]/` directory structure\n- Easy-to-use translation hooks with `useTranslations` in server and client components.\n\nTranslation files are located in:\n\n```bash\ncontent/\n  ├── en.json\n  ├── fr.json\n  └── [other-locales].json\n```\n\n#### How to add a new language support:\n\nTo add a new language, we have to add the language JSON file to the content directory, which is in the root directory, that is our first step.\n\nAfter that, we have to add the newly added language to the locales array in the navigation.ts file. Below is the content of the navigation.ts file, where we need to add the newly added language to the locales array:\n\n```bash\nimport {defineRouting} from 'next-intl/routing';\nimport {createNavigation} from 'next-intl/navigation';\n\nexport const routing = defineRouting({\n  // A list of all locales that are supported\n  locales: ['en', 'fr', 'newLanguage'], // Add the new language code here\n\n  // Used when no locale matches\n  defaultLocale: 'en'\n});\n\nexport const {Link, redirect, usePathname, useRouter, getPathname} =\n  createNavigation(routing);\n```\n\n#### Using Strings from Language Files\n\nTo use strings from a language file in both **client and server** components, use the `useTranslations` hook.\n\n#### Steps:\n\n1. **Import `useTranslations`:**\n\n   ```javascript\n   import { useTranslations } from \"next-intl\";\n   ```\n\n2. **Initialize useTranslations with a section:**\n   ```javascript\n   const t = useTranslations(\"Home\");\n   ```\n3. **Fetch and use translations:**\n\n   ```javascript\n   \u003ch1\u003e{t(\"welcomeMessage\")}\u003c/h1\u003e\n   ```\n\n## Playwright E2E Testing\n\nNextJsLaunchpad includes Playwright for robust end-to-end testing. This integration provides:\n\n- **Headless and UI Testing**: Run tests in both headless mode for automation and UI mode for debugging.\n- **Cross-Browser Compatibility**: Test on Chromium, Firefox, and WebKit.\n- **API and Component Testing**: Supports API calls and frontend component interactions.\n\n### Running Playwright Tests\n\nTo execute Playwright tests, use:\n\n```shell\nnpm run playwright\n```\n\n### Playwright Configuration\n\nTest settings are defined in:\n\n```plaintext\n/playwright.config.ts\n```\n\n### Test Files\n\nPlaywright tests are located in:\n\n```plaintext\n/__tests__/e2e/\n```\n\n## Vitest Unit \u0026 Integration Testing\n\nNextJsLaunchpad includes Vitest for fast and efficient unit and integration testing. This setup provides:\n\n- **Lightning-Fast Execution**: Runs tests in parallel for speed.\n- **JSDOM Environment**: Simulates a browser-like environment for React components.\n- **TypeScript Support**: Fully compatible with TypeScript for better type safety.\n- **Mocking \u0026 Snapshot Testing**: Supports mocking API calls and UI snapshots.\n\n### Running Vitest Tests\n\nTo execute Vitest tests, use:\n\n```shell\nnpm run vitest\n```\n\n### Vitest Configuration\n\nTest settings are defined in:\n\n```plaintext\n/vitest.config.mts\n```\n\n\u003c!-- Project should be public for the above command to work --\u003e\n\n## Folder Structure\n\n```bash\n.\n├── __tests__\n├── lib\n├── public\n└── src\n    ├── app\n    └── components\n        ├── footer\n        └── ui\n    ├── config\n    ├── constants\n    ├── context\n    ├── data\n    ├── db\n    ├── hooks\n    ├── modules\n    ├── queries\n    ├── services\n    ├── store\n    └── utils\n├── styles\n├── types\n```\n\n**\\_\\_tests\\_\\_**: This folder contains all 'tests'.\n\n**lib**: This folder may contain utility functions that can be converted later into packages that are used across multiple applications.\n\n**public**: Self explanatory.\n\n**src/components**: This directory contains your UI components. It's further subdivided into ui for generic UI components and shared for components that might be reused across different parts of your application.\n\n\u003e [Conventions for src/components](#convention)\n\n**src/constants**: As the name suggests this folder contains constants.\n\n**src/context**: The context folder in React JS is a folder that stores all of the context files for the application. Context is a way to pass data through the component tree without having to pass props down manually at every level. This can be useful for data that needs to be accessed by many components, such as the current user or the current state of the application.\n\n**src/data**: The data folder in React JS is used to store data assets such as JSON files that contain information used in the application. It is similar to the assets folder, but it is specifically for storing data.\n\n**src/db**: The db folder in React JS is typically used to store database-related files, such as database configuration files, migration scripts, and seed files.\n\n**src/hooks**: This directory may house custom hooks that are used throughout your application.\n\n\u003e [Conventions for src/hooks](#convention2)\n\n**src/modules**: Modules which is also synonymous with 'sections/features' are logical groupings of code that make up the larger pages.\n\n**src/queries**: This directory may contain GraphQL queries.\n\n**src/services**: This folder helps separate the concerns of your application by isolating data fetching and manipulation logic from the components that render the UI.\n\n**src/store**: The store folder in React JS is used to store global state data that is used throughout the application. This data can be anything from the current user's login status to the contents of a shopping cart. The store folder is typically created in the root directory of the project and contains a number of files, including the store itself, actions, and reducers.\n\n**src/utils**: This directory may contain utility functions that do not make sense to convert into packages later.\n\n**styles**: As the name suggests, this directory contains the css pages that is responsible for styling.\n\n**types**: This folder contains TypeScript type definitions.\n\n## Conventions\n\nThroughout the project, unless otherwise mentioned, we will be using the following convention:\n\n- folders and files are named in lowercase with words separated by hyphen (kebab-case). For example, `my-folder` or `my-file`.\n- Functions -\u003e `camelCase` E.g. _filterProductsByType_ , _formatCurrency_\n- Variables -\u003e `camelCase` E.g. _products_, _productsFiltered_\n- Global constants -\u003e all caps `UPPERCASE`. For example: `MAX_VALUE`, `MIN_VALUE`\n- Object constants -\u003e Singular, capitalized with const assertion and optionally satisfies type (if there is one).\n\n```js\nconst ORDER_STATUS = {\n    pending: 'pending',\n    fulfilled: 'fulfilled',\n    error: 'error',\n  } as const satisfies OrderStatus;\n```\n\n- component names -\u003e `PascalCase` E.g. _export function Footer() {}_\n- types should have `.d.ts` extension. E.g. _root.d.ts_\n- use arrow functions wherever possible.\n- ui folder can contain granular level components like _button_, _dialog_, _input_ etc which can be used to build other components.\n- use given folders for various kinds of files. E.g. _types should reside in types folder_\n\nNOTE: Check granular level conventions below for overiding rules (if any). If there are cases where industry standards over-ride the rules mentioned above, please feel free to use them. For example convention for naming hooks.\n\n\u003e \u003ca id=\"convention\"\u003eConventions for src/components\u003c/a\u003e\n\n- ui components will go inside the ui folder\n- each component will be a folder of its own. Sub-components, if any will reside in the same folder. Each such folder will have index.ts file which will export all components. E.g. `export { Footer as default } from './footer';`\n- separate folder for routes. E.g. about-us route will have a folder by the same name inside component folder which will have other components inside it.\n\nExample: take a look at the `footer` component.\n\n\u003e \u003ca id=\"convention2\"\u003eConventions for src/hooks\u003c/a\u003e\n\n- `camelCase` beginning with the word _use_ e.g. useFetchData: A generic fetching hook for making HTTP requests to a specified endpoint.\n\n## 🤝 Contributing\n\nContributions are always welcome!\n\nSee [CONTRIBUTING.md](https://github.com/CreoWis/next-js-launchpad/blob/main/CONTRIBUTING.md) for ways to get started.\n\nPlease adhere to this project's [code of conduct](https://github.com/CreoWis/next-js-launchpad/blob/main/CODE_OF_CONDUCT.md).\n\n## Acknowledgements\n\n- [Next.JS](https://nextjs.org/)\n- [TailwindCSS](https://tailwindcss.com/)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Freactplay%2Freact-kolkata","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Freactplay%2Freact-kolkata","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Freactplay%2Freact-kolkata/lists"}