• Stars
    star
    536
  • Rank 82,794 (Top 2 %)
  • Language
    TypeScript
  • Created about 2 years ago
  • Updated 12 months ago

Reviews

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Repository Details

React S.O.L.I.D Principles for writing clean-code

React S.O.L.I.D Principles for writing clean-code

SOLID Principles

  • SRP: Single Responsibility Principle
  • OCP: Open-Closed Principle
  • LSP: Liskov Substitution Principle
  • ISP: Interface Segregation Principle
  • DIP: Dependency Inversion Principle

All the principles are explained on CoderOne's youtube channel: https://youtu.be/MSq_DCRxOxw

Code

This Repo has examples for all principles implemented in React. Go inside src/principle there will be all principles there with isolated demos.

You can run the dev server using:

yarn install
yarn dev

Change the component in App.tsx with the corresponding Principle's component name to see the demo.

Example

function App() {
  return (
    <div className="flex min-w-full h-full justify-center items-center p-8">
      {/* <SRP /> */}
      {/* <OCP /> */}
      {/* <LSP /> */}
      <DIP />
    </div>
  );
}

More Repositories

1

react-nestjs-full-web-app

Full React with Nestjs/Nodejs Web Application deployed on Hostinger with docker and docker-compose
TypeScript
397
star
2

nestjs-solid

Nest.js & Typescript SOLID Principles for writing clean-code
TypeScript
171
star
3

modern-react-website

Full Modern React responsive multi-page Website created from scratch on Video Tutorial on Coderone's youtube channel
JavaScript
128
star
4

clean-rest-apis

Best Practices to write clean RESTFUL APIs using Node.js and Express
TypeScript
113
star
5

react-login-register

Elegant Login/Register Box on React explained on Video Tutorial
JavaScript
112
star
6

your-react-boilerplate

The Pro React Project Boilerplate you need https://youtu.be/nm8UWffANOc
JavaScript
109
star
7

react-easy-auth

React Login with very easy authentication using react-auth-kit library. Explained on CoderOne Youtube channel
TypeScript
90
star
8

express-login-register-api

Express API Server for login and register with JWT Authentication using Passport.js it also uses Sequelize and Mysql. Explained on video tutorial on CoderOne channel
JavaScript
68
star
9

modern-react-login

Modern React Login/Register form with smooth animation
JavaScript
67
star
10

react-socketio-tic-tac-toe

React Socket.io Online Multiplayer Tic-Tac-Toe Game created on CoderOne youtube video
TypeScript
64
star
11

img-lazy-loading

Image Lazy Loading with Blurhashing
TypeScript
62
star
12

react-3d-earth

Awesome React 3D Earth created with Three.js and React fiber on CoderOne Youtube Channel
JavaScript
61
star
13

react-query-useEffect

Why you should use react-query instead of useEffects for API Calls?
JavaScript
57
star
14

ipenywis

Github Profile
55
star
15

react-navbar-responsive

Responsive Navbar with Hamburger Menu Mobile Ready on REACT.JS built on Video Tutorial on CoderOne Channel
JavaScript
55
star
16

nextjs-auth

Add Authentication to Next.js in 10min
TypeScript
54
star
17

javascript-voice-assistant

