{"id":22735386,"url":"https://github.com/aleydon/react-vite","last_synced_at":"2026-04-07T20:32:09.783Z","repository":{"id":264283421,"uuid":"892928751","full_name":"Aleydon/React-Vite","owner":"Aleydon","description":"React ViteJs template configured with typescript, eslint, prettier, husky (pre-commit), storybook, jest, testing-library and more... ","archived":false,"fork":false,"pushed_at":"2026-02-06T17:14:30.000Z","size":1887,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2026-02-07T01:19:24.718Z","etag":null,"topics":["eslint","eslint-config","eslint-config-prettier","eslint-plugin-prettier","javascript","js","prettier","react","react-hooks","react-router","react-router-dom","reactjs","storybook","ts","tsx","typescript","vite","vitejs"],"latest_commit_sha":null,"homepage":"","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/Aleydon.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":"2024-11-23T04:28:16.000Z","updated_at":"2026-02-06T17:59:34.000Z","dependencies_parsed_at":"2025-01-29T06:25:53.127Z","dependency_job_id":"31e42404-40af-4b8a-a9ce-4f0223695267","html_url":"https://github.com/Aleydon/React-Vite","commit_stats":null,"previous_names":["aleydon/react-vite"],"tags_count":0,"template":true,"template_full_name":null,"purl":"pkg:github/Aleydon/React-Vite","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Aleydon%2FReact-Vite","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Aleydon%2FReact-Vite/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Aleydon%2FReact-Vite/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Aleydon%2FReact-Vite/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Aleydon","download_url":"https://codeload.github.com/Aleydon/React-Vite/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Aleydon%2FReact-Vite/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":31528358,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-04-07T16:28:08.000Z","status":"ssl_error","status_checked_at":"2026-04-07T16:28:06.951Z","response_time":105,"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":["eslint","eslint-config","eslint-config-prettier","eslint-plugin-prettier","javascript","js","prettier","react","react-hooks","react-router","react-router-dom","reactjs","storybook","ts","tsx","typescript","vite","vitejs"],"created_at":"2024-12-10T21:09:27.409Z","updated_at":"2026-04-07T20:32:09.775Z","avatar_url":"https://github.com/Aleydon.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003ch2 align=\"center\"\u003e:earth_americas: Vite.js Template :earth_americas:\u003c/h2\u003e\n\n\u003cp align=\"center\"\u003e\n  \u003ca href=\"https://github.com/Aleydon/React-Vite/blob/main/LICENSE\" target=\"_blank\"\u003e\n    \u003cimg src=\"https://img.shields.io/badge/License-MIT-yellow.svg\" alt=\"License: MIT\"\u003e\n  \u003c/a\u003e\n  \u003cimg src=\"https://img.shields.io/badge/Status-Under%20Development-blue\" alt=\"Build Status\"\u003e\n  \u003cimg src=\"https://img.shields.io/badge/Dependencies-Up%20to%20date-brightgreen\" alt=\"Dependencies Status\"\u003e\n\u003c/p\u003e\n\n\u003cp align=\"center\"\u003e\n  \u003cbr\u003e\n  \u003cimg width=\"900\" src=\"./assets/React-Vite.png\" alt=\"logo of React-Vite repository\"\u003e\n  \u003cbr\u003e\n  \u003cbr\u003e\n\u003c/p\u003e\n\n\u003cp align=\"center\"\u003e\n  This repository provides a robust and opinionated React template powered by Vite.js, designed to kickstart your web development projects with a focus on modern tooling, testing, and code quality. It comes pre-configured with essential development tools to ensure a smooth and efficient workflow.\n\u003c/p\u003e\n\n## :bookmark_tabs: Table of Contents\n\n- [:pushpin: Requirements](#pushpin-requirements)\n- [:arrow_forward: Get Started](#arrow_forward-get-started)\n- [:gear: Features \u0026 Technologies](#gear-features--technologies)\n- [:hammer_and_wrench: Development \u0026 Usage](#hammer_and_wrench-development--usage)\n  - [Running Tests](#running-tests)\n  - [Storybook Documentation](#storybook-documentation)\n- [:handshake: Contributing](#handshake-contributing)\n- [:page_facing_up: License](#page_facing_up-license)\n\n---\n\n## :pushpin: Requirements\n\nTo get started with this template, you need to have Node.js installed on your system.\n\n- **Node.js**: [https://nodejs.org/en/](https://nodejs.org/en/)\n\n---\n\n## :arrow_forward: Get Started\n\nFollow these steps to set up and run the project locally:\n\n1.  **Clone this repository:**\n\n    ```sh\n    git clone https://github.com/Aleydon/React-Vite.git\n    ```\n\n2.  **Navigate into the project directory:**\n\n    ```sh\n    cd React-Vite\n    ```\n\n3.  **Install NPM packages:**\n\n    ```sh\n    npm install # or yarn install\n    ```\n\n4.  **Run the development server:**\n\n    ```sh\n    npm run dev # or yarn dev\n    ```\n\n    This will start the development server, and you can view the application in your browser, typically at `http://localhost:5173`.\n\n---\n\n## :gear: Features \u0026 Technologies\n\nThis template is configured with a comprehensive set of tools to enhance your development experience:\n\n- **Jest + Testing Library**: For robust automated testing of your React components.\n  - :link: [Jest](https://jestjs.io/)\n  - :link: [Testing Library](https://testing-library.com/)\n- **Storybook**: For isolated component development and documentation, making it easy to showcase and test UI components.\n  - :link: [Storybook](https://storybook.js.org/)\n- **ESLint + Prettier**: To maintain consistent code style and catch potential errors early.\n  - :link: [ESLint](https://eslint.org/)\n  - :link: [Prettier](https://prettier.io/)\n- **TypeScript**: For static typing, improving code quality, readability, and maintainability.\n  - :link: [TypeScript](https://www.typescriptlang.org/)\n- **Tailwind CSS**: A utility-first CSS framework for rapidly building custom designs.\n  - :link: [Tailwind CSS](https://tailwindcss.com/)\n- **Husky**: For Git hooks, automating tasks like linting commit messages, formatting code, and running tests before commits or pushes.\n  - :link: [Husky](https://typicode.github.io/husky/)\n\n---\n\n## :hammer_and_wrench: Development \u0026 Usage\n\n### Running Tests\n\nTo execute the automated tests configured with Jest and Testing Library:\n\n```sh\nnpm run test # or npm run test:watch\n```\n\nAn example test file (`src/App.spec.tsx`) is included to demonstrate basic testing practices:\n\n```ts\nimport { render, screen } from '@testing-library/react';\n\nimport App from './App';\n\ndescribe('App Component', () =\u003e {\n\tit('should get the text hello world', () =\u003e {\n\t\trender(\u003cApp /\u003e);\n\t\tconst hello = screen.getByText('Hello World');\n\t\texpect(hello).toBeDefined();\n\t});\n\n\tit('should get the text hello world in the component s heading', () =\u003e {\n\t\trender(\u003cApp /\u003e);\n\t\tconst heading = screen.getByRole('heading', {\n\t\t\tname: 'Hello World'\n\t\t});\n\t\texpect(heading).toBeInTheDocument();\n\t});\n\n\tit('must get the link from the App component', () =\u003e {\n\t\trender(\u003cApp /\u003e);\n\t\tconst link = screen.getByRole('link', { name: 'github.com/Aleydon' });\n\t\texpect(link).toBeDefined();\n\t\texpect(link).toHaveAttribute('target', '_blank');\n\t\texpect(link).toHaveAttribute('aria-label', 'github.com/Aleydon');\n\t});\n});\n```\n\n### Storybook Documentation\n\nTo run Storybook and explore the component documentation:\n\n```sh\nnpm run storybook # or yarn storybook\n```\n\n\u003cp align=\"center\"\u003e\n  \u003cbr\u003e\n  \u003cimg width=\"1100\" src=\"./assets/storybok_screen_shot.png\" alt=\"storybook running\"\u003e\n  \u003cbr\u003e\n  \u003cbr\u003e\n\u003c/p\u003e\n\nAn example Storybook story (`src/components/Text/text.stories.tsx`) is provided to illustrate how to document your components:\n\n```ts\nimport type { Meta, StoryObj } from '@storybook/react';\n\nimport Text, { type TextProps } from '.';\n\nconst text: Meta\u003ctypeof Text\u003e = {\n\tcomponent: Text,\n\ttitle: 'Components/Text'\n};\n\nexport default text;\n\nexport const Small: StoryObj\u003cTextProps\u003e = {\n\targs: {\n\t\tsize: 'small',\n\t\tchildren: 'Small Text'\n\t}\n};\n\nexport const Medium: StoryObj\u003cTextProps\u003e = {\n\targs: {\n\t\tsize: 'medium',\n\t\tchildren: 'Medium Text'\n\t}\n};\nexport const Large: StoryObj\u003cTextProps\u003e = {\n\targs: {\n\t\tsize: 'large',\n\t\tchildren: 'Large Text'\n\t}\n};\n```\n\n---\n\n## :handshake: Contributing\n\nContributions are welcome! If you have suggestions for improvements or new features, please feel free to open an issue or submit a pull request.\n\n---\n\n## :page_facing_up: License\n\nThis project is licensed under the MIT License - see the [LICENSE](https://github.com/Aleydon/React-Vite/blob/main/LICENSE) file for details.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Faleydon%2Freact-vite","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Faleydon%2Freact-vite","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Faleydon%2Freact-vite/lists"}