{"id":18235721,"url":"https://github.com/jsdeveloperr/astro-react-tailwind","last_synced_at":"2025-04-08T14:53:01.523Z","repository":{"id":261097145,"uuid":"883256053","full_name":"jsdeveloperr/astro-react-tailwind","owner":"jsdeveloperr","description":"This project is built with Astro and React, leveraging Tailwind CSS for styling and TypeScript for type safety.","archived":false,"fork":false,"pushed_at":"2024-11-04T16:52:13.000Z","size":258,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-02-14T11:28:07.402Z","etag":null,"topics":["astro","astro5","astrojs","react","reactjs","tailwind","tailwindcss","typescript"],"latest_commit_sha":null,"homepage":"","language":"Astro","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/jsdeveloperr.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":"2024-11-04T16:39:02.000Z","updated_at":"2024-11-04T16:53:37.000Z","dependencies_parsed_at":"2024-11-04T17:44:37.690Z","dependency_job_id":"aead8ba9-39bc-49e0-8867-69b659339bf5","html_url":"https://github.com/jsdeveloperr/astro-react-tailwind","commit_stats":null,"previous_names":["jsdeveloperr/astro-react-tailwind"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jsdeveloperr%2Fastro-react-tailwind","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jsdeveloperr%2Fastro-react-tailwind/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jsdeveloperr%2Fastro-react-tailwind/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jsdeveloperr%2Fastro-react-tailwind/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/jsdeveloperr","download_url":"https://codeload.github.com/jsdeveloperr/astro-react-tailwind/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247866128,"owners_count":21009239,"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":["astro","astro5","astrojs","react","reactjs","tailwind","tailwindcss","typescript"],"created_at":"2024-11-05T00:09:18.131Z","updated_at":"2025-04-08T14:53:01.497Z","avatar_url":"https://github.com/jsdeveloperr.png","language":"Astro","readme":"# Astro 5.0 + React + Tailwind\n\n\u003cp align=\"center\"\u003e\n    \u003cimg src=\"https://github.com/jsdeveloperr/astro-react-tailwind/blob/main/src/assets/astro-react-tailwind.jpg\" width=\"500\" alt=\"Astro 5.0 React Tailwind Project\" /\u003e\n\u003c/p\u003e\n\nThis project is built with **Astro** and **React**, leveraging **Tailwind CSS** for styling and TypeScript for type safety. The structure follows a modular approach with separate components, layouts, and pages to keep the code organized and maintainable.\n\n## 🚀 Project Structure\n\nInside of your Astro project, you'll see the following folders and files:\n\n```text\n/\n├── public/\n│   └── favicon.svg\n├── src/\n│   ├── components/\n│   │   └── Card.astro\n│   ├── layouts/\n│   │   └── Layout.astro\n│   └── pages/\n│       └── index.astro\n└── package.json\n```\n\nThe main folders are as follows:\n\n- **src**: Contains the core application code.\n  - **components**: Contains reusable UI components, such as `CartList`, `Footer`, `Header`, and `Product`.\n  - **layouts**: Contains layout components used to structure different pages.\n  - **pages**: Includes different routes/pages of the application, such as `cart.astro`, `index.astro`, and `product.astro`.\n  - **styles**: Global styles file (`global.css`) and any additional style-related configurations.\n- **public**: For static assets like images, fonts, etc.\n- **node_modules**: Holds project dependencies.\n- **tsconfig.json**: Configuration file for TypeScript.\n- **astro.config.mjs**: Configuration file for Astro.\n- **tailwind.config.cjs**: Tailwind CSS configuration file.\n\n## 🚀 Getting Started\n\nTo run this project locally, follow these steps:\n\n1. **Clone the repository**:\n   ```bash\n   git clone https://github.com/jsdeveloperr/astro-react-tailwind.git\n   cd astro-react-tailwind\n   ```\n\n2. **Install dependencies**:\n   This project uses **pnpm** for package management. If pnpm is not installed, install it globally:\n   ```bash\n   npm install -g pnpm\n   ```\n   Then, install the project dependencies:\n   ```bash\n   pnpm install\n   ```\n\n3. **Run the development server**:\n   ```bash\n   pnpm dev\n   ```\n   This command will start the Astro development server, and you can access the project at `http://localhost:4321`.\n\n4. **Build the project for production**:\n   ```bash\n   pnpm build\n   ```\n   The production build files will be created in the `dist` folder.\n\n5. **Preview the production build**:\n   ```bash\n   pnpm preview\n   ```\n\n\n## 🧞 Commands\n\nAll commands are run from the root of the project, from a terminal:\n\n| Command                   | Action                                           |\n| :------------------------ | :----------------------------------------------- |\n| `pnpm install`             | Installs dependencies                            |\n| `pnpm dev`             | Starts local dev server at `localhost:4321`      |\n| `pnpm build`           | Build your production site to `./dist/`          |\n| `pnpm preview`         | Preview your build locally, before deploying     |\n| `pnpm astro ...`       | Run CLI commands like `astro add`, `astro check` |\n| `pnpm astro -- --help` | Get help using the Astro CLI                     |\n\n\n## 🚀 Dependencies\n\nThe project uses the following major dependencies:\n\n- **Astro**: Static site generator that supports various JavaScript frameworks, including React.\n- **React**: JavaScript library for building user interfaces.\n- **Tailwind CSS**: Utility-first CSS framework for rapid UI development.\n  - **@astrojs/tailwind**: Astro integration for Tailwind CSS.\n  - **@tailwindcss/aspect-ratio, forms, typography**: Tailwind plugins for additional styling utilities.\n- **TypeScript**: Adds static typing to JavaScript, making the project more reliable and easier to debug.\n\n## 🚀 Scripts\n\n- **dev**: Runs the project in development mode using `astro dev`.\n- **start**: Alias for running the project in development mode.\n- **build**: Checks and builds the project using `astro check \u0026\u0026 astro build`.\n- **preview**: Runs `astro preview` to see a production build.\n- **astro**: Alias for running Astro commands.\n\n\n## 🧞 Notes\n\n- Ensure that **pnpm** is used consistently throughout the project to avoid issues with dependency management.\n- TypeScript is enabled for type safety, so make sure all `.tsx` and `.astro` files use types effectively.\n- Tailwind CSS is configured and used with plugins for aspect ratio, forms, and typography for improved styling capabilities.\n\n## License\n\nThis project is licensed under the MIT License.","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjsdeveloperr%2Fastro-react-tailwind","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fjsdeveloperr%2Fastro-react-tailwind","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjsdeveloperr%2Fastro-react-tailwind/lists"}