REALTIME Voice Assistant clone built on javascript with Tensorflow and the SpeechCommands Machine Learning Model (Explained on Coderone's Youtube channel)
JavaScript
49
star
18

typescript-mistakes

Mistakes you should avoid to write better and become more productive with Typescript
TypeScript
45
star
19

express-passport-sso

Expressjs API with Google Single Sign On and JWT using Passportjs with full authentication working with React application
JavaScript
36
star
20

React-Weather-App

Simple React Weather App with RESTFULL APIs
JavaScript
33
star
21

nextjs-data-fetching

The new Next.js 13 Data Fetching APIs and fetch with SSR/SSG/ISR
TypeScript
32
star
22

nextjs-rsc

Demo Project to showcase building a Twitter clone with Next.js Server Components and Server Actions
TypeScript
32
star
23

react-sso

React App with Google Single Sign On created with customer API Server using Expressjs and Passportjs
TypeScript
27
star
24

jwt-best-practices-server

Best Practices JWT Express Sever w/ Register and Login
JavaScript
26
star
25

react-tables

React-Table Demo Project explained on Video Tutorial on CoderOne's Channel
JavaScript
25
star
26

react-pro-boilerplate

React Pro Boilerplate sample project for big production ready projects with example explained on CoderOne's channel
TypeScript
24
star
27

react-typesense-instantsearch

React Typesense Search 10,000 Trending Movies using Instantsearch
JavaScript
24
star
28

notion-nextjs-portfolio

Notion Nextjs Portfolio using Notion as CMS
TypeScript
23
star
29

ButterflyEditor

WYSIWYG Rich Text Editor
TypeScript
22
star
30

react-candy-searchbar

Awesome Animated React Auto-Complete SearchBar for searching for TvShows/Series using RESTFUL APIs Explained on CoderOne Youtube Channel
JavaScript
21
star
31

notion-nextjs-blog

Next.js Blog that is linked and works with a Notion Database - https://youtu.be/n2tkgeFcMhc
TypeScript
20
star
32

React-examples

Ipenywis React Video Tutorials Source Codes
JavaScript
20
star
33

react-axios

Reminders React App with Axios (Master Axios Tutorial)
JavaScript
20
star
34

react-stop-doing-this

Stop doing this bad practices if you're a React developer
JavaScript
19
star
35

react-slide-page-transition

Simple React with CSS Page Slide Transition works with React Router for smooth page navigation, Watch Tutorial for more details: https://youtu.be/tOusa012Fus
JavaScript
19
star
36

react-3d-card

Awesome 3D Animated Nike Shoes card built on video tutorial on CoderOne Youtube channel
JavaScript
19
star
37

ai-rest-api

REST API for an A.I SaaS using Node.js, Nest.js, Postgres, Prisma and Replicate
TypeScript
19
star
38

jwt-best-practices

JWT Best Practices React app w/ Express API Server
JavaScript
18
star
39

web-scraping

All Projects of Web Scraping Tutorial Series on Youtube
JavaScript
18
star
40

smooth-react-responsive-website

Full responsive react website from scratch with smooth scrolling Explained on video tutorial
JavaScript
17
star
41

node-express-benchmark

Node.js/Express Server with programmatic benchmark using autocannon for stressing the Login/Register and Fibonacci APIs Briefly explained on video tutorial
JavaScript
17
star
42

react-object-detection

Object Detection with Tensorflow, coco-ssd and React explained on Video Tutorial on CoderOne youtube channel
JavaScript
17
star
43

react-hamburger-menu

Awesome hamburger animation with SVG Animation and Framer-motion created on Video tutorial on CoderOne youtube channel
JavaScript
17
star
44

simple-express-server

Basic Express/Node.js Server based on the MVC Pattern
JavaScript
16
star
45

expressjs-mistakes

Express JS Junior Mistakes you should Avoid! https://youtu.be/RtLAwnYJOyQ
TypeScript
15
star
46

best-react-animation-libraries

Best React libraries for doing animation (Performance, Easier API, Size...)
JavaScript
14
star
47

react-tailwind-website

React Tailwind Website Created on CoderOne's video tutorial
TypeScript
14
star
48

awesome-quarantine

Awesome List of Coding Projects Ideas you can create while you are at home sitting all day and having some coffe
13
star
49

redux-alternatives

Trying 5 Redux Alternatives (Zustand, Recoil, Jotai, Rematch and Redux-Toolkit). Expalined on CoderOne Ytb channel
TypeScript
10
star
50

autocomplete-food-search

Simple React Autocomplete Food search Application for Youtube Tutorial.
JavaScript
10
star
51

basic_blockchain

Very Basic Blockchain of the Youtube Series let's create a Blockchain on Nodejs and MongoDB
JavaScript
9
star
52

wordle-solver

AI Bot to Solve any Wordle built as a chrome extension. Explained on CoderOne's Youtube Channel.
JavaScript
9
star
53

react-fast-img

React Image Optimization using srcSet and sizes with a Custom Vite plugin to auto-generate srcSet with images with different resolutions
TypeScript
9
star
54

Desktop_ChatApp

Udemy Course Series Desktop Chat App (Electron, Nodejs, React and Other Frameworks)
JavaScript
9
star
55

react-error-boundaries

The React Error Boundaries example - Explained on the CoderOne Youtube channel video https://www.youtube.com/watch?v=0LpLxEUephc
TypeScript
9
star
56

react-svg-animation

The Right way to Animate your SVGs inside your React app - https://youtu.be/SrmTDrN1lkU
TypeScript
9
star
57

one-stack

Looking for a simple yet powerful boilerplate for your next SaaS? Then this is for you! - Feel free to submit PRs with your favorite setups
TypeScript
7
star
58

walking-cat-css-animation

Simple Walking cat Animation Explained on Coderone channel
CSS
7
star
59

chatgpt-generated-react

React & Next.js website generated from Zero to Finish using ChatGPT
JavaScript
6
star
60

react-redux-tutorial

Master React Redux and state management on Coderone youtube video tutorial
JavaScript
6
star
61

react-pro-debugging

Mastering Debugging React apps with the Chrome DevTools and Pro tips and tricks on CoderOne's Video Tutorial
TypeScript
6
star
62

json-is-slow

JSON is Slow benchmarks - forked from https://github.com/nanoexpress/json-benchmark with slight adjustments
JavaScript
5
star
63

safe-assignment-operator-demo

A Simple Demo to explain the benefits of implementing the new safe-assignment-operator in Javascript - https://youtu.be/eh5RYeprXDY
JavaScript
5
star
64

draftjs-editor

Basic Rich Text Editor Built with Draftjs and React based on the Tutorial Series on Ipenywis Channel and Platform
JavaScript
5
star
65

awesome-tailwind-plugins

Awesome Tailwind Plugins Explained on video tutorial https://youtu.be/X5xrT7Nk_hQ
JavaScript
5
star
66

nue-app

Simple App built using Nue (The new Frontend Framework)
CSS
4
star
67

react-newsletter-card

Awesome glass Newsletter card on React created and explained on CoderOne youtube channel
JavaScript
4
star
68

react-pro-tips

Pro Tips For React with Explained components and Demo Code. On CoderOne Channel
TypeScript
4
star
69

coderone-animated-logo

CoderOne Animated Logo created using Remotion and rendered into a video w/ (React, SVG and Spring Animations) explained on Video Tutorial
TypeScript
3
star
70

apollo-server

Simple Apollo Server with Nodejs/Express
JavaScript
3
star
71

chat-app-boilerplate

Boilerplate Start-up project for The Udemy Course Series to quickly setup and get started with the app development
JavaScript
2
star
72

threejs-monster-animation

Threejs Animated Monster using a Finite state machine switching between different animations
JavaScript
2
star
73

codux-react-landing

Landing Page created using Codux
CSS
2
star
74

HateSpeechAI

Hate Speech AI detection using BERT with a React Web App
Jupyter Notebook
2
star
75

regex-dos-poc

ReDOS or Regular Expression Denial of Service example Express.js app explained on youtube tutorial
JavaScript
2
star
76

why-react-hooks-presentation

Why React Hooks GDG Devfest 2k19 Talk Presentation
JavaScript
2
star
77

apollo-react-client

Simple React Application that fetches books from apollo-server books store
JavaScript
2
star
78

git-mistakes

Git Mistakes to avoid
TypeScript
2
star
79

javascript-python-benchmark

Why Javascript is Faster than Python?
JavaScript
2
star
80

weteeit-admin-front

Weteeit Admin Dashboard React Front-end Application
TypeScript
1
star
81

servycing-netlify

Servycing React App Netlify
TypeScript
1
star
82

DeepEngine

a Simple 2D Game Engine [C++/SDL/OpenGL]
C++
1
star
83

nextjs-client-component-issue

Next.js 13 Client Components `use()` not working
CSS
1
star
84

hajj_hackathon

Frontend Nateq (Hajj_hackathon) Source Code
TypeScript
1
star
85

Command-Line-Interface-Node.js

Create a Command Line Interface using Node js
JavaScript
1
star
86

weteeit

Weteeit Front End React App
TypeScript
1
star
87

API-Demo-Pokemon-

A Simple DEMO Of How API works by Manipulating Pokemon
JavaScript
1
star
88

portfolio-landing-page

Simple HTML & CSS Landing Page Made for Developer to follow their careers
CSS
1
star
89

react-infinite-scroller

React Infinite Scroller Cryptocurrencies App Explained on CoderOne's Video Tutorial
JavaScript
1
star
90

jest-js-testing

Jest Testing Tutorial Series
JavaScript
1
star
91

larv-cms

Basic CMS (Content Management System) using Laravel
PHP
1
star
92

weteeit-api

Weteeit Shop API
TypeScript
1
star
93

Weather-App

Weather App built with React and metaweather API with an intuitive interface and elegant design plus, for Codeline front-end test
JavaScript
1
star
94

rxjs-crash-course

Rxjs Crash Course Project Repository
JavaScript
1
star
95

airpods-3d-react-card

Awesome 3D Apple Airpods Max Animated card created using React, Styled-Components and Framer-Motion on CoderOne's channel
JavaScript
1
star