{"id":15785980,"url":"https://github.com/dl0312/web-genie","last_synced_at":"2026-01-08T15:45:09.653Z","repository":{"id":36852312,"uuid":"175027297","full_name":"dl0312/Web-Genie","owner":"dl0312","description":"🧞 Web Genie recommend website that upgrade your productivity on web programming","archived":false,"fork":false,"pushed_at":"2023-01-04T03:44:39.000Z","size":791,"stargazers_count":0,"open_issues_count":24,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2024-10-11T21:05:13.299Z","etag":null,"topics":["css","html","javascript","react","testing","web"],"latest_commit_sha":null,"homepage":null,"language":"HTML","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/dl0312.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}},"created_at":"2019-03-11T15:17:02.000Z","updated_at":"2019-07-23T06:08:23.000Z","dependencies_parsed_at":"2023-01-17T06:00:54.358Z","dependency_job_id":null,"html_url":"https://github.com/dl0312/Web-Genie","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dl0312%2FWeb-Genie","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dl0312%2FWeb-Genie/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dl0312%2FWeb-Genie/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dl0312%2FWeb-Genie/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/dl0312","download_url":"https://codeload.github.com/dl0312/Web-Genie/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":246508259,"owners_count":20788962,"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":["css","html","javascript","react","testing","web"],"created_at":"2024-10-04T21:00:27.891Z","updated_at":"2026-01-08T15:45:09.624Z","avatar_url":"https://github.com/dl0312.png","language":"HTML","funding_links":[],"categories":[],"sub_categories":[],"readme":"# 🧞 Web-Genie\r\n\r\n\u003cp align=\"center\"\u003e\r\n  \u003cimg src=\"https://emojipedia-us.s3.dualstack.us-west-1.amazonaws.com/thumbs/120/facebook/158/genie_1f9de.png\" width=\"200px\"/\u003e\r\n\u003c/p\u003e\r\n\r\n## What is this repo?\r\n\r\n\u003e 🧞 Web Genie recommend website that upgrade your productivity on web programming\r\n\r\n# Genie's choice\r\n\r\n## Design Concept\r\n### Websites\r\n- 📜[Awwwards](https://www.awwwards.com/)\r\n### Videos\r\n- 🎥[5 Website Design Hints. Web Design Tutorial For Beginners](https://www.youtube.com/watch?v=j2G1IUpRiPY)\r\n\r\n## 🌀 React\r\n- [React](https://github.com/facebook/react) - A declarative, efficient, and flexible JavaScript library for building user interfaces.\r\n- [Redux](https://github.com/reduxjs/redux) - Predictable state container for JavaScript apps\r\n  - 📜[Redux 를 통한 React 어플리케이션 상태 관리](https://velopert.com/3365)\r\n- [MobX](https://github.com/mobxjs/mobx) - Simple, scalable state management\r\n  - 📜[Redux 또는 MobX 를 통한 상태 관리](https://velog.io/@velopert/series/redux-or-mobx)\r\n\r\n## Flutter\r\n- [Flutter](https://flutter.dev/?gclid=Cj0KCQjwu-HoBRD5ARIsAPIPendByfbni7_iftsocz7bEaZERbAb75Hm28w5ScbW_cyxpXc_gflW5RgaAgHlEALw_wcB)\r\n\r\n## 💗 Icon\r\n- [Emojipedia](https://emojipedia.org/) - 😃 Home of Emoji Meanings 💁👌🎍😍\r\n- [Font Awesome](https://fontawesome.com/) - the web's most popular icon set and toolkit\r\n- [CSS ICON](https://cssicon.space/#/)\r\n- [Ionicons](https://ionicons.com/)\r\n- [FLATICON](https://www.flaticon.com)\r\n\r\n## 🖼️ Image Resource\r\n- [GIPHY](https://giphy.com/) - Search All the GIFs \u0026 Make Your Own Animated GIF\r\n- [Imgur](https://imgur.com/)\r\n\r\n## 🧱 Pre-built UI Component\r\n- [Ant Design](https://ant.design/) - A design system with values of Nature and Determinacy for better user experience of enterprise application\r\n- [Bootstrap](https://getbootstrap.com/) - Build responsive, mobile-first projects on the web with the world’s most popular front-end component library.\r\n- [Tippy.js](https://github.com/atomiks/tippyjs) - Highly customizable tooltip and popover library\r\n  - [Tippy.js for React](https://github.com/atomiks/tippy.js-react) - The complete tooltip and popover solution for React apps\r\n- [downshift-js](https://github.com/downshift-js/downshift) - 🏎 Primitive to build simple, flexible, WAI-ARIA compliant enhanced input React components\r\n\r\n## 🎨 Color\r\n- [Coolors.co](https://coolors.co)\r\n- [HTML Color Names](https://www.w3schools.com/colors/colors_names.asp)\r\n- [BrandColors](https://brandcolors.net/) - The biggest collection of official brand color codes around.\r\n- [Flat UI colors](https://flatuicolors.com/) - concepted color palettes\r\n- [Color.review](https://color.review/) - Colors that look and work great for everyone\r\n- Gradient\r\n  - [uiGradients](https://uigradients.com/)\r\n  - [cssgradient.io](https://cssgradient.io/)\r\n\r\n## 👨‍🎨 CSS\r\n- 📦 Box Shadow\r\n  - [16 Box Shadows to Save Your Time](http://cssdeck.com/labs/16-box-shadows-to-save-your-time/)\r\n- Grid Layout\r\n  - [CSS Grid Layout Guidebook](https://uid.gitbook.io/css-grid)\r\n\r\n## 🗚 Font\r\n- [Google Fonts](https://fonts.google.com)\r\n\r\n## ✂ Image Edit Utility\r\n- [Photopea](https://www.photopea.com/) - Photoshop online\r\n- [remove.bg](https://www.remove.bg/) - Remove Background from photo automatically\r\n\r\n## 🎭 Logo Maker\r\n- [hatchful](https://hatchful.shopify.com/)\r\n\r\n## 📊 Data Visualization\r\n- [d3.js](https://d3js.org/)\r\n- [react-vis](https://d3js.org/)\r\n- [Recharts](http://recharts.org/en-US/)\r\n- [billboard.js](https://naver.github.io/billboard.js/) - Re-usable, easy interface JavaScript chart library, based on D3 v4+.\r\n\r\n## 🎬 Animation\r\n- [GSAP](https://greensock.com/gsap) - the standard for JavaScript HTML5 animation\r\n- [lax.js](https://github.com/alexfoxy/laxxx) - Simple \u0026 light weight scroll animation library\r\n- [scenejs](https://github.com/daybrush/scenejs) - 🎬 Scene.js is JavaScript \u0026 CSS timeline-based animation library\r\n\r\n## 🚗 Deploy\r\n- [ZEIT](https://zeit.co/) - The Global Serverless Platform\r\n- [Netlify](https://www.netlify.com/) - One workflow. From local development to global deployment.\r\n- [heroku](https://www.heroku.com/) - Developers, teams, and businesses of all sizes use Heroku to deploy, manage, and scale apps.\r\n\r\n## 👷‍♂️ CMS(Contents Management System)\r\n- [GraphCMS](https://graphcms.com/)\r\n- [Xpress Engine](https://www.xpressengine.com/)\r\n\r\n## 🔧 Database Tool\r\n- [Prisma](https://www.prisma.io/) - Prisma replaces traditional ORMs and simplifies database workflows\r\n\r\n## 👨‍🏫 Online Lecture\r\n- [inflearn](https://www.inflearn.com/)\r\n- [Frontend Masters](https://frontendmasters.com/)\r\n- [생활코딩](https://www.opentutorials.org/)\r\n\r\n## 👨‍🔬Testing\r\n- [JEST](https://github.com/facebook/jest) - 🃏 Delightful JavaScript Testing\r\n- [react-testing-library](https://github.com/testing-library/react-testing-library) - 🐐 Simple and complete React DOM testing utilities that encourage good testing practices.\r\n  - 📜[벨로퍼트와 함께하는 리액트 테스팅](https://velog.io/@velopert/series/react-testing)\r\n\r\n\r\n## 👀 Contains\r\n| Library                | Version    |\r\n| ---------------------- | ---------- |\r\n| react (with **Hooks**) | **^16.8**  |\r\n| react-dom              | **^16.8**  |\r\n| react-redux            | **^7.1**   |\r\n| react-router           | **^5.0**   |\r\n| react-scripts          | **^3.0**   |\r\n| redux                  | **^4.0**   |\r\n| redux-actions          | **^2.6.5** |\r\n| styled-components      | **^4.3**   |\r\n| typescript             | **^3.5**   |\r\n\r\n## Installation\r\n\r\n```\r\n$ yarn\r\n```\r\n\r\n## Running\r\n\r\n```\r\n$ yarn start\r\n```\r\n\r\n## Build\r\n\r\n```\r\n$ yarn build\r\n```\r\n\r\n# License\r\n\r\nMIT\r\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdl0312%2Fweb-genie","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdl0312%2Fweb-genie","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdl0312%2Fweb-genie/lists"}