Code Snippets

import React from 'react';
  
  type ButtonProps = {
    label: string;
    onClick: () => void;
  };
  
  const Button: React.FC<ButtonProps> = ({ label, onClick }) => (
    <button
      onClick={onClick}
      className="px-4 py-2 bg-blue-600 text-white rounded hover:bg-blue-700 transition"
    >
      {label}
    </button>
  );
  
  export default Button;

import type { NextApiRequest, NextApiResponse } from 'next';
  import Cors from 'cors';
  
  // Initialize CORS middleware
  const cors = Cors({ methods: ['GET', 'POST'] });
  
  function runMiddleware(req: NextApiRequest, res: NextApiResponse, fn: Function) {
    return new Promise((resolve, reject) => {
      fn(req, res, (result: any) => {
        if (result instanceof Error) reject(result);
        resolve(result);
      });
    });
  }
  
  export default async function handler(req: NextApiRequest, res: NextApiResponse) {
    await runMiddleware(req, res, cors);
    res.status(200).json({ message: 'Hello with CORS!' });
  }

import { useEffect, useState } from 'react';
  
  const useFetch = (url: string) => {
    const [data, setData] = useState(null);
    const [loading, setLoading] = useState(true);
    const [error, setError] = useState(null);
  
    useEffect(() => {
      fetch(url)
        .then((res) => res.json())
        .then(setData)
        .catch(setError)
        .finally(() => setLoading(false));
    }, [url]);
  
    return { data, loading, error };
  };
  
  export default useFetch;

import { createSlice, PayloadAction } from '@reduxjs/toolkit';
  
  interface CounterState {
    value: number;
  }
  
  const initialState: CounterState = { value: 0 };
  
  const counterSlice = createSlice({
    name: 'counter',
    initialState,
    reducers: {
      increment(state) {
        state.value += 1;
      },
      decrement(state) {
        state.value -= 1;
      },
      setValue(state, action: PayloadAction<number>) {
        state.value = action.payload;
      },
    },
  });
  
  export const { increment, decrement, setValue } = counterSlice.actions;
  export default counterSlice.reducer;

<button className="bg-indigo-600 hover:bg-indigo-700 text-white font-bold py-2 px-4 rounded
      transition duration-300 md:px-6 md:py-3 md:text-lg">
    Click Me
  </button>

import express from 'express';
  
  const app = express();
  const port = 3000;
  
  app.get('/', (req, res) => {
    res.send('Hello from Express!');
  });
  
  app.listen(port, () => {
    console.log(`Server running at http://localhost:${port}`);
  });

import { Request, Response, NextFunction } from 'express';
  
  const logger = (req: Request, res: Response, next: NextFunction) => {
    console.log(`${req.method} ${req.url}`);
    next();
  };
  
  export default logger;

import express from 'express';
  
  const app = express();
  app.use(express.json());
  
  app.post('/user', (req, res) => {
    const { name, email } = req.body;
    res.json({ message: `User ${name} with email ${email} created.` });
  });

// routes/web.php
  
  use IlluminateSupportFacadesRoute;
  
  Route::get('/', function () {
      return view('welcome');
  });

// src/Controller/DefaultController.php
  
  namespace AppController;
  
  use SymfonyBundleFrameworkBundleControllerAbstractController;
  use SymfonyComponentHttpFoundationResponse;
  
  class DefaultController extends AbstractController
  {
      public function index(): Response
      {
          return $this->render('default/index.html.twig');
      }
  }

import mongoose from 'mongoose';
  
  mongoose.connect(process.env.MONGO_URI || '', {
    useNewUrlParser: true,
    useUnifiedTopology: true,
  }).then(() => console.log('MongoDB connected'))
    .catch(err => console.error(err));

import { Schema, model } from 'mongoose';
  
  const UserSchema = new Schema({
    name: String,
    email: { type: String, required: true, unique: true },
    createdAt: { type: Date, default: Date.now },
  });
  
  const User = model('User', UserSchema);
  
  export default User;

import { Pool } from 'pg';
  
  const pool = new Pool({
    connectionString: process.env.DATABASE_URL,
  });
  
  export const getUsers = async () => {
    const res = await pool.query('SELECT * FROM users');
    return res.rows;
  };

import mysql from 'mysql2/promise';
  
  const connection = await mysql.createConnection({
    host: 'localhost',
    user: 'root',
    database: 'test',
    password: 'password',
  });
  
  const [rows] = await connection.execute('SELECT * FROM users');
  console.log(rows);

FROM node:16-alpine
  
  WORKDIR /app
  COPY package*.json ./
  RUN npm install
  COPY . .
  EXPOSE 3000
  CMD ["npm", "start"]

name: Node.js CI
  
  on: [push]
  
  jobs:
    build:
      runs-on: ubuntu-latest
      steps:
        - uses: actions/checkout@v2
        - name: Use Node.js
          uses: actions/setup-node@v2
          with:
            node-version: '16'
        - run: npm ci
        - run: npm test

