{"id":17948723,"url":"https://github.com/sshmaxime/web-playground","last_synced_at":"2025-04-03T15:26:59.469Z","repository":{"id":258715574,"uuid":"861864563","full_name":"sshmaxime/web-playground","owner":"sshmaxime","description":"A playground for my Typescript, React, Wagmi \u0026 Next.js projects.","archived":false,"fork":false,"pushed_at":"2024-10-30T18:18:05.000Z","size":5990,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-02-09T04:17:18.672Z","etag":null,"topics":["next","react","typescript","web"],"latest_commit_sha":null,"homepage":"https://web-playground-omniscient.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/sshmaxime.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-09-23T16:30:51.000Z","updated_at":"2024-10-30T18:18:08.000Z","dependencies_parsed_at":"2024-12-16T17:56:10.203Z","dependency_job_id":null,"html_url":"https://github.com/sshmaxime/web-playground","commit_stats":null,"previous_names":["sshmaxime/web-playground"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sshmaxime%2Fweb-playground","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sshmaxime%2Fweb-playground/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sshmaxime%2Fweb-playground/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sshmaxime%2Fweb-playground/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/sshmaxime","download_url":"https://codeload.github.com/sshmaxime/web-playground/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247026396,"owners_count":20871366,"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":["next","react","typescript","web"],"created_at":"2024-10-29T09:09:22.753Z","updated_at":"2025-04-03T15:26:59.440Z","avatar_url":"https://github.com/sshmaxime.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# @Web-Playground\n\n![React] ![TypeScript] ![Next.js] ![Vercel] ![Three.js] ![ReactQuery]\n\nThis monorepo is a playground for all of my `React`, `Next.js`, `Typescript` \u0026 `Solidity` projects.\n\nI’ve spent considerable time developing apps and dApps, both for personal side projects and companies I've worked with. Along the way, I realized the need for a simple, fully-configured, and customizable monorepo that would allow me to quickly iterate on new projects.\n\n---\n\n## Architecture\n\nThis monorepo is organized into four main workspaces: `apps`, `contracts`, `packages`, \u0026 `configs`. Each workspace serves a distinct purpose, making the overall structure intuitive and easy to navigate.\n\n- The `apps` workspace contains a collection of projects built with `React`, `Next.js`, \u0026 `TypeScript`, ranging from blockchain explorers to static websites.\n\n- The `contracts` workspace includes a set of smart-contracts built and developed with `Solidity` \u0026 `Foundry`.\n\n- The `packages` workspace houses reusable libraries, providing essential UI components, cryptographic utilities, and TypeScript helpers.\n\n- The `configs` workspace offers base configurations for TypeScript projects, ensuring consistent setups and best practices across all applications.\n\nThis architecture is designed to promote modularity, reuse, and ease of development, enabling efficient project iteration and scalability.\n\n---\n\n## Apps\n\nWithin the `apps` workspace, you'll find a curated collection of apps I've developed over the years in `React`, `Next.js` \u0026 `Typescript`. While not exhaustive, this list covers a variety of topics, including `blockchain`, `3D`, `ai` projects, and basic `static` applications, to name just a few.\n\n### [Dusk-Explorer](https://web-playground-dusk-explorer.vercel.app/) ![React] ![TypeScript] ![Next.js]\n\n![ReactQuery]\n\n\u003e Blockchain Explorer for the `Dusk` ecosystem.\n\n\u003ch1\u003e\u003c/h1\u003e\n\n### [Omniscient](https://web-playground-omniscient.vercel.app/) ![React] ![TypeScript] ![Next.js]\n\n![Wagmi] ![Viem] ![ReactQuery]\n\n\u003e Statistics Explorer for the `Omni` ecosystem.\n\n\u003ch1\u003e\u003c/h1\u003e\n\n### [Deblock-Swap](https://web-playground-deblock-swap.vercel.app/) ![React] ![TypeScript] ![Next.js]\n\n![Wagmi] ![Viem] ![ReactQuery]\n\n\u003e Simple Swap component for `Deblock-Hq`.\n\n\u003ch1\u003e\u003c/h1\u003e\n\n### [Sshmaxime](https://web-playground-sshmaxime.vercel.app/) ![React] ![TypeScript] ![Next.js]\n\n\u003e A website talking a little bit about me.\n\n\u003ch1\u003e\u003c/h1\u003e\n\n### [Boilerplate](https://web-playground-boilerplate.vercel.app/) ![React] ![TypeScript] ![Next.js]\n\n\u003e A basic boilerplate to quickly bootstrap a new app.\n\n---\n\n## Contracts\n\nThe `contracts` workspace is dedicated to housing a variety of `smart contracts` that have been developed using `Solidity` and `deployed`/`tested` with `Foundry`. This workspace serves as a central directory for managing and organizing `solidity` code, providing a foundation for decentralized applications and blockchain-based solutions. It streamlines development and ensures all contract-related files are accessible for efficient `testing`, `deployment`, `maintenance` \u0026 `usability` for the `apps` workspace.\n\n### @web-playground/contracts-premier\n\n![Solidity]\n\n...\n\n\u003ch1\u003e\u003c/h1\u003e\n\n\n---\n\n## Packages\n\nThe `packages` workspace contains a set of reusable `libraries` that provide core functionality across all apps within the monorepo. These packages include `@web-playground/ui` for building consistent user interfaces,` @web-playground/crypto` for handling cryptographic operations, and `@web-playground/utils`, which offers a collection of utility functions and types for efficient TypeScript development.\n\n### @web-playground/ui\n\n![React] ![TypeScript] ![Next.js]\n\n![Shadcn]\n\nThis package is primarily built on top of the `shadcn` framework, with several additional utilities that I have incorporated based on their frequent use in various projects. It is intended to function as a `foundational ui` package for the `app` workspace, offering essential `components` and tools to streamline the development process. By integrating these commonly used utilities, the package ensures `consistency` and `efficiency`, providing a reliable `base` for building user interfaces across different applications within the monorepo.\n\n\u003ch1\u003e\u003c/h1\u003e\n\n### @web-playground/crypto\n\n![TypeScript]\n\nThis package contains a collection of essential `functions` and `type` utilities specifically designed for use in `cryptographic` software development. These utilities play a critical role in simplifying various `cryptographic` operations and ensuring the secure implementation of `algorithms` and data `transformation`. By providing reusable components, this package enhances the `efficiency` and reliability of `crypto-related` projects, allowing developers to focus on building secure applications without having to recreate `foundational` tools from scratch.\n\n\u003ch1\u003e\u003c/h1\u003e\n\n### @web-playground/utils\n\n![TypeScript]\n\nThis package contains a variety of utility `functions` and `types` that are useful for anything related to `TypeScript` development. It offers a little bit of everything, making it a versatile resource for handling different tasks and challenges commonly encountered when working with TypeScript. Whether looking for helpful functions or reusable types, this package serves as a handy `toolkit` to simplify and streamline the development process.\n\n---\n\n## Configs\n\nThe `packages` workspace contains a set of reusable `configs` that provide core functionality across all apps within the monorepo.\n\n### Typescript\n\n![Json]\n\nThis package provides a comprehensive set of `base configurations` essential for developing a `TypeScript` application. It includes general `settings`, `tools` and `file configuration` to streamline the setup process, ensuring a solid and similar foundation to build upon. By offering pre-configured options tailored to common development needs, this package simplifies project initialization and promotes best practices, allowing focusing on the core functionality of an app.\n\n\u003c!-- Badges --\u003e\n[ReactQuery]: https://img.shields.io/badge/React%20Query-black?logo=reactquery\u0026logoColor=fff\n[React]: https://img.shields.io/badge/React-black.svg?logo=react\u0026logoColor=fff\n[TypeScript]: https://img.shields.io/badge/TypeScript-black?logo=typescript\u0026logoColor=fff\n[Next.js]: https://img.shields.io/badge/Next.js-black?logo=next.js\u0026logoColor=white\n[Vercel]: https://img.shields.io/badge/Vercel-black.svg?logo=vercel\u0026logoColor=white\n[Three.js]: https://img.shields.io/badge/Three.js-black?logo=threedotjs\u0026logoColor=white\n[Shadcn]: https://img.shields.io/badge/shadcn%2Fui-black?logo=shadcnui\u0026logoColor=white\n[Json]: https://img.shields.io/badge/JSON-black?logo=json\u0026logoColor=white\n[Viem]: https://custom-icon-badges.demolab.com/badge/Viem-black?logo=viem\u0026logoColor=white\n[Wagmi]: https://img.shields.io/badge/Wagmi-black?logo=wagmi\u0026logoColor=white\n[Solidity]: https://img.shields.io/badge/Solidity-black?logo=solidity\u0026logoColor=white","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsshmaxime%2Fweb-playground","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fsshmaxime%2Fweb-playground","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsshmaxime%2Fweb-playground/lists"}