Full-Stack

//create a react project 1. npm install 2. npm install react-router-dom  //for using react routing //create page OR component folder inside create 2page landing.jsx and dashboard.jsx ----------------------------------------------------------- //then we use navigation to use client side route / first import usenavigation import { BrowserRouter, Routes, Route, useNavigate } from 'react-router-dom'; // definre up from the syntx you write const navigate = useNavigate(); then syntax**   <button onClick={() => {           navigate("/");         }}>Landing</button> -------------------------------------------------------------- +++++++++++++++++++++++++++++ now we will do only client side routing do not hard refresh like before we did //then we use navigation to use client side route / first import usenavigation import { BrowserRouter, Routes, Route, useNavigate } from 'react-router-dom'; // definre up from the syntx you...

https://projects.100xdevs.com/tracks/w5E6PT2t0IyOFM3bZxcM/aws-fe-1  1. when you devloping your project to run you react project  // npm run dev    1. after development project you need to buil you code react into simple html use this command // npm run build 1.then serve you code to run your code // npm install -g serve 1. then go to dist folder and run the command // serve

use thsi  file https://projects.100xdevs.com/tracks/g0AcDSPl74nk45ZZjRdU/aws-1    download nginx to perform revers proxy //sudo apt update //sudo apt install nginx this should start a nginx start on port 80   create reverse proxy //sudo rm /etc/nginx/nginx.conf //sudo vi /etc/nginx/nginx.conf events {     # Event directives... } http {     server {     listen 80;     server_name be1.100xdevs.com;     location / {         proxy_pass http://localhost:8080;         proxy_http_version 1.1;         proxy_set_header Upgrade $http_upgrade;         proxy_set_header Connection 'upgrade';         proxy_set_header Host $host;         proxy_cache_bypass $http_upgrade;     }  ...

https://projects.100xdevs.com/tracks/g0AcDSPl74nk45ZZjRdU/aws-7 first transfer permition of this fle chmod 700 fileName.pem get access of your instances ssh -i fileName.pem ubuntu@publicIP clone your code in aws machine git clone https://github.com/luciferdk/auth0backend.git for then when our connection lost or server stuck on our terminal sudo vi /etc/resolve .conf  and write nameserver 8.8.8.8 curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.3/install.sh | bash   //reverse proxy sudo apt update sudo apt install nginx   sudo rm /etc/nginx/nginx.cong sudo vi /etc/nginx/nginx.cong   //write this code and modified server_name and localhost events { # Event directives... } http { server { listen 80; server_name be1.100xdevs.com; location / { proxy_pass http://localhost:8080; proxy_http_version 1.1; proxy_set_header Upgrade $http_upgrade; proxy_set_header Connection 'upgrade'; proxy_set_header Host $ho...

1. Initializing a worker //To create and deploy you application, you cna take the following steps npm create cloudflare -- my-aap 2. to signup page of cloudflare npx wrangler login  3. to deploy you code npm run dev          =============== hono application ======= 1. initialize a new app npm create hono@latest my-app 1. move to my-app and install the dependencies. cd my-app npm i this is syntax of sending data in body, header, parems and bunch of things# import { Hono } from 'hono' const app = new Hono() app.get('/', async (c) => {   //body, headers, query parameters, middlewares, connecting to a database   const body = await c.req.json()   console.log(body);   console.log(c.req.header("Authorization"));   console.log(c.req.query("param"));   return c.text('Hello Hono!') }) export default app        //middleware import { Hono , Next } from 'hono' import { Context } from 'hono/jsx' ; const a...

//using ORM : Simpler syntax (converts objects to SQL queries under the hood) //code CREATE TABLE users (     id SERIAL PRIMARY KEY,     name VARCHAR(100),     email VARCHAR(100) UNIQUE NOT NULL ); ALTER TABLE users ADD COLUMN phone_number VARCHAR(15);   //As your app grows, you will have a lot of these CREATE and ALTER commands. ORMs (or more specifically Prisma) maintains all of these for you. For example - https://github.com/code100x/cms/tree/main/prisma/migrations fd     //Data mode in prisma 1. Data model In a single file, define your schema. What it looks like, what tables you have, what field each table has, how are rows related to each other. 2. Automated migrations Prisma generates and runs database migrations based on changes to the Prisma schema. 3. Type Safety Prisma generates a type-safe database client based on the Prisma schema. 4. Auto-Completion       //installing prisima lets create simple t...

// initialise an empty typescript project npm init -y npx tsc --init -:  change the rootDir and outDir in tscongig.json instll pf libarary and it's type (because we're usign TS) npm install pg npm install @types/pg   Create a similar node.js app that lets you put data ======================================= //write a function to create a uses table in your databse. import  { Client } from 'pg' const client = new Client({ connectionString: ""  }) client.connect() //curd operations // write a function to create a uses table in your databse. import  { Client } from 'pg' const client = new Client ({ connectionString : "postgresql://test_owner:eSLcgdkBX9D1@ep-fragrant-boat-a56z1tgw.us-east-2.aws.neon.tech/test?sslmode=require"  })   async function createUsersTable () {     await client . connect () //create operation      const result = await client . query ( `     CREATE TABLE users (       ...