# Login to Heroku
  heroku login
  
  # Create app
  heroku create my-app-name
  
  # Push code
  git push heroku main
  
  # Open app
  heroku open

ssh root@your_droplet_ip_address

import WebSocket from 'ws';
  
  const wss = new WebSocket.Server({ port: 8080 });
  
  wss.on('connection', (ws) => {
    ws.on('message', (message) => {
      console.log('received:', message);
      ws.send('Hello client!');
    });
  });

import { gql, useQuery } from '@apollo/client';
  
  const GET_USERS = gql`
    query {
      users {
        id
        name
      }
    }
  `;
  
  const Users = () => {
    const { loading, error, data } = useQuery(GET_USERS);
    if (loading) return <p>Loading...</p>;
    if (error) return <p>Error :(</p>;
  
    return (
      <ul>
        {data.users.map(({ id, name }) => (
          <li key={id}>{name}</li>
        ))}
      </ul>
    );
  };

import express from 'express';
  import axios from 'axios';
  
  const app = express();
  
  app.get('/auth/callback', async (req, res) => {
    const code = req.query.code;
  
    const tokenRes = await axios.post('https://oauth.provider.com/token', {
      code,
      client_id: process.env.CLIENT_ID,
      client_secret: process.env.CLIENT_SECRET,
      redirect_uri: 'https://yourapp.com/auth/callback',
      grant_type: 'authorization_code',
    });
  
    const accessToken = tokenRes.data.access_token;
    // Use accessToken to fetch user data...
    res.send('Logged in!');
  });

import Stripe from 'stripe';
  const stripe = new Stripe(process.env.STRIPE_SECRET_KEY!, { apiVersion: '2022-11-15' });
  
  export const createPaymentIntent = async (amount: number) => {
    return await stripe.paymentIntents.create({
      amount,
      currency: 'usd',
      payment_method_types: ['card'],
    });
  };

import express from 'express';
  
  const app = express();
  
  app.use(express.json());
  
  app.get('/api/items', (req, res) => {
    res.json([{ id: 1, name: 'Item 1' }]);
  });
  
  app.post('/api/items', (req, res) => {
    const newItem = req.body;
    res.status(201).json(newItem);
  });

import Redis from 'ioredis';
  const redis = new Redis();
  
  async function cacheExample() {
    await redis.set('mykey', 'value', 'EX', 60); // expire in 60 sec
    const value = await redis.get('mykey');
    console.log(value);
  }

import Kafka from 'node-rdkafka';
  
  const producer = new Kafka.Producer({
    'metadata.broker.list': 'localhost:9092',
  });
  
  producer.connect();
  
  producer.on('ready', () => {
    producer.produce(
      'topic-name',
      null,
      Buffer.from('Hello Kafka'),
      null,
      Date.now()
    );
  });

import React, { createContext, useContext, useState } from 'react';
  
  const ThemeContext = createContext(null);
  
  export const ThemeProvider = ({ children }) => {
    const [darkMode, setDarkMode] = useState(false);
    return (
      <ThemeContext.Provider value={{ darkMode, setDarkMode }}>
        {children}
      </ThemeContext.Provider>
    );
  };
  
  export const useTheme = () => useContext(ThemeContext);

export async function getStaticProps() {
    const res = await fetch('https://api.example.com/posts');
    const posts = await res.json();
  
    return {
      props: { posts },
      revalidate: 10,
    };
  }

app.get('/users/:id', (req, res) => {
    const { id } = req.params;
    res.send(`User ID is ${id}`);
  });

<div className="flex flex-col md:flex-row items-center justify-between p-4 gap-4">
    <div className="flex-1 bg-gray-200 dark:bg-gray-700 p-4 rounded">Left</div>
    <div className="flex-1 bg-gray-300 dark:bg-gray-600 p-4 rounded">Right</div>
  </div>

import fs from 'fs';
  import express from 'express';
  
  const app = express();
  
  app.post('/upload', (req, res) => {
    const writeStream = fs.createWriteStream('./uploads/file');
    req.pipe(writeStream);
    req.on('end', () => res.send('File uploaded!'));
  });

use IlluminateDatabaseMigrationsMigration;
  use IlluminateDatabaseSchemaBlueprint;
  use IlluminateSupportFacadesSchema;
  
  class CreatePostsTable extends Migration
  {
      public function up()
      {
          Schema::create('posts', function (Blueprint $table) {
              $table->id();
              $table->string('title');
              $table->text('body');
              $table->timestamps();
          });
      }
  
      public function down()
      {
          Schema::dropIfExists('posts');
      }
  }

// src/Entity/Post.php
  
  namespace AppEntity;
  
  use DoctrineORMMapping as ORM;
  
  /**
   * @ORMEntity()
   */
  class Post
  {
      /** 
       * @ORMId 
       * @ORMGeneratedValue 
       * @ORMColumn(type="integer") 
       */
      private $id;
  
      /** @ORMColumn(type="string", length=255) */
      private $title;
  
      /** @ORMColumn(type="text") */
      private $content;
  
      // getters and setters...
  }

await client.query('BEGIN');
  try {
    await client.query('INSERT INTO users(name) VALUES($1)', ['Alice']);
    await client.query('COMMIT');
  } catch (e) {
    await client.query('ROLLBACK');
    throw e;
  }

const [rows] = await connection.execute(
    'SELECT * FROM users WHERE email = ?',
    ['user@example.com']
  );

version: '3'
  services:
    app:
      build: .
      ports:
        - "3000:3000"
      depends_on:
        - mongo
    mongo:
      image: mongo
      ports:
        - "27017:27017"

name: Deploy to Vercel
  
  on:
    push:
      branches:
        - main
  
  jobs:
    deploy:
      runs-on: ubuntu-latest
      steps:
        - uses: actions/checkout@v2
        - uses: amondnet/vercel-action@v20
          with:
            vercel-token: ${{ secrets.VERCEL_TOKEN }}
            vercel-org-id: ${{ secrets.VERCEL_ORG_ID }}
            vercel-project-id: ${{ secrets.VERCEL_PROJECT_ID }}
            working-directory: ./

const Redis = require('ioredis');
  const subscriber = new Redis();
  const publisher = new Redis();
  
  subscriber.subscribe('channel1');
  subscriber.on('message', (channel, message) => {
    console.log(`Received ${message} from ${channel}`);
  });
  
  publisher.publish('channel1', 'Hello Subscribers!');

const Kafka = require('node-rdkafka');
  
  const consumer = new Kafka.KafkaConsumer({
    'group.id': 'kafka-group',
    'metadata.broker.list': 'localhost:9092',
  }, {});
  
  consumer.connect();
  
  consumer.on('ready', () => {
    consumer.subscribe(['topic-name']);
    consumer.consume();
  }).on('data', (data) => {
    console.log(`Received message: ${data.value.toString()}`);
  });

import { useQuery } from '@tanstack/react-query';
  
  const fetchTodos = async () => {
    const res = await fetch('/api/todos');
    return res.json();
  };
  
  const Todos = () => {
    const { data, isLoading, error } = useQuery(['todos'], fetchTodos);
  
    if (isLoading) return <p>Loading...</p>;
    if (error) return <p>Error!</p>;
  
    return <ul>{data.map(todo => <li key={todo.id}>{todo.text}</li>)}</ul>;
  };

import passport from 'passport';
  import { Strategy as GoogleStrategy } from 'passport-google-oauth20';
  
  passport.use(new GoogleStrategy({
    clientID: process.env.GOOGLE_CLIENT_ID!,
    clientSecret: process.env.GOOGLE_CLIENT_SECRET!,
    callbackURL: '/auth/google/callback',
  }, (accessToken, refreshToken, profile, done) => {
    // Find or create user logic here
    done(null, profile);
  }));

import express from 'express';
  import Stripe from 'stripe';
  
  const stripe = new Stripe(process.env.STRIPE_SECRET_KEY!, { apiVersion: '2022-11-15' });
  const app = express();
  
  app.post('/webhook', express.raw({ type: 'application/json' }), (req, res) => {
    const sig = req.headers['stripe-signature']!;
    let event;
  
    try {
      event = stripe.webhooks.constructEvent(req.body, sig, process.env.STRIPE_WEBHOOK_SECRET!);
    } catch (err) {
      return res.status(400).send(`Webhook Error: ${err.message}`);
    }
  
    // Handle event
    if (event.type === 'payment_intent.succeeded') {
      console.log('Payment succeeded!');
    }
  
    res.json({ received: true });
  });

app.get('/api/items', async (req, res) => {
    const page = parseInt(req.query.page) || 1;
    const limit = parseInt(req.query.limit) || 10;
    const offset = (page - 1) * limit;
  
    const items = await db.query('SELECT * FROM items LIMIT $1 OFFSET $2', [limit, offset]);
    res.json(items.rows);
  });

const CREATE_USER = gql`
    mutation CreateUser($input: CreateUserInput!) {
      createUser(input: $input) {
        id
        name
      }
    }
  `;
  
  const [createUser] = useMutation(CREATE_USER);
  
  createUser({ variables: { input: { name: 'John' } } });

version: '3'
  services:
    app:
      build: .
      ports:
        - "3000:3000"
      depends_on:
        - redis
    redis:
      image: redis
      ports:
        - "6379:6379"

import { getSession } from 'next-auth/react';
  
  export default async function handler(req, res) {
    const session = await getSession({ req });
    if (!session) return res.status(401).json({ error: 'Unauthorized' });
  
    res.json({ message: 'Welcome, ' + session.user.email });
  }

import { useForm } from 'react-hook-form';
  
  const MyForm = () => {
    const { register, handleSubmit } = useForm();
  
    const onSubmit = data => console.log(data);
  
    return (
      <form onSubmit={handleSubmit(onSubmit)}>
        <input {...register('firstName')} />
        <input type="submit" />
      </form>
    );
  };