Self-Hosting Next.js Tutorial

Follow the instructions below to deploy a Next.js app with a local PostgreSQL database to a VPS and connect it to a custom domain with free SSL. Watch the accompanying tutorial on YouTube: https://www.youtube.com/watch?v=2T_Dx7YgBFw

Instructions & commands:

Get your VPS server on Hostinger (Use code CODINGINFLOW for 10% off). Install Ubuntu 24 as the OS and set a root password.
Log into your server as root: ssh root@<your-server-ip>
Update Linux packages: apt update && apt upgrade -y
Create a new user: adduser

redwansikder / generateTestDataFromSchema.ts

Created November 15, 2024 03:16 — forked from serifcolakel/generateTestDataFromSchema.ts

When building applications, mock data can be invaluable for testing, development, and prototyping. With Zod’s robust schema validation and Faker’s data generation capabilities, we can create a powerful helper to generate realistic, schema-compliant mock data for any Zod schema.

	/**
	* @description Generate test data from Zod schema using Faker.js
	* @link https://dev.to/serifcolakel/building-a-typescript-helper-for-mock-data-generation-with-zod-and-faker-4b8f
	* @link https://medium.com/@serifcolakel/building-a-typescript-helper-for-mock-data-generation-with-zod-and-faker-c1c2dc8256d7
	*/

	import {
	ZodSchema,
	ZodObject,
	ZodString,

redwansikder / reset-next.sh

Created September 22, 2024 14:49 — forked from whitep4nth3r/reset-next.sh

Reset a new Next.js application with an HTML language attribute, responsive font sizes, and cleaned up index.js

	#!/bin/bash

	# Input flags

	LANG=""
	APP_NAME=""

	# The directory path must be relative to where the script lives
	DIR=""

redwansikder / downloadFile.js

Created August 19, 2024 06:28 — forked from dreamyguy/downloadFile.js

Download response.data as a file, through Blob()

	// 'downloadFile.js', written by blending two solutions:
	// 'js-download' https://github.com/kennethjiang/js-file-download
	// 'Anders Paulsen' https://blog.jayway.com/2017/07/13/open-pdf-downloaded-api-javascript/

	export function downloadFile(data, filename, mime) {
	// It is necessary to create a new blob object with mime-type explicitly set
	// otherwise only Chrome works like it should
	const blob = new Blob([data], {type: mime \|\| 'application/octet-stream'});
	if (typeof window.navigator.msSaveBlob !== 'undefined') {
	// IE doesn't allow using a blob object directly as link href.

redwansikder / multi-tenancy.md

Created May 1, 2024 18:21 — forked from RiadHossain43/multi-tenancy.md

MongoDB Multi Tenancy Approach

Stroy

Imagine you are building a simple project management application that has follwing simple features

Manage projects (your organisation may have multiple projects running)
Manage work packages related to a project
Manage members in your organisation that may need to have access to projects in your organisation.

Shared database approach

redwansikder / useTextSelection.ts

Created February 19, 2024 06:32 — forked from KristofferEriksson/useTextSelection.ts

A React Typescript hook that tracks user text selections & their screen positions

	import { useEffect, useState } from "react";

	type UseTextSelectionReturn = {
	text: string;
	rects: DOMRect[];
	ranges: Range[];
	selection: Selection \| null;
	};

	const getRangesFromSelection = (selection: Selection): Range[] => {

redwansikder / useLocation.ts

Created February 19, 2024 06:31 — forked from KristofferEriksson/useLocation.ts

A React Typescript hook that provides real-time geolocation data, complete with heading and speed metrics

	import { useEffect, useState } from "react";

	interface LocationOptions {
	enableHighAccuracy?: boolean;
	timeout?: number;
	maximumAge?: number;
	}

	interface LocationState {
	coords: {

redwansikder / useDeviceOrientation.ts

Created February 19, 2024 06:30 — forked from KristofferEriksson/useDeviceOrientation.ts

A React Typescript hook that utilizes the DeviceOrientation API to provide real-time orientation data of a device in 3D space

	import { useCallback, useEffect, useState } from "react";

	interface DeviceOrientationState {
	alpha: number \| null;
	beta: number \| null;
	gamma: number \| null;
	absolute: boolean;
	}

	// Define an extended interface for DeviceOrientationEvent including requestPermission

redwansikder / useNetwork.ts

Created February 19, 2024 06:30 — forked from KristofferEriksson/useNetwork.ts

A React Typescript hook to get real-time network insights

	import { useEffect, useState } from "react";

	interface NetworkInformation extends EventTarget {
	downlink?: number;
	effectiveType?: "slow-2g" \| "2g" \| "3g" \| "4g";
	rtt?: number;
	saveData?: boolean;
	onchange?: EventListener;
	}

redwansikder / LandingPage.tsx

Created February 11, 2024 07:55 — forked from gopinav/LandingPage.tsx

Final component code with secondary navbar animations

	import React, { useState } from "react";
	import { useInView, InView } from "react-intersection-observer";

	const sections = ["Issues", "Cycles", "Roadmaps", "Workflows"];

	const menuWidths = {
	Issues: {
	open: "124px",
	closed: "65px",
	},