Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/ofarukcaki/web-resources

Collection of React resources for Full-Stack development
https://github.com/ofarukcaki/web-resources

Last synced: about 1 month ago
JSON representation

Collection of React resources for Full-Stack development

Awesome Lists containing this project

README 

        
# Web-Resources



### What is this repo for:

This repo is created for saving resources we found useful by to date. Mostly contains **React** and **Web development** resources.



# Resources: 


* [Animation](#animation) 


* [Authentication](#authentication) 


* [Awesome](#awesome) 


* [Blogs](#blogs) 


* [CSS](#css) 


* [Databases](#databases) 


* [Design](#design) 


* [Design Links](#design-links) 


* [Mobile](#mobile) 


* [Other](#other) 


* [React](#react) 


* [Security](#security)

* [Stacks](#stacks) 


* [Tailwindcss](#tailwind) 
 

* [Terminal](#terminal) 


* [Testing](#testing) 


* [Tools](#tools) 


* [Vectors Stock Photos, Icons, etc.](#vectors-stock-photos-icons-etc) 


* [Vue](#vue) 
    

* [Not a devtool but usefull apps](#utils) 



## Tools

[Mozilla Developer Tools](https://www.mozilla.org/tr/firefox/developer/)    

[Request Catcher - rest/webhook](http://requestcatcher.com)   

[Beeceptor - Rest API Mock Server](https://beeceptor.com)   

[Webhook Tester](https://webhook.site)    

[Insomnia - Rest Client](https://insomnia.rest/)    

[Node.js Process Manager](https://www.totaljs.com/)   

[svgator (paid)](https://www.svgator.com/)    

[Screly - Web mockup generator](https://www.screely.com/)



## Authentication

[Passport.js - Node.js Authentication](https://github.com/jaredhanson/passport)   

[Firebase - Google's Authentication Solution](https://firebase.google.com/docs/auth/)



## Design

[Web Gradients - Gradient Colors for Web](https://webgradients.com)   

[SweetAler2 - Colorful Alert Boxes](https://sweetalert2.github.io)   

[Background based on two dominant color](https://github.com/benhowdle89/grade)   

[Adaptive Backgrounds](https://briangonzalez.github.io/jquery.adaptive-backgrounds.js/)   

[Trianglify - algorithmically generated triangle art](http://qrohlf.com/trianglify/)    

[Dribbble - Professional themes, fonts, templates](https://dribbble.com/marketplace/themes)   

[Ant Design](https://ant.design/)   

[2 Color Combinations](https://2colors.colorion.co/?ref=producthunt)    

[Goodpalette - Make beautiful color palettes for UI.](https://goodpalette.io/)



## CSS

[Yoga - layouts for any platform](https://yogalayout.com)   

[ButterCake CSS](https://getbuttercake.com/)    

[Web Animation Tools](https://www.webdesignerdepot.com/2017/08/75-web-animation-tools-you-have-to-try/)   

[Awesome Buttons](https://bttn.surge.sh/)   

[Hover Buttons](https://varin6.github.io/Hover-Buttons/)  

[Loaders - Css](http://www.raphaelfabeni.com.br/css-loader/)   

[Very Coll Button Effects](https://github.com/codrops/ParticleEffectsButtons)   

[Web UI Kit](https://github.com/creativetimofficial/now-ui-kit)   

[shine.js - pretty shadows](https://github.com/bigspaceship/shine.js/)   

[Fitty - Fit Text to inside it's Parent](https://rikschennink.github.io/fitty/)

[Image Blur Plugin](https://msurguy.github.io/background-blur/)     

[Parallax](https://dixonandmoe.com/rellax/)   

[Epic Bootstrap](https://epicbootstrap.com/)    

[CSS Hover link animations](https://tympanus.net/Development/CreativeLinkEffects/)    

[Eva Icons](https://github.com/akveo/eva-icons)   

[Feather Icons](https://feathericons.com/)    

[Tilda Icons 700+](https://tilda.cc/free-icons/)    

[Pretty CHeckboxes](https://github.com/lokesh-coder/pretty-checkbox)    

[Bootbox - Alerts, toasts etc.](http://bootboxjs.com)   

[Transferwise Bootstrap](https://bootstrap.transferwise.com)    

[Creative Buttons](https://tympanus.net/Development/CreativeButtons/)  

[Animista - CSS Animations on Demand](https://animista.net/)  

[Pure & Simple CSS Text Shadows](https://www.massmediums.com/blog/134-create-great-looking-pure-css-text-shadows.html)    

[CSS Grid Experiments](https://codepen.io/collection/DQvYpQ/?cursor=ZD0xJm89MSZwPTEmdj0xOQ==)   

[Bulma](https://bulma.io/)    

[Beautiful Box Shadows](https://getcssscan.com/css-box-shadow-examples)



## Terminal

[Cmder](http://cmder.net)   

[Hyper](https://hyper.is)   



## React

[Hot Loader for create-react-app](https://github.com/cdharris/react-app-rewire-hot-loader)    

[Gatsby - Static Site Generator](https://www.gatsbyjs.org)  

[Monocle - Visualizing Tool for React](https://github.com/team-gryff/react-monocle)   

[next.js - Documentation](https://nextjs.org/learn/)   

[Material Design spinner components for React.js](https://github.com/tsuyoshiwada/react-md-spinner)     

[HTML to JSX](https://magic.reactjs.net/htmltojsx.htm)    

[Unstated - React State Management](https://github.com/jamiebuilds/unstated)      

[ReactSpring - React Animations](http://react-spring.surge.sh/)   

[UseHooks - Easy to understand React Hook recipes](https://usehooks.com/)   

[Chakra UI - A simple, modular and accessible component library](https://chakra-ui.com/)    

[formerly Material-UI](https://mui.com/)    

[Jotai - Primitive and flexible state management for React](https://jotai.org/)    

[zustand - A small, fast and scalable bearbones state-management](https://github.com/pmndrs/zustand)    

[Radix UI - Unstyled React components for building UI](https://www.radix-ui.com/)   



## Databases

[WatermelonDB - Database for Easy User Data Interaction](https://github.com/Nozbe/WatermelonDB)   

[Prisma - Build a GraphQL server with any database](https://www.prisma.io/)



## Design   

[Airbnb Rules for JS](https://github.com/airbnb/javascript)   

[Nerd fonts](https://nerdfonts.com/)   

[CSS Cheatsheet](https://css-doodle.com/#selector-@at)   

[Icon repository](http://konpa.github.io/devicon/)  

[Khroma - Colors, gradients](http://khroma.co/train/)   

[ColorSpace - Never waste Hours on finding the perfect Color Palette again!](https://mycolor.space)   

[CoolHue - Gradients](https://webkul.github.io/coolhue/)    

[Color Gradient Generator](https://larsenwork.com/easing-gradients/#editor)   

[Unsplash - Free Stock Photos](https://unsplash.com)    

[Paletton - Color Palette](http://paletton.com)   

[Icons](https://iconmonstr.com/)    

[Blobmaker - Otganic SVG shapes](https://www.blobmaker.app/)    

[Hero Patterns - SVG background patterns](http://www.heropatterns.com/)   

[Colors & Fonts](https://www.colorsandfonts.com/)   

[Hue.tools](https://hue.tools/)     

[Magic Patterns](https://www.magicpattern.design/)



## Stacks

[mern.io - Easily build production ready universal apps](http://mern.io)   



## Animation

[Simple libraries for delightful interfaces](https://popmotion.io)   

[Standalone parallax scrolling for mobile and desktop with CSS variables](https://github.com/electerious/basicScroll) 

[Transition Animation](https://codepen.io/zadvorsky/pen/PNXbGo)     

[Mo.js - Motion for the web](http://mojs.io/)     

[ScrollReveal](https://scrollrevealjs.org/)     

[React Animations](https://popmotion.io/pose/)    

[Lax.js Animation Library](https://github.com/alexfoxy/laxxx)   

[React Animations](https://github.com/kitze/react-genie)  

[Lottie](https://github.com/airbnb/lottie)    

[SVG Aniamted Loaders](https://medialoot.com/preview/frame/animated-svg-preloaders.html)    



## Awesome

[33 JavaScript libraries and frameworks to check out in 2018](https://getflywheel.com/layout/javascript-libraries-frameworks-2018/)   

[15 Interesting JavaScript and CSS Libraries for August 2017](https://tutorialzine.com/2017/08/15-interesting-javascript-and-css-libraries-for-august-2017)

[10 Amazing CodePen Demos for April 2018](https://tutorialzine.com/2018/04/10-amazing-codepen-demos-for-april)      



## Vectors, Stock Photos, Icons, etc.

https://worldvectorlogo.com/    

http://www.flaticon.com     

https://www.iconfinder.com/   

https://www.pexels.com/     

https://unsplash.com/   

https://pixabay.com/    



## Security



## Mobile

[pulltorefresh.js](https://www.boxfactura.com/pulltorefresh.js/)   

[UI Kitten - RN UI Kit](https://akveo.github.io/react-native-ui-kitten/#/home)   

[Nachos UI Kit - RN UI Kit](https://avocode.com/nachos-ui/)   



## Blogs

[An Easy Way to Get Started with the MERN Stack](https://alligator.io/react/mern-stack-intro/)    

[Securing fucking MongoDB](https://linoxide.com/linux-how-to/install-mongodb-ubuntu/)   

[UI toolkit for React Native](https://shoutem.github.io/ui)   

[HQ React tuts. Nextjs mostly](https://reacttricks.com/)



## Other

[Inspect Requests](https://requestbin.fullcontact.com/)   

[Chocolatey - packacge manager for Windows](https://chocolatey.org/)   

[Node version & feature checker](https://node.green)   

[Concurrently - run multiple commands](https://github.com/kimmobrunfeldt/concurrently)   

[three.js - 3D Animations](https://threejs.org)   

[Single Page Website Showcase](https://www.awwwards.com/websites/single-page/)   

[The Top JavaScript Trends 2018](https://x-team.com/blog/top-javascript-trends-2018/)   

[push.js - desktop notifications](https://pushjs.org/)   

[Drag and Drop](https://haltu.github.io/muuri/)   

[list.js - list, search & sort](https://github.com/javve/list.js)   

[birdview.js - website zoom out](http://achrafkassioui.com/birdview)   

[Easy communication between cross-origin browser tabs](https://github.com/wingify/across-tabs)   

[Shepherd - Guide your users through a tour of your app](https://github.com/shipshapecode/shepherd)   

[Shotsnapp - Mobile mockup generator](https://shotsnapp.com/)     

[Sweet Alerts](https://sweetalert.js.org/)    

[nth master](http://nthmaster.com/)   

[codyhouse ****](https://codyhouse.co)    

[Animated 404 Pages](https://www.kapwing.com/404-illustrations)   

[Epic Spinners](https://github.com/epicmaxco/epic-spinners)   

[Next.js Auth Example Snippet](https://github.com/zeit/next.js/issues/153)    

[Codepip Games (tutorials)](https://codepip.com/games/)     

[Refactoring.guru](https://refactoring.guru/)   

[Friendly web development tutorials for complete beginners](https://www.internetingishard.com/)       

  

 ## Tailwind

[UI components for React/Tailwinds](https://headlessui.dev/)    

[Tailblocks - Ready to use tailwind blocks](https://tailblocks.cc/)   

[Meraki UI - Support RTL Languages & Fully Responsive Based On Flexbox & CSS Grid With Elegant Dark Mode](https://merakiui.com/)    

[Kitwind - Fully responsive UI kits](https://kitwind.io/products/kometa/components)   

[Tailwind kit - Components and templates](https://www.tailwind-kit.com/)



## Vue

[Vue Material](https://www.creative-tim.com/vuematerial/)



## Testing

[Cucumber Boilerplate](https://github.com/webdriverio/cucumber-boilerplate)   

[Jest](https://github.com/facebook/jest)    

[Node.js template for end-to-end testing with Cucumber.js and Puppeteer](https://github.com/patheard/cucumber-puppeteer)






## Utils    

[Free Form Builder (like typeform)](https://tally.so/)    

[Cheat sheets](https://devhints.io/)    

[Free Landing Page Templates](https://uisual.com/)