🧞 Web-Genie

What is this repo?

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

Genie's choice

Design Concept

Websites

• 📜Awwwards

Videos

• 🎥5 Website Design Hints. Web Design Tutorial For Beginners

🌀 React

• React - A declarative, efficient, and flexible JavaScript library for building user interfaces.
• Redux - Predictable state container for JavaScript apps
  • 📜Redux 를 통한 React 어플리케이션 상태 관리
• MobX - Simple, scalable state management
  • 📜Redux 또는 MobX 를 통한 상태 관리

Flutter

• Flutter

💗 Icon

• Emojipedia - 😃 Home of Emoji Meanings 💁👌🎍😍
• Font Awesome - the web's most popular icon set and toolkit
• CSS ICON
• Ionicons
• FLATICON

🖼️ Image Resource

• GIPHY - Search All the GIFs & Make Your Own Animated GIF
• Imgur

🧱 Pre-built UI Component

• Ant Design - A design system with values of Nature and Determinacy for better user experience of enterprise application
• Bootstrap - Build responsive, mobile-first projects on the web with the world’s most popular front-end component library.
• Tippy.js - Highly customizable tooltip and popover library
  • Tippy.js for React - The complete tooltip and popover solution for React apps
• downshift-js - 🏎 Primitive to build simple, flexible, WAI-ARIA compliant enhanced input React components

🎨 Color

• Coolors.co
• HTML Color Names
• BrandColors - The biggest collection of official brand color codes around.
• Flat UI colors - concepted color palettes
• Color.review - Colors that look and work great for everyone
• Gradient
  • uiGradients
  • cssgradient.io

👨‍🎨 CSS

• 📦 Box Shadow
  • 16 Box Shadows to Save Your Time
• Grid Layout
  • CSS Grid Layout Guidebook

🗚 Font

• Google Fonts

✂ Image Edit Utility

• Photopea - Photoshop online
• remove.bg - Remove Background from photo automatically

🎭 Logo Maker

• hatchful

📊 Data Visualization

• d3.js
• react-vis
• Recharts
• billboard.js - Re-usable, easy interface JavaScript chart library, based on D3 v4+.

🎬 Animation

• GSAP - the standard for JavaScript HTML5 animation
• lax.js - Simple & light weight scroll animation library
• scenejs - 🎬 Scene.js is JavaScript & CSS timeline-based animation library

🚗 Deploy

• ZEIT - The Global Serverless Platform
• Netlify - One workflow. From local development to global deployment.
• heroku - Developers, teams, and businesses of all sizes use Heroku to deploy, manage, and scale apps.

👷‍♂️ CMS(Contents Management System)

• GraphCMS
• Xpress Engine

🔧 Database Tool

• Prisma - Prisma replaces traditional ORMs and simplifies database workflows

👨‍🏫 Online Lecture

• inflearn
• Frontend Masters
• 생활코딩

👨‍🔬Testing

• JEST - 🃏 Delightful JavaScript Testing
• react-testing-library - 🐐 Simple and complete React DOM testing utilities that encourage good testing practices.
  • 📜벨로퍼트와 함께하는 리액트 테스팅

👀 Contains

Installation

$ yarn

Running

$ yarn start

Build

$ yarn build

License

MIT