Full-Stack

 reconciliation  reconciliation is useState 1. import useState form react lib 2. write cosnt var which take two input (sate,  setState) satte mean if count 7 then state will be 7 then i press button and added 7+1 = 8 ; setSate tell state that you need to update yourself from 7 to 8; based on user entery. 3. the initial's it by 0 that help to store exact number to store eg: if i initial's it by 1 and the user update  state by 2 then state value need 2 but you got 3 thats wrong thats why .........! syntax:  import { useState } from 'react' //write this componenet inside the app OR another function const [count, setCount] = useState(0) then use this componenet and write you logic /============================================ useEffect: The useEffect Hook allows you to perform side effects in your components and stop unnecessary rendering, rerander when dependency change only. Some examples of side effects are: fetching data, directly updating the DOM, and timers. u...

//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...