https://github.com/dl0312/web-genie

🧞 Web Genie recommend website that upgrade your productivity on web programming
https://github.com/dl0312/web-genie

css html javascript react testing web

Last synced: 15 days ago
JSON representation

🧞 Web Genie recommend website that upgrade your productivity on web programming

• Host: GitHub
• URL: https://github.com/dl0312/web-genie
• Owner: dl0312
• Created: 2019-03-11T15:17:02.000Z (almost 6 years ago)
• Default Branch: master
• Last Pushed: 2023-01-04T03:44:39.000Z (about 2 years ago)
• Last Synced: 2024-10-11T21:05:13.299Z (4 months ago)
• Topics: css, html, javascript, react, testing, web
• Language: HTML
• Size: 772 KB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 24
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# 🧞 Web-Genie



  



## What is this repo?

> 🧞 Web Genie recommend website that upgrade your productivity on web programming

# Genie's choice

## Design Concept

### Websites

- 📜[Awwwards](https://www.awwwards.com/)

### Videos

- 🎥[5 Website Design Hints. Web Design Tutorial For Beginners](https://www.youtube.com/watch?v=j2G1IUpRiPY)

## 🌀 React

- [React](https://github.com/facebook/react) - A declarative, efficient, and flexible JavaScript library for building user interfaces.

- [Redux](https://github.com/reduxjs/redux) - Predictable state container for JavaScript apps

  - 📜[Redux 를 통한 React 어플리케이션 상태 관리](https://velopert.com/3365)

- [MobX](https://github.com/mobxjs/mobx) - Simple, scalable state management

  - 📜[Redux 또는 MobX 를 통한 상태 관리](https://velog.io/@velopert/series/redux-or-mobx)

## Flutter

- [Flutter](https://flutter.dev/?gclid=Cj0KCQjwu-HoBRD5ARIsAPIPendByfbni7_iftsocz7bEaZERbAb75Hm28w5ScbW_cyxpXc_gflW5RgaAgHlEALw_wcB)

## 💗 Icon

- [Emojipedia](https://emojipedia.org/) - 😃 Home of Emoji Meanings 💁👌🎍😍

- [Font Awesome](https://fontawesome.com/) - the web's most popular icon set and toolkit

- [CSS ICON](https://cssicon.space/#/)

- [Ionicons](https://ionicons.com/)

- [FLATICON](https://www.flaticon.com)

## 🖼️ Image Resource

- [GIPHY](https://giphy.com/) - Search All the GIFs & Make Your Own Animated GIF

- [Imgur](https://imgur.com/)

## 🧱 Pre-built UI Component

- [Ant Design](https://ant.design/) - A design system with values of Nature and Determinacy for better user experience of enterprise application

- [Bootstrap](https://getbootstrap.com/) - Build responsive, mobile-first projects on the web with the world’s most popular front-end component library.

- [Tippy.js](https://github.com/atomiks/tippyjs) - Highly customizable tooltip and popover library

  - [Tippy.js for React](https://github.com/atomiks/tippy.js-react) - The complete tooltip and popover solution for React apps

- [downshift-js](https://github.com/downshift-js/downshift) - 🏎 Primitive to build simple, flexible, WAI-ARIA compliant enhanced input React components

## 🎨 Color

- [Coolors.co](https://coolors.co)

- [HTML Color Names](https://www.w3schools.com/colors/colors_names.asp)

- [BrandColors](https://brandcolors.net/) - The biggest collection of official brand color codes around.

- [Flat UI colors](https://flatuicolors.com/) - concepted color palettes

- [Color.review](https://color.review/) - Colors that look and work great for everyone

- Gradient

  - [uiGradients](https://uigradients.com/)

  - [cssgradient.io](https://cssgradient.io/)

## 👨‍🎨 CSS

- 📦 Box Shadow

  - [16 Box Shadows to Save Your Time](http://cssdeck.com/labs/16-box-shadows-to-save-your-time/)

- Grid Layout

  - [CSS Grid Layout Guidebook](https://uid.gitbook.io/css-grid)

## 🗚 Font

- [Google Fonts](https://fonts.google.com)

## ✂ Image Edit Utility

- [Photopea](https://www.photopea.com/) - Photoshop online

- [remove.bg](https://www.remove.bg/) - Remove Background from photo automatically

## 🎭 Logo Maker

- [hatchful](https://hatchful.shopify.com/)

## 📊 Data Visualization

- [d3.js](https://d3js.org/)

- [react-vis](https://d3js.org/)

- [Recharts](http://recharts.org/en-US/)

- [billboard.js](https://naver.github.io/billboard.js/) - Re-usable, easy interface JavaScript chart library, based on D3 v4+.

## 🎬 Animation

- [GSAP](https://greensock.com/gsap) - the standard for JavaScript HTML5 animation

- [lax.js](https://github.com/alexfoxy/laxxx) - Simple & light weight scroll animation library

- [scenejs](https://github.com/daybrush/scenejs) - 🎬 Scene.js is JavaScript & CSS timeline-based animation library

## 🚗 Deploy

- [ZEIT](https://zeit.co/) - The Global Serverless Platform

- [Netlify](https://www.netlify.com/) - One workflow. From local development to global deployment.

- [heroku](https://www.heroku.com/) - Developers, teams, and businesses of all sizes use Heroku to deploy, manage, and scale apps.

## 👷‍♂️ CMS(Contents Management System)

- [GraphCMS](https://graphcms.com/)

- [Xpress Engine](https://www.xpressengine.com/)

## 🔧 Database Tool

- [Prisma](https://www.prisma.io/) - Prisma replaces traditional ORMs and simplifies database workflows

## 👨‍🏫 Online Lecture

- [inflearn](https://www.inflearn.com/)

- [Frontend Masters](https://frontendmasters.com/)

- [생활코딩](https://www.opentutorials.org/)

## 👨‍🔬Testing

- [JEST](https://github.com/facebook/jest) - 🃏 Delightful JavaScript Testing

- [react-testing-library](https://github.com/testing-library/react-testing-library) - 🐐 Simple and complete React DOM testing utilities that encourage good testing practices.

  - 📜[벨로퍼트와 함께하는 리액트 테스팅](https://velog.io/@velopert/series/react-testing)

## 👀 Contains

| Library                | Version    |

| ---------------------- | ---------- |

| react (with **Hooks**) | **^16.8**  |

| react-dom              | **^16.8**  |

| react-redux            | **^7.1**   |

| react-router           | **^5.0**   |

| react-scripts          | **^3.0**   |

| redux                  | **^4.0**   |

| redux-actions          | **^2.6.5** |

| styled-components      | **^4.3**   |

| typescript             | **^3.5**   |

## Installation

```

$ yarn

```

## Running

```

$ yarn start

```

## Build

```

$ yarn build

```

# License

MIT