{"id":18455145,"url":"https://github.com/thomascode92/crwn-clothing","last_synced_at":"2026-04-09T12:52:16.385Z","repository":{"id":258498059,"uuid":"857352726","full_name":"ThomasCode92/crwn-clothing","owner":"ThomasCode92","description":"A stylish online retail solution designed for an intuitive and engaging user experience. 👔👗","archived":false,"fork":false,"pushed_at":"2025-04-18T12:05:10.000Z","size":304,"stargazers_count":0,"open_issues_count":4,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-04-19T01:27:22.640Z","etag":null,"topics":["docker","firebase-auth","firebase-emulator","firebase-firestore","reactjs","tailwindcss","typescript","vite"],"latest_commit_sha":null,"homepage":"https://crwn-clothing-s5jdmrf.netlify.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/ThomasCode92.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}},"created_at":"2024-09-14T12:33:58.000Z","updated_at":"2025-04-18T12:05:11.000Z","dependencies_parsed_at":"2024-10-25T16:46:17.612Z","dependency_job_id":"71533e8c-6a43-450b-ac76-070dee53b9c5","html_url":"https://github.com/ThomasCode92/crwn-clothing","commit_stats":null,"previous_names":["thomascode92/crwn-clothing"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ThomasCode92%2Fcrwn-clothing","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ThomasCode92%2Fcrwn-clothing/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ThomasCode92%2Fcrwn-clothing/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ThomasCode92%2Fcrwn-clothing/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/ThomasCode92","download_url":"https://codeload.github.com/ThomasCode92/crwn-clothing/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":250285650,"owners_count":21405296,"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":["docker","firebase-auth","firebase-emulator","firebase-firestore","reactjs","tailwindcss","typescript","vite"],"created_at":"2024-11-06T08:07:16.846Z","updated_at":"2025-12-30T23:05:05.006Z","avatar_url":"https://github.com/ThomasCode92.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# CRWN Clothing\n\n## 🗃️ Repository Archived\n\nThis project has been archived as part of a shift in focus and priorities. While it served as a useful sandbox for testing and experimentation, the following reasons led to the decision:\n\n- 🧰 **Focus on Modern Tools:** I'm now concentrating on more modern and full-featured frameworks like **Next.js** and **Nuxt.js**, which better align with my current goals and the evolving web ecosystem.\n- 🧠 **Growing Backend Interest:** My interests have moved more toward backend development — building robust **APIs**, working with **databases**, and exploring server-side technologies.\n- 🔬 **Experimentation Goals Met:** This repository helped me test out specific workflows and tools, including:\n  - 🐋 Running the **Firebase emulator in Docker**\n  - 🛎️ Creating **custom Netlify CI actions**\n\nSince these experiments are complete and my focus has shifted, this repo will remain archived for reference purposes.\n\n---\n\nA stylish online retail solution designed for an intuitive and engaging user experience. 👔👗\n\n**About this project**\u003cbr /\u003e\nWelcome to the '_CRWN Clothing_' repository, a project inspired by the capstone project from the [Complete React Developer](https://www.udemy.com/course/complete-react-developer-zero-to-mastery/) course by [Zero To Mastery](https://zerotomastery.io/).\n\nThis project serves as a detailed example, highlighting both core and advanced React.js development concepts. It covers Components, State Management, and Routing, as well as integration with _Firebase_ for data storage and authentication, and _Stripe_ for payment processing. The project is deployed using _Netlify_, including serverless functions.\n\nDive into the depth of [React.js](https://react.dev/) with this illustrative (Web Shop based) application.\n\n## Getting Started\n\nEnsure that all required [environment variables](./README.md#environment-variables) are configured correctly to prevent setup errors. To start the application, verify that Docker is installed. With Docker available, the entire development setup can be launched and stopped with the following commands:\n\n```bash\n  docker compose up -d    # start react app and firebase emulator\n  docker compose down -v  # stop all the services\n```\n\n### Running without Firebase Emulator\n\nTo run the application without the Firebase Emulator, ensure Node.js is installed locally. If Node.js is not already installed, refer to the [official installation](https://nodejs.org/en) guide. For those using [asdf](https://asdf-vm.com/), Node.js can also be installed via the `.tool-versions` file. Additional information is available in the [asdf configuration guide](https://asdf-vm.com/manage/configuration.html#tool-versions).\n\n**Local Development Setup**\u003cbr /\u003e\nOnce Node.js is installed and environment variables are configured, follow these steps to start the application. The app will connect to the specified Firebase cloud project if the correct environment variables are provided:\n\n```bash\nnpm install   # install dependencies\nnpm run dev   # start development server\n```\n\n### Environment variables\n\nFor this project to function properly, it's essential to set up a couple of API keys. The needed keys are for:\n\n- [Firebase](https://firebase.google.com/), authentication and storage\n- [Firebase Emulator](https://firebase.google.com/docs/emulator-suite), local development for Firebase\n\nFor that, create the following files in the `env` folder:\n\n\u003cdetails\u003e\n\u003csummary\u003eEnvironment Variables Files\u003c/summary\u003e\n\n**.env**\n\n```bash\n# Firebase Emulator Config\nVITE_FIREBASE_AUTH_EMULATOR_HOST=localhost:9099\nVITE_FIRESTORE_EMULATOR_HOST=localhost:8080\n\n# Firebase Local Config\nDATA_DIRECTORY=data\n```\n\n**.env.local**\n\n```bash\n# Firebase Project Config\nVITE_API_KEY=...\nVITE_AUTH_DOMAIN=...\nVITE_PROJECT_ID=...\nVITE_STORAGE_BUCKET=...\nVITE_MESSAGING_SENDER_ID=...\nVITE_APP_ID=...\n\n# Firebase Emulator Config\nFIREBASE_PROJECT=... # same as VITE_PROJECT_ID\n```\n\n\u003c/details\u003e\n\n### Debugging\n\nTo start the application in debug mode when encountering a bug, follow these steps. First, ensure the app is running either with `npm run start` or within a Docker container. Next, open the VS Code debugger, click the green play icon in the debug panel, and select the appropriate configuration: `crwn-clothing-local` or `crwn-clothing-docker`. This will launch a Chrome browser connected to the debugger, allowing for easy inspection and troubleshooting of the application.\n\n## Technology Stack\n\nThis project utilizes an advanced development stack featuring [Vite](https://vitejs.dev/) and [TypeScript](https://www.typescriptlang.org/) to enhance both performance and maintainability.\n\n- **Vite** - A modern, lightning-fast front-end build tool that offers fast development and optimized production builds.\n- **TypeScript** - A statically-typed superset of JavaScript, ensuring robust type checking and better code maintainability.\n\n### Tooling\n\nTo ensure high code quality and maintainability, this project integrates several essential tools:\n\n- **ESLint** - For enforcing code quality and consistent coding standards.\n- **Prettier** - For automated code formatting to maintain a clean and uniform codebase.\n- **Husky** – Manages Git hooks to automate tasks such as pre-commit checks.\n\n### Testing\n\nThis project incorporates a comprehensive testing setup to ensure reliability and prevent regressions.\n\n- **Vitest** - A Vite-native testing framework that offers fast test execution and seamless integration with the existing development setup. Vitest ensures that unit tests run efficiently and remain easy to maintain.\n- **React Testing Library** - A lightweight solution for testing React components by focusing on component behavior rather than implementation details. It encourages better testing practices by interacting with components the way users would, enhancing test reliability.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fthomascode92%2Fcrwn-clothing","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fthomascode92%2Fcrwn-clothing","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fthomascode92%2Fcrwn-clothing/lists"}