├── .gitignore ├── Week 1 ├── assigment.js └── index.js ├── offline classes ├── a.txt ├── builtin.js ├── doctorExpress.js ├── express.js └── index.js ├── package-lock.json ├── package.json ├── week 2 ├── http server 1 │ ├── index.js │ ├── package-lock.json │ ├── package.json │ └── todoApp.js └── promiseExample.js ├── week 3 ├── autenticationInClassAssignment.js ├── fetchApi.js ├── middleWares.js ├── mongoDBConnect.js └── zodExample.js ├── week 4 ├── index.html ├── index2.html └── vite-project │ ├── .eslintrc.cjs │ ├── .gitignore │ ├── README.md │ ├── index.html │ ├── package-lock.json │ ├── package.json │ ├── public │ └── vite.svg │ ├── src │ ├── App.css │ ├── App.jsx │ ├── assets │ │ └── react.svg │ ├── index.css │ └── main.jsx │ └── vite.config.js ├── week-10 ├── Postgres │ └── SimpleNodeJsApp │ │ ├── dist │ │ ├── GetData.js │ │ ├── Insert.js │ │ └── index.js │ │ ├── package-lock.json │ │ ├── package.json │ │ ├── src │ │ ├── GetData.ts │ │ ├── Insert.ts │ │ └── index.ts │ │ └── tsconfig.json └── Prisma │ └── simpleTodo │ ├── .gitignore │ ├── dist │ ├── DeleteData.js │ ├── GetData.js │ ├── UpdateQuery.js │ └── index.js │ ├── package-lock.json │ ├── package.json │ ├── prisma │ ├── migrations │ │ ├── 20240211055318_userand_todos_added │ │ │ └── migration.sql │ │ └── migration_lock.toml │ └── schema.prisma │ ├── src │ ├── DeleteData.ts │ ├── GetData.ts │ ├── UpdateQuery.ts │ └── index.ts │ └── tsconfig.json ├── week-11 └── ServerlessBackends │ ├── AWS │ └── .gitignore │ ├── hono-app │ ├── .gitignore │ ├── README.md │ ├── package.json │ ├── src │ │ └── index.ts │ ├── tsconfig.json │ └── wrangler.toml │ └── my-app │ ├── .editorconfig │ ├── .gitignore │ ├── .prettierrc │ ├── package-lock.json │ ├── package.json │ ├── src │ └── index.ts │ ├── tsconfig.json │ └── wrangler.toml ├── week-14 ├── backendinnextjs │ ├── .env │ ├── .eslintrc.json │ ├── .gitignore │ ├── README.md │ ├── app │ │ ├── api │ │ │ └── user │ │ │ │ └── route.ts │ │ ├── favicon.ico │ │ ├── globals.css │ │ ├── layout.tsx │ │ ├── page.tsx │ │ └── signup │ │ │ └── page.tsx │ ├── components │ │ └── Signup.tsx │ ├── next.config.mjs │ ├── package-lock.json │ ├── package.json │ ├── postcss.config.js │ ├── prisma │ │ ├── migrations │ │ │ ├── 20240303150041_init_schema │ │ │ │ └── migration.sql │ │ │ └── migration_lock.toml │ │ └── schema.prisma │ ├── public │ │ ├── next.svg │ │ └── vercel.svg │ ├── tailwind.config.ts │ └── tsconfig.json └── simplenextapp │ ├── .eslintrc.json │ ├── .gitignore │ ├── README.md │ ├── app │ ├── (auth) │ │ ├── layout.tsx │ │ ├── signin │ │ │ └── page.tsx │ │ └── signup │ │ │ └── page.tsx │ ├── favicon.ico │ ├── globals.css │ ├── layout.tsx │ └── page.tsx │ ├── components │ ├── Signin.tsx │ └── SignupButton.tsx │ ├── next.config.mjs │ ├── package-lock.json │ ├── package.json │ ├── postcss.config.js │ ├── public │ ├── next.svg │ └── vercel.svg │ ├── tailwind.config.ts │ └── tsconfig.json ├── week-19 ├── WebSockets │ ├── client-side-websocket │ │ ├── .gitignore │ │ ├── README.md │ │ ├── eslint.config.js │ │ ├── index.html │ │ ├── package-lock.json │ │ ├── package.json │ │ ├── public │ │ │ └── vite.svg │ │ ├── src │ │ │ ├── App.css │ │ │ ├── App.tsx │ │ │ ├── assets │ │ │ │ └── react.svg │ │ │ ├── index.css │ │ │ ├── main.tsx │ │ │ └── vite-env.d.ts │ │ ├── tsconfig.app.json │ │ ├── tsconfig.json │ │ ├── tsconfig.node.json │ │ └── vite.config.ts │ └── ws-hello-world │ │ ├── .gitignore │ │ ├── package-lock.json │ │ ├── package.json │ │ ├── src │ │ └── index.ts │ │ └── tsconfig.json └── redisQueuesPubSubs │ ├── express-backend │ ├── .gitignore │ ├── package-lock.json │ ├── package.json │ ├── src │ │ └── index.ts │ └── tsconfig.json │ └── worker │ ├── .gitignore │ ├── package-lock.json │ ├── package.json │ ├── src │ └── index.ts │ └── tsconfig.json ├── week-5 ├── componentStateStyleCounter.html ├── new_year_todo_app │ ├── README.md │ ├── backend │ │ ├── .gitignore │ │ ├── dbSchema.js │ │ ├── index.js │ │ ├── package-lock.json │ │ ├── package.json │ │ └── types.js │ └── frontend │ │ ├── .eslintrc.cjs │ │ ├── .gitignore │ │ ├── README.md │ │ ├── index.html │ │ ├── package-lock.json │ │ ├── package.json │ │ ├── public │ │ └── vite.svg │ │ ├── src │ │ ├── App.css │ │ ├── App.jsx │ │ ├── assets │ │ │ └── react.svg │ │ ├── components │ │ │ ├── CreateTodo.jsx │ │ │ └── Todos.jsx │ │ ├── index.css │ │ └── main.jsx │ │ └── vite.config.js ├── react_foundation │ ├── .eslintrc.cjs │ ├── .gitignore │ ├── README.md │ ├── index.html │ ├── package-lock.json │ ├── package.json │ ├── public │ │ └── vite.svg │ ├── src │ │ ├── App.css │ │ ├── App.jsx │ │ ├── assets │ │ │ └── react.svg │ │ ├── index.css │ │ └── main.jsx │ └── vite.config.js ├── shortcuts.txt └── simpleCounterJS.html ├── week-6 ├── assignment-week-6 │ ├── .eslintrc.cjs │ ├── .gitignore │ ├── README.md │ ├── index.html │ ├── package-lock.json │ ├── package.json │ ├── public │ │ └── vite.svg │ ├── src │ │ ├── App.css │ │ ├── App.jsx │ │ ├── assets │ │ │ └── react.svg │ │ ├── components │ │ │ ├── Assignment2.jsx │ │ │ └── Assingment1.jsx │ │ ├── index.css │ │ └── main.jsx │ └── vite.config.js ├── hooks-states-reconcilation │ └── hooks-learn │ │ ├── .eslintrc.cjs │ │ ├── .gitignore │ │ ├── README.md │ │ ├── index.html │ │ ├── package-lock.json │ │ ├── package.json │ │ ├── public │ │ └── vite.svg │ │ ├── src │ │ ├── App.css │ │ ├── App.jsx │ │ ├── assets │ │ │ └── react.svg │ │ ├── index.css │ │ └── main.jsx │ │ └── vite.config.js └── react-deep-dive │ ├── .eslintrc.cjs │ ├── .gitignore │ ├── README.md │ ├── index.html │ ├── package-lock.json │ ├── package.json │ ├── public │ └── vite.svg │ ├── src │ ├── App.css │ ├── App.jsx │ ├── assets │ │ └── react.svg │ ├── index.css │ └── main.jsx │ └── vite.config.js ├── week-7 ├── react-7.2 │ ├── .eslintrc.cjs │ ├── .gitignore │ ├── README.md │ ├── index.html │ ├── package-lock.json │ ├── package.json │ ├── public │ │ └── vite.svg │ ├── src │ │ ├── App.css │ │ ├── App.jsx │ │ ├── assets │ │ │ └── react.svg │ │ ├── components │ │ │ ├── Dashboard.jsx │ │ │ └── Landing.jsx │ │ ├── context.jsx │ │ ├── index.css │ │ ├── main.jsx │ │ └── store │ │ │ └── atoms │ │ │ └── count.js │ └── vite.config.js └── react-concepts │ ├── .eslintrc.cjs │ ├── .gitignore │ ├── README.md │ ├── index.html │ ├── package-lock.json │ ├── package.json │ ├── public │ └── vite.svg │ ├── src │ ├── App.css │ ├── App.jsx │ ├── Pages │ │ ├── Dashboard.jsx │ │ └── Landing.jsx │ ├── assets │ │ └── react.svg │ ├── context.jsx │ ├── index.css │ └── main.jsx │ └── vite.config.js ├── week-8 ├── Dukaan-Assignment │ └── dukaan-assignment │ │ ├── .eslintrc.cjs │ │ ├── .gitignore │ │ ├── README.md │ │ ├── index.html │ │ ├── package-lock.json │ │ ├── package.json │ │ ├── public │ │ └── vite.svg │ │ ├── src │ │ ├── App.css │ │ ├── App.jsx │ │ ├── assets │ │ │ └── react.svg │ │ ├── components │ │ │ └── RevenueCard.jsx │ │ ├── index.css │ │ └── main.jsx │ │ └── vite.config.js ├── Tailwind-Project │ ├── .eslintrc.cjs │ ├── .gitignore │ ├── README.md │ ├── index.html │ ├── package-lock.json │ ├── package.json │ ├── postcss.config.js │ ├── public │ │ └── vite.svg │ ├── src │ │ ├── App.css │ │ ├── App.jsx │ │ ├── assets │ │ │ └── react.svg │ │ ├── index.css │ │ └── main.jsx │ ├── tailwind.config.js │ └── vite.config.js └── paytm-main │ ├── Dockerfile │ ├── README.md │ ├── backend │ ├── .gitignore │ ├── index.js │ ├── package-lock.json │ └── package.json │ └── frontend │ ├── .eslintrc.cjs │ ├── .gitignore │ ├── README.md │ ├── index.html │ ├── package-lock.json │ ├── package.json │ ├── public │ └── vite.svg │ ├── src │ ├── App.css │ ├── App.jsx │ ├── assets │ │ └── react.svg │ ├── index.css │ └── main.jsx │ └── vite.config.js └── week-9 ├── Custom-Hooks ├── .eslintrc.cjs ├── .gitignore ├── README.md ├── index.html ├── package-lock.json ├── package.json ├── public │ └── vite.svg ├── src │ ├── App.css │ ├── App.jsx │ ├── assets │ │ └── react.svg │ ├── index.css │ └── main.jsx └── vite.config.js └── TypeScriptLearning └── node-app ├── .gitignore ├── package.json ├── src ├── Arrays.ts ├── BasicTypes.ts ├── EnumsAndGenerics.ts ├── Interfaces.ts ├── Types.ts └── a.ts └── tsconfig.json /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules/ 2 | databaseDetails.js -------------------------------------------------------------------------------- /Week 1/assigment.js: -------------------------------------------------------------------------------- 1 | //Create a counter in Javascript (counts down from 30 to 0) 2 | 3 | const counter = () => { 4 | for (let i = 30; i >= 0; i--) { 5 | console.log(i); 6 | } 7 | }; 8 | 9 | counter(); 10 | 11 | //Calculate the time it takes between a setTimeout call and the inner function actually running 12 | 13 | const add = (a, b) => { 14 | console.log(a + b); 15 | }; 16 | let d = new Date(); 17 | const before = d.getSeconds(); 18 | add(10, 20); 19 | 20 | const after = d.getSeconds() - before; 21 | console.log(after); 22 | 23 | //Create a terminal clock (HH:MM:SS) 24 | 25 | const updateTime = () => { 26 | const time = new Date(); 27 | 28 | const hours = time.getHours().toString(); 29 | const mins = time.getMinutes().toString(); 30 | const secs = time.getSeconds().toString(); 31 | 32 | console.log(`${hours} : ${mins} : ${secs}`); 33 | }; 34 | 35 | setInterval(updateTime, 1000); 36 | -------------------------------------------------------------------------------- /Week 1/index.js: -------------------------------------------------------------------------------- 1 | //write the program to greet a person given thier first and last name 2 | 3 | let first = "Junaid"; 4 | let last = "Ahmed"; 5 | 6 | console.log(`Hi ${first} ${last}`); 7 | 8 | //write a program that greets a person based on thier Gender 9 | 10 | let gender = "female"; 11 | 12 | if (gender === "male") { 13 | console.log(`Hey man!`); 14 | } else { 15 | console.log(`Hello Lady`); 16 | } 17 | 18 | //Write a program that counts from 0 - 1000 and prints (for loop) 19 | 20 | let count = 0; 21 | 22 | for (let i = 0; i <= 1000; i++) { 23 | console.log(`count ${i}`); 24 | } 25 | 26 | //Write a program prints all the even numbers in an array 27 | let arr = [1, 2, 3, 4, 5, 6, 7, 8, 9]; 28 | 29 | for (let i = 0; i < arr.length; i++) { 30 | if (i % 2 === 0) { 31 | console.log(`${i} is even`); 32 | } else { 33 | continue; 34 | } 35 | } 36 | 37 | //Write a program to print the biggest number in an array 38 | 39 | let arr1 = [100, 3, 5, 1, 0, 9, 33]; 40 | 41 | const max = (arr1) => { 42 | let cur_max = 0; 43 | 44 | for (let i = 0; i < arr1.length; i++) { 45 | let cur_val = arr1[i]; 46 | if (cur_val >= cur_max) { 47 | cur_max = cur_val; 48 | } 49 | } 50 | return cur_max; 51 | }; 52 | 53 | console.log(`Biggest number from the array is ${max(arr1)}`); 54 | 55 | //Write a program that prints all the male people’s first name given a complex object 56 | 57 | const people = [ 58 | { 59 | name: "Junaid", 60 | gender: "male", 61 | }, 62 | { 63 | name: "Ahmed", 64 | gender: "male", 65 | }, 66 | { 67 | name: "Riya", 68 | gender: "female", 69 | }, 70 | ]; 71 | 72 | for (let i = 0; i < people.length; i++) { 73 | if (people[i].gender === "male") { 74 | console.log(people[i].name); 75 | } 76 | } 77 | 78 | //Write a program that reverses all the elements of an array 79 | 80 | let revArray = [1, 2, 3, 4, 5, 6, 7]; 81 | 82 | let i = 0; 83 | let j = revArray.length - 1; 84 | 85 | while (i <= j) { 86 | let temp = revArray[i]; 87 | revArray[i] = revArray[j]; 88 | revArray[j] = temp; 89 | i++; 90 | j--; 91 | } 92 | 93 | console.log(revArray); 94 | 95 | //Write a function that finds the sum of two numbers 96 | 97 | const findSum = (a, b) => { 98 | return a + b; 99 | }; 100 | let a = 9; 101 | let b = 10; 102 | console.log(`${findSum(a, b)}`); 103 | 104 | //Write another function that displays this result in a pretty format 105 | 106 | const prettyPrint = (fn) => { 107 | const val = fn(a, b); //callbacks example. 108 | return `The Sum of the ${a} & ${b} is ${val}`; 109 | }; 110 | 111 | console.log(prettyPrint(findSum)); 112 | 113 | //Write another function that takes this sum and prints it in passive tense 114 | -------------------------------------------------------------------------------- /offline classes/a.txt: -------------------------------------------------------------------------------- 1 | Hi this is file a.txt -------------------------------------------------------------------------------- /offline classes/builtin.js: -------------------------------------------------------------------------------- 1 | const input = [1, 2, 3, 4, 5]; 2 | 3 | const input1 = [1, 2, 3, 4, 5]; 4 | 5 | const ans = input.map((i) => i * 2); 6 | const ans1 = input1.filter((i) => i % 2 === 0); 7 | 8 | console.log(ans); 9 | console.log(ans1); 10 | -------------------------------------------------------------------------------- /offline classes/doctorExpress.js: -------------------------------------------------------------------------------- 1 | const express = require("express"); 2 | 3 | const app = express(); 4 | 5 | app.use(express.json()); 6 | 7 | const users = [ 8 | { 9 | name: "John", 10 | kidneys: [ 11 | { 12 | healthy: false, 13 | }, 14 | ], 15 | }, 16 | ]; 17 | 18 | app.get("/", (req, res) => { 19 | const johnKidney = users[0].kidneys; 20 | const numberOfKidneys = johnKidney.length; 21 | let numberOfHealthyKidneys = 0; 22 | for (let i = 0; i < johnKidney.length; i++) { 23 | if (johnKidney[i].healthy) { 24 | numberOfHealthyKidneys = numberOfHealthyKidneys + 1; 25 | } 26 | } 27 | let numberOfUnhealtyHealthyKidneys = numberOfKidneys - numberOfHealthyKidneys; 28 | res.json({ 29 | numberOfKidneys, 30 | numberOfHealthyKidneys, 31 | numberOfUnhealtyHealthyKidneys, 32 | }); 33 | }); 34 | 35 | app.post("/", (req, res) => { 36 | let isHealthy = req.body.healthy; 37 | users[0].kidneys.push({ 38 | healthy: isHealthy, 39 | }); 40 | res.json({ 41 | message: "Done!", 42 | }); 43 | }); 44 | 45 | app.put("/", (req, res) => { 46 | for (let i = 0; i < users[0].kidneys.length; i++) { 47 | users[0].kidneys[i].healthy = true; 48 | } 49 | res.json({}); 50 | }); 51 | 52 | app.delete("/", (req, res) => { 53 | const newKidney = []; 54 | for (let i = 0; i < users[0].kidneys; i++) { 55 | if (users[0].kidneys.healthy) { 56 | newKidney.push({ 57 | healthy: true, 58 | }); 59 | } 60 | } 61 | users[0].kidneys = newKidney; 62 | res.json({ message: "Done!" }); 63 | }); 64 | 65 | app.listen(3000); 66 | -------------------------------------------------------------------------------- /offline classes/express.js: -------------------------------------------------------------------------------- 1 | const express = require("express"); 2 | 3 | const app = express(); 4 | 5 | app.listen(3000); 6 | 7 | function calculateSum(n) { 8 | let sum = 0; 9 | 10 | for (let i = 0; i <= n; i++) { 11 | sum += i; 12 | } 13 | return sum; 14 | } 15 | 16 | app.get("/", (req, res) => { 17 | let n = req.query.n; 18 | const ans = calculateSum(n); 19 | res.send(ans.toString()); 20 | }); 21 | -------------------------------------------------------------------------------- /offline classes/index.js: -------------------------------------------------------------------------------- 1 | /* 2 | Async, Await and Promises 3 | */ 4 | 5 | function findSum() { 6 | let ans = 0; 7 | for (let i = 0; i < 100; i++) { 8 | ans += i; 9 | } 10 | console.log(ans); 11 | } 12 | 13 | setTimeout(findSum, 1000); // setTimeout is asynchronous function 14 | console.log("hello world"); // This prints first. 15 | 16 | const fs = require("fs"); 17 | 18 | fs.readFile("a.txt", "utf-8", function (err, data) { 19 | console.log(data); 20 | }); 21 | 22 | console.log("Running before fs"); 23 | 24 | function JunaidsReadFile() { 25 | return new Promise(function (resolve) { 26 | fs.readFile("a.txt", "utf-8", function (err, data) { 27 | resolve(data); 28 | }); 29 | }); 30 | } 31 | 32 | function onCall(data) { 33 | console.log(data); 34 | } 35 | 36 | JunaidsReadFile().then(onCall); 37 | 38 | function JunReadFile() { 39 | return new Promise(function (resolve) { 40 | resolve("hi there!"); 41 | }); 42 | } 43 | 44 | async function main() { 45 | let value = await JunReadFile(); 46 | console.log(value); 47 | } 48 | 49 | main(); 50 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "cohort-in-class-coding", 3 | "version": "1.0.0", 4 | "description": "", 5 | "main": "index.js", 6 | "scripts": { 7 | "test": "echo \"Error: no test specified\" && exit 1" 8 | }, 9 | "author": "", 10 | "license": "ISC", 11 | "dependencies": { 12 | "express": "^4.18.2", 13 | "jsonwebtoken": "^9.0.2", 14 | "mongoose": "^8.0.3", 15 | "zod": "^3.22.4" 16 | } 17 | } 18 | -------------------------------------------------------------------------------- /week 2/http server 1/index.js: -------------------------------------------------------------------------------- 1 | const express = require("express"); 2 | 3 | const app = express(); 4 | 5 | const port = 3000; 6 | 7 | app.get("/", (req, res) => { 8 | res.send("Hello from Express server!"); 9 | }); 10 | 11 | app.listen(port, () => { 12 | console.log(`Listening to port ${port}`); 13 | }); 14 | -------------------------------------------------------------------------------- /week 2/http server 1/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "http-server-1", 3 | "version": "1.0.0", 4 | "description": "", 5 | "main": "index.js", 6 | "scripts": { 7 | "test": "echo \"Error: no test specified\" && exit 1" 8 | }, 9 | "keywords": [], 10 | "author": "", 11 | "license": "ISC", 12 | "dependencies": { 13 | "express": "^4.18.2" 14 | } 15 | } 16 | -------------------------------------------------------------------------------- /week 2/http server 1/todoApp.js: -------------------------------------------------------------------------------- 1 | const express = require("express"); 2 | 3 | const app = express(); 4 | 5 | const port = 3000; 6 | 7 | app.use(express.json()); 8 | app.use(express.urlencoded({ extended: true })); 9 | 10 | let tasks = []; 11 | 12 | app.post("/add-task", (req, res) => { 13 | let task = req.body; 14 | if (task) { 15 | tasks.push(task); 16 | //console.log("Task added succesfully"); 17 | res.status(201).json({ 18 | message: "Task added successfully", 19 | tasks, 20 | }); 21 | } else { 22 | res.status(404).json({ 23 | message: "Error", 24 | }); 25 | } 26 | }); 27 | 28 | app.get("/get-tasks", (req, res) => { 29 | res.status(200).send(tasks); 30 | }); 31 | 32 | app.listen(port, () => { 33 | console.log(`Listening on port ${port}`); 34 | }); 35 | -------------------------------------------------------------------------------- /week 2/promiseExample.js: -------------------------------------------------------------------------------- 1 | function myOwnSetTimeout(duration) { 2 | let p = new Promise(function (resolve) { 3 | setTimeout(resolve, duration); 4 | }); 5 | return p; 6 | } 7 | 8 | const ans = myOwnSetTimeout(5000); 9 | 10 | ans.then(function () { 11 | console.log("Hello"); 12 | }); 13 | -------------------------------------------------------------------------------- /week 3/autenticationInClassAssignment.js: -------------------------------------------------------------------------------- 1 | const express = require("express"); 2 | const jwt = require("jsonwebtoken"); 3 | const jwtPassword = "123456"; 4 | 5 | const app = express(); 6 | app.use(express.json()); 7 | const ALL_USERS = [ 8 | { 9 | username: "harkirat@gmail.com", 10 | password: "123", 11 | name: "harkirat singh", 12 | }, 13 | { 14 | username: "raman@gmail.com", 15 | password: "123321", 16 | name: "Raman singh", 17 | }, 18 | { 19 | username: "priya@gmail.com", 20 | password: "123321", 21 | name: "Priya kumari", 22 | }, 23 | ]; 24 | 25 | function userExists(username, password) { 26 | // write logic to return true or false if this user exists 27 | // in ALL_USERS array 28 | 29 | for (let i = 0; i < ALL_USERS.length; i++) { 30 | if ( 31 | ALL_USERS[i].username === username && 32 | ALL_USERS[i].password === password 33 | ) { 34 | return true; 35 | } 36 | } 37 | return false; 38 | } 39 | 40 | app.post("/signin", function (req, res) { 41 | const username = req.body.username; 42 | const password = req.body.password; 43 | 44 | if (!userExists(username, password)) { 45 | return res.status(403).json({ 46 | msg: "User doesnt exist in our in memory db", 47 | }); 48 | } 49 | 50 | var token = jwt.sign({ username: username }, jwtPassword); 51 | return res.json({ 52 | token, 53 | }); 54 | }); 55 | 56 | app.get("/users", function (req, res) { 57 | const token = req.headers.authorization; 58 | try { 59 | const decoded = jwt.verify(token, jwtPassword); 60 | const username = decoded.username; 61 | // return a list of users other than this username 62 | let usersList = []; 63 | for (let i = 0; i < ALL_USERS.length; i++) { 64 | if (ALL_USERS[i].username === username) { 65 | continue; 66 | } else { 67 | usersList.push(ALL_USERS[i].name); 68 | } 69 | } 70 | res.status(200).json(usersList); 71 | } catch (err) { 72 | return res.status(403).json({ 73 | msg: "Invalid token", 74 | }); 75 | } 76 | }); 77 | 78 | app.listen(3000); 79 | -------------------------------------------------------------------------------- /week 3/fetchApi.js: -------------------------------------------------------------------------------- 1 | fetch("https://fakerapi.it/api/v1/persons") 2 | .then((res) => res.json()) 3 | .then((data) => { 4 | console.log(data.data[0]); 5 | }) 6 | .catch((error) => { 7 | console.error("Error:", error); 8 | }); 9 | 10 | async function useFetch() { 11 | const result = await fetch("https://fakerapi.it/api/v1/persons"); 12 | const res = await result.json(); 13 | console.log(res.data[0].address); 14 | } 15 | 16 | useFetch(); 17 | -------------------------------------------------------------------------------- /week 3/middleWares.js: -------------------------------------------------------------------------------- 1 | const express = require("express"); 2 | const app = express(); 3 | app.use(express.json()); 4 | function userMiddleware(req, res, next) { 5 | if ( 6 | !(req.headers.username === "junaid" && req.headers.password === "pass") 7 | ) { 8 | res.send({ 9 | msg: "Input are wrong!", 10 | }); 11 | } else { 12 | next(); 13 | } 14 | } 15 | 16 | function inputMiddleware(req, res, next) { 17 | if (!(req.body.name === "junaid" && req.body.phone === 123)) { 18 | res.send({ msg: "Input are wrong" }); 19 | } else { 20 | next(); 21 | } 22 | } 23 | 24 | app.post("/middleware", userMiddleware, inputMiddleware, (req, res) => { 25 | res.json({ msg: "middleware working fine beautifully!!!" }); 26 | }); 27 | 28 | app.listen(3000); 29 | -------------------------------------------------------------------------------- /week 3/mongoDBConnect.js: -------------------------------------------------------------------------------- 1 | const express = require("express"); 2 | const jwt = require("jsonwebtoken"); 3 | const mongoose = require("mongoose"); 4 | const jwtPassword = "123456"; 5 | const config = require("./databaseDetails"); 6 | 7 | mongoose.connect(config.connection); 8 | 9 | const User = mongoose.model("User", { 10 | name: String, 11 | username: String, 12 | password: String, 13 | }); 14 | 15 | const app = express(); 16 | app.use(express.json()); 17 | 18 | const generateRandomString = (length) => 19 | Array.from({ length }, () => 20 | String.fromCharCode(65 + Math.floor(Math.random() * 26)) 21 | ).join(""); 22 | 23 | async function userExists(username, password) { 24 | // should check in the database 25 | const data = await User.findOne({ username: username }); 26 | return data !== null; 27 | } 28 | 29 | app.post("/signup", async function (req, res) { 30 | const username = req.body.username; 31 | const password = req.body.password; 32 | 33 | try { 34 | const person = await User.create({ 35 | name: generateRandomString(4), 36 | username: username, 37 | password: password, 38 | }); 39 | res.status(201).json(person); 40 | } catch (error) { 41 | console.log(error); 42 | res.status(400).send(error); 43 | } 44 | }); 45 | 46 | app.post("/signin", async function (req, res) { 47 | const username = req.body.username; 48 | const password = req.body.password; 49 | const isExits = await userExists(username, password); 50 | if (!isExits) { 51 | return res.status(403).json({ 52 | msg: "User doesnt exist in our in memory db", 53 | }); 54 | } 55 | 56 | var token = jwt.sign({ username: username }, jwtPassword); 57 | return res.json({ 58 | token, 59 | }); 60 | }); 61 | 62 | app.get("/users", async function (req, res) { 63 | const token = req.headers.authorization; 64 | try { 65 | const decoded = jwt.verify(token, jwtPassword); 66 | const username = decoded.username; 67 | // return a list of users other than this username from the database 68 | let people = []; 69 | const data = await User.find({ username: username }); 70 | if (data) { 71 | const allUsers = await User.find({}); 72 | for (let i = 0; i < allUsers.length; i++) { 73 | if (allUsers[i].username !== data[0].username) { 74 | people.push(allUsers[i]); 75 | } 76 | } 77 | res.status(200).json(people); 78 | } 79 | } catch (err) { 80 | return res.status(403).json({ 81 | msg: "Invalid token", 82 | }); 83 | } 84 | }); 85 | 86 | app.delete("/remove-user", async function (req, res) { 87 | const token = req.headers.authorization; 88 | try { 89 | const decode = jwt.verify(token, jwtPassword); 90 | const username = decode.username; 91 | 92 | const deletedUser = await User.deleteOne({ username: username }); 93 | if (deletedUser.deletedCount > 0) { 94 | res.status(200).json({ message: "User deleted Successfully..." }); 95 | } else { 96 | res.status(404).json({ message: "User not found!" }); 97 | } 98 | } catch (err) { 99 | res.status(500).json({ message: "Internal server errorr.." }); 100 | } 101 | }); 102 | 103 | app.listen(3000); 104 | -------------------------------------------------------------------------------- /week 3/zodExample.js: -------------------------------------------------------------------------------- 1 | const express = require("express"); 2 | const zod = require("zod"); 3 | const app = express(); 4 | 5 | const schema = zod.array(zod.number()); 6 | 7 | const schema1 = zod.object({ 8 | name: zod.string(), 9 | phone: zod.number(), 10 | country: zod.literal("IN").or(zod.literal("US")), 11 | }); 12 | 13 | app.use(express.json()); 14 | 15 | app.post("/health-checkup", function (req, res) { 16 | // kidneys = [1, 2] 17 | const kidneys = req.body.kidneys; 18 | const response = schema1.safeParse(kidneys); 19 | if (response.success) { 20 | res.send({ 21 | response, 22 | }); 23 | } else { 24 | res.status(400).send({ 25 | response, 26 | }); 27 | } 28 | }); 29 | 30 | app.listen(3000); 31 | -------------------------------------------------------------------------------- /week 4/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Document 7 | 8 | 9 | 15 |

16 |

22 | 23 |

24 | 25 | 59 | 60 | 61 | -------------------------------------------------------------------------------- /week 4/index2.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Document 7 | 8 | 9 |
10 |

11 |

12 | 13 |
14 | 15 |
16 | 17 | 48 | 49 | -------------------------------------------------------------------------------- /week 4/vite-project/.eslintrc.cjs: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | root: true, 3 | env: { browser: true, es2020: true }, 4 | extends: [ 5 | 'eslint:recommended', 6 | 'plugin:react/recommended', 7 | 'plugin:react/jsx-runtime', 8 | 'plugin:react-hooks/recommended', 9 | ], 10 | ignorePatterns: ['dist', '.eslintrc.cjs'], 11 | parserOptions: { ecmaVersion: 'latest', sourceType: 'module' }, 12 | settings: { react: { version: '18.2' } }, 13 | plugins: ['react-refresh'], 14 | rules: { 15 | 'react-refresh/only-export-components': [ 16 | 'warn', 17 | { allowConstantExport: true }, 18 | ], 19 | }, 20 | } 21 | -------------------------------------------------------------------------------- /week 4/vite-project/.gitignore: -------------------------------------------------------------------------------- 1 | # Logs 2 | logs 3 | *.log 4 | npm-debug.log* 5 | yarn-debug.log* 6 | yarn-error.log* 7 | pnpm-debug.log* 8 | lerna-debug.log* 9 | 10 | node_modules 11 | dist 12 | dist-ssr 13 | *.local 14 | 15 | # Editor directories and files 16 | .vscode/* 17 | !.vscode/extensions.json 18 | .idea 19 | .DS_Store 20 | *.suo 21 | *.ntvs* 22 | *.njsproj 23 | *.sln 24 | *.sw? 25 | -------------------------------------------------------------------------------- /week 4/vite-project/README.md: -------------------------------------------------------------------------------- 1 | # React + Vite 2 | 3 | This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules. 4 | 5 | Currently, two official plugins are available: 6 | 7 | - [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react/README.md) uses [Babel](https://babeljs.io/) for Fast Refresh 8 | - [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh 9 | -------------------------------------------------------------------------------- /week 4/vite-project/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Vite + React 8 | 9 | 10 |
11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /week 4/vite-project/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "vite-project", 3 | "private": true, 4 | "version": "0.0.0", 5 | "type": "module", 6 | "scripts": { 7 | "dev": "vite", 8 | "build": "vite build", 9 | "lint": "eslint . --ext js,jsx --report-unused-disable-directives --max-warnings 0", 10 | "preview": "vite preview" 11 | }, 12 | "dependencies": { 13 | "react": "^18.2.0", 14 | "react-dom": "^18.2.0" 15 | }, 16 | "devDependencies": { 17 | "@types/react": "^18.2.43", 18 | "@types/react-dom": "^18.2.17", 19 | "@vitejs/plugin-react": "^4.2.1", 20 | "eslint": "^8.55.0", 21 | "eslint-plugin-react": "^7.33.2", 22 | "eslint-plugin-react-hooks": "^4.6.0", 23 | "eslint-plugin-react-refresh": "^0.4.5", 24 | "vite": "^5.0.8" 25 | } 26 | } 27 | -------------------------------------------------------------------------------- /week 4/vite-project/public/vite.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /week 4/vite-project/src/App.css: -------------------------------------------------------------------------------- 1 | #root { 2 | max-width: 1280px; 3 | margin: 0 auto; 4 | padding: 2rem; 5 | text-align: center; 6 | } 7 | 8 | .logo { 9 | height: 6em; 10 | padding: 1.5em; 11 | will-change: filter; 12 | transition: filter 300ms; 13 | } 14 | .logo:hover { 15 | filter: drop-shadow(0 0 2em #646cffaa); 16 | } 17 | .logo.react:hover { 18 | filter: drop-shadow(0 0 2em #61dafbaa); 19 | } 20 | 21 | @keyframes logo-spin { 22 | from { 23 | transform: rotate(0deg); 24 | } 25 | to { 26 | transform: rotate(360deg); 27 | } 28 | } 29 | 30 | @media (prefers-reduced-motion: no-preference) { 31 | a:nth-of-type(2) .logo { 32 | animation: logo-spin infinite 20s linear; 33 | } 34 | } 35 | 36 | .card { 37 | padding: 2em; 38 | } 39 | 40 | .read-the-docs { 41 | color: #888; 42 | } 43 | -------------------------------------------------------------------------------- /week 4/vite-project/src/App.jsx: -------------------------------------------------------------------------------- 1 | import { useState } from "react"; 2 | import reactLogo from "./assets/react.svg"; 3 | import viteLogo from "/vite.svg"; 4 | import "./App.css"; 5 | 6 | function App() { 7 | const [count, setCount] = useState(0); 8 | 9 | return ( 10 |
11 | 14 |
15 | ); 16 | } 17 | 18 | export default App; 19 | -------------------------------------------------------------------------------- /week 4/vite-project/src/assets/react.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /week 4/vite-project/src/index.css: -------------------------------------------------------------------------------- 1 | :root { 2 | font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif; 3 | line-height: 1.5; 4 | font-weight: 400; 5 | 6 | color-scheme: light dark; 7 | color: rgba(255, 255, 255, 0.87); 8 | background-color: #242424; 9 | 10 | font-synthesis: none; 11 | text-rendering: optimizeLegibility; 12 | -webkit-font-smoothing: antialiased; 13 | -moz-osx-font-smoothing: grayscale; 14 | } 15 | 16 | a { 17 | font-weight: 500; 18 | color: #646cff; 19 | text-decoration: inherit; 20 | } 21 | a:hover { 22 | color: #535bf2; 23 | } 24 | 25 | body { 26 | margin: 0; 27 | display: flex; 28 | place-items: center; 29 | min-width: 320px; 30 | min-height: 100vh; 31 | } 32 | 33 | h1 { 34 | font-size: 3.2em; 35 | line-height: 1.1; 36 | } 37 | 38 | button { 39 | border-radius: 8px; 40 | border: 1px solid transparent; 41 | padding: 0.6em 1.2em; 42 | font-size: 1em; 43 | font-weight: 500; 44 | font-family: inherit; 45 | background-color: #1a1a1a; 46 | cursor: pointer; 47 | transition: border-color 0.25s; 48 | } 49 | button:hover { 50 | border-color: #646cff; 51 | } 52 | button:focus, 53 | button:focus-visible { 54 | outline: 4px auto -webkit-focus-ring-color; 55 | } 56 | 57 | @media (prefers-color-scheme: light) { 58 | :root { 59 | color: #213547; 60 | background-color: #ffffff; 61 | } 62 | a:hover { 63 | color: #747bff; 64 | } 65 | button { 66 | background-color: #f9f9f9; 67 | } 68 | } 69 | -------------------------------------------------------------------------------- /week 4/vite-project/src/main.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import ReactDOM from 'react-dom/client' 3 | import App from './App.jsx' 4 | import './index.css' 5 | 6 | ReactDOM.createRoot(document.getElementById('root')).render( 7 | 8 | 9 | , 10 | ) 11 | -------------------------------------------------------------------------------- /week 4/vite-project/vite.config.js: -------------------------------------------------------------------------------- 1 | import { defineConfig } from 'vite' 2 | import react from '@vitejs/plugin-react' 3 | 4 | // https://vitejs.dev/config/ 5 | export default defineConfig({ 6 | plugins: [react()], 7 | }) 8 | -------------------------------------------------------------------------------- /week-10/Postgres/SimpleNodeJsApp/dist/GetData.js: -------------------------------------------------------------------------------- 1 | "use strict"; 2 | var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) { 3 | function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); } 4 | return new (P || (P = Promise))(function (resolve, reject) { 5 | function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } } 6 | function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } } 7 | function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); } 8 | step((generator = generator.apply(thisArg, _arguments || [])).next()); 9 | }); 10 | }; 11 | Object.defineProperty(exports, "__esModule", { value: true }); 12 | const pg_1 = require("pg"); 13 | // Async function to fetch user data from the database given an email 14 | function getUser(email) { 15 | return __awaiter(this, void 0, void 0, function* () { 16 | const client = new pg_1.Client({ 17 | connectionString: "postgresql://junaidcom0065:MCm6UHWh1aAr@ep-mute-resonance-99602592.us-east-2.aws.neon.tech/test?sslmode=require", 18 | }); 19 | try { 20 | yield client.connect(); // Ensure client connection is established 21 | const query = "SELECT * FROM users WHERE email = $1"; 22 | const values = [email]; 23 | const result = yield client.query(query, values); 24 | if (result.rows.length > 0) { 25 | console.log("User found:", result.rows[0]); // Output user data 26 | return result.rows[0]; // Return the user data 27 | } 28 | else { 29 | console.log("No user found with the given email."); 30 | return null; // Return null if no user was found 31 | } 32 | } 33 | catch (err) { 34 | console.error("Error during fetching user:", err); 35 | throw err; // Rethrow or handle error appropriately 36 | } 37 | finally { 38 | yield client.end(); // Close the client connection 39 | } 40 | }); 41 | } 42 | // Example usage 43 | getUser("user1@example.com").catch(console.error); 44 | -------------------------------------------------------------------------------- /week-10/Postgres/SimpleNodeJsApp/dist/Insert.js: -------------------------------------------------------------------------------- 1 | "use strict"; 2 | var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) { 3 | function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); } 4 | return new (P || (P = Promise))(function (resolve, reject) { 5 | function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } } 6 | function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } } 7 | function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); } 8 | step((generator = generator.apply(thisArg, _arguments || [])).next()); 9 | }); 10 | }; 11 | Object.defineProperty(exports, "__esModule", { value: true }); 12 | const pg_1 = require("pg"); 13 | const client = new pg_1.Client({ 14 | connectionString: "postgresql://junaidcom0065:MCm6UHWh1aAr@ep-mute-resonance-99602592.us-east-2.aws.neon.tech/test?sslmode=require", 15 | }); 16 | function insertInTable(username, email, password) { 17 | return __awaiter(this, void 0, void 0, function* () { 18 | try { 19 | yield client.connect(); 20 | const insertQuery = "INSERT INTO USERS (username,email,password) VALUES ($1,$2,$3)"; 21 | const values = [username, email, password]; 22 | const res = yield client.query(insertQuery, values); 23 | console.log("Insertion success: " + res); 24 | } 25 | catch (err) { 26 | console.error("Error during the insertion:", err); 27 | } 28 | finally { 29 | yield client.end(); 30 | } 31 | }); 32 | } 33 | insertInTable("username2", "user2@example.com", "user_password2").catch(console.error); 34 | -------------------------------------------------------------------------------- /week-10/Postgres/SimpleNodeJsApp/dist/index.js: -------------------------------------------------------------------------------- 1 | "use strict"; 2 | var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) { 3 | function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); } 4 | return new (P || (P = Promise))(function (resolve, reject) { 5 | function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } } 6 | function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } } 7 | function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); } 8 | step((generator = generator.apply(thisArg, _arguments || [])).next()); 9 | }); 10 | }; 11 | Object.defineProperty(exports, "__esModule", { value: true }); 12 | const pg_1 = require("pg"); 13 | const client = new pg_1.Client({ 14 | connectionString: "postgresql://junaidcom0065:MCm6UHWh1aAr@ep-mute-resonance-99602592.us-east-2.aws.neon.tech/test?sslmode=require", 15 | }); 16 | function createUserTable() { 17 | return __awaiter(this, void 0, void 0, function* () { 18 | yield client.connect(); 19 | const result = yield client.query(`CREATE TABLE users ( 20 | id SERIAL PRIMARY KEY, 21 | username VARCHAR(50) UNIQUE NOT NULL, 22 | email VARCHAR(255) UNIQUE NOT NULL, 23 | password VARCHAR(255) NOT NULL, 24 | created_at TIMESTAMP WITH TIME ZONE DEFAULT CURRENT_TIMESTAMP 25 | );`); 26 | console.log(result); 27 | }); 28 | } 29 | createUserTable(); 30 | -------------------------------------------------------------------------------- /week-10/Postgres/SimpleNodeJsApp/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "simplenodejsapp", 3 | "version": "1.0.0", 4 | "description": "", 5 | "main": "index.js", 6 | "scripts": { 7 | "test": "echo \"Error: no test specified\" && exit 1" 8 | }, 9 | "keywords": [], 10 | "author": "", 11 | "license": "ISC", 12 | "dependencies": { 13 | "@types/pg": "^8.11.0", 14 | "pg": "^8.11.3" 15 | } 16 | } 17 | -------------------------------------------------------------------------------- /week-10/Postgres/SimpleNodeJsApp/src/GetData.ts: -------------------------------------------------------------------------------- 1 | import { Client } from "pg"; 2 | 3 | // Async function to fetch user data from the database given an email 4 | async function getUser(email: string) { 5 | const client = new Client({ 6 | connectionString: 7 | "postgresql://junaidcom0065:MCm6UHWh1aAr@ep-mute-resonance-99602592.us-east-2.aws.neon.tech/test?sslmode=require", 8 | }); 9 | 10 | try { 11 | await client.connect(); // Ensure client connection is established 12 | const query = "SELECT * FROM users WHERE email = $1"; 13 | const values = [email]; 14 | const result = await client.query(query, values); 15 | 16 | if (result.rows.length > 0) { 17 | console.log("User found:", result.rows[0]); // Output user data 18 | return result.rows[0]; // Return the user data 19 | } else { 20 | console.log("No user found with the given email."); 21 | return null; // Return null if no user was found 22 | } 23 | } catch (err) { 24 | console.error("Error during fetching user:", err); 25 | throw err; // Rethrow or handle error appropriately 26 | } finally { 27 | await client.end(); // Close the client connection 28 | } 29 | } 30 | 31 | // Example usage 32 | getUser("user1@example.com").catch(console.error); 33 | /* 34 | SELECT u.id u.username, a.city, a.pincode FROM users u JOIN addresses a ON u.id = a.user_id WHERE u.id = your_id 35 | */ 36 | -------------------------------------------------------------------------------- /week-10/Postgres/SimpleNodeJsApp/src/Insert.ts: -------------------------------------------------------------------------------- 1 | import { Client } from "pg"; 2 | 3 | const client = new Client({ 4 | connectionString: 5 | "postgresql://junaidcom0065:MCm6UHWh1aAr@ep-mute-resonance-99602592.us-east-2.aws.neon.tech/test?sslmode=require", 6 | }); 7 | 8 | async function insertInTable( 9 | username: string, 10 | email: string, 11 | password: string 12 | ) { 13 | try { 14 | await client.connect(); 15 | 16 | const insertQuery = 17 | "INSERT INTO USERS (username,email,password) VALUES ($1,$2,$3)"; 18 | 19 | const values = [username, email, password]; 20 | 21 | const res = await client.query(insertQuery, values); 22 | console.log("Insertion success: " + res); 23 | } catch (err) { 24 | console.error("Error during the insertion:", err); 25 | } finally { 26 | await client.end(); 27 | } 28 | } 29 | 30 | insertInTable("username2", "user2@example.com", "user_password2").catch( 31 | console.error 32 | ); 33 | -------------------------------------------------------------------------------- /week-10/Postgres/SimpleNodeJsApp/src/index.ts: -------------------------------------------------------------------------------- 1 | import { Client } from "pg"; 2 | 3 | const client = new Client({ 4 | connectionString: 5 | "postgresql://junaidcom0065:MCm6UHWh1aAr@ep-mute-resonance-99602592.us-east-2.aws.neon.tech/test?sslmode=require", 6 | }); 7 | 8 | async function createUserTable() { 9 | await client.connect(); 10 | const result = await client.query(`CREATE TABLE users ( 11 | id SERIAL PRIMARY KEY, 12 | username VARCHAR(50) UNIQUE NOT NULL, 13 | email VARCHAR(255) UNIQUE NOT NULL, 14 | password VARCHAR(255) NOT NULL, 15 | created_at TIMESTAMP WITH TIME ZONE DEFAULT CURRENT_TIMESTAMP 16 | );`); 17 | console.log(result); 18 | } 19 | 20 | createUserTable(); 21 | -------------------------------------------------------------------------------- /week-10/Prisma/simpleTodo/.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | # Keep environment variables out of version control 3 | .env 4 | -------------------------------------------------------------------------------- /week-10/Prisma/simpleTodo/dist/DeleteData.js: -------------------------------------------------------------------------------- 1 | "use strict"; 2 | var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) { 3 | function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); } 4 | return new (P || (P = Promise))(function (resolve, reject) { 5 | function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } } 6 | function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } } 7 | function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); } 8 | step((generator = generator.apply(thisArg, _arguments || [])).next()); 9 | }); 10 | }; 11 | Object.defineProperty(exports, "__esModule", { value: true }); 12 | const client_1 = require("@prisma/client"); 13 | const prisma = new client_1.PrismaClient(); 14 | function deleteData(email) { 15 | return __awaiter(this, void 0, void 0, function* () { 16 | const res = yield prisma.user.delete({ 17 | where: { email: email }, 18 | }); 19 | console.log(res); 20 | }); 21 | } 22 | deleteData("junaid@gamil.com"); 23 | -------------------------------------------------------------------------------- /week-10/Prisma/simpleTodo/dist/GetData.js: -------------------------------------------------------------------------------- 1 | "use strict"; 2 | var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) { 3 | function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); } 4 | return new (P || (P = Promise))(function (resolve, reject) { 5 | function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } } 6 | function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } } 7 | function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); } 8 | step((generator = generator.apply(thisArg, _arguments || [])).next()); 9 | }); 10 | }; 11 | Object.defineProperty(exports, "__esModule", { value: true }); 12 | const client_1 = require("@prisma/client"); 13 | const prisma = new client_1.PrismaClient(); 14 | function getData(email) { 15 | return __awaiter(this, void 0, void 0, function* () { 16 | const res = yield prisma.user.findFirst({ 17 | where: { email: email }, 18 | select: { 19 | id: true, 20 | email: true, 21 | firstName: true, 22 | lastName: true, 23 | }, 24 | }); 25 | console.log(res); 26 | }); 27 | } 28 | getData("junaid@gamil.com"); 29 | -------------------------------------------------------------------------------- /week-10/Prisma/simpleTodo/dist/UpdateQuery.js: -------------------------------------------------------------------------------- 1 | "use strict"; 2 | var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) { 3 | function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); } 4 | return new (P || (P = Promise))(function (resolve, reject) { 5 | function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } } 6 | function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } } 7 | function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); } 8 | step((generator = generator.apply(thisArg, _arguments || [])).next()); 9 | }); 10 | }; 11 | Object.defineProperty(exports, "__esModule", { value: true }); 12 | const client_1 = require("@prisma/client"); 13 | const prisma = new client_1.PrismaClient(); 14 | function UpdateData(email, firstName, lastName) { 15 | return __awaiter(this, void 0, void 0, function* () { 16 | const res = yield prisma.user.update({ 17 | where: { 18 | email: email, 19 | }, 20 | data: { 21 | firstName, 22 | lastName, 23 | }, 24 | }); 25 | console.log(res); 26 | }); 27 | } 28 | UpdateData("junaid@gamil.com", "Ahmed", "Junaid"); 29 | -------------------------------------------------------------------------------- /week-10/Prisma/simpleTodo/dist/index.js: -------------------------------------------------------------------------------- 1 | "use strict"; 2 | var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) { 3 | function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); } 4 | return new (P || (P = Promise))(function (resolve, reject) { 5 | function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } } 6 | function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } } 7 | function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); } 8 | step((generator = generator.apply(thisArg, _arguments || [])).next()); 9 | }); 10 | }; 11 | Object.defineProperty(exports, "__esModule", { value: true }); 12 | const client_1 = require("@prisma/client"); 13 | const prisma = new client_1.PrismaClient(); 14 | function insertData(email, password, firstName, lastName) { 15 | return __awaiter(this, void 0, void 0, function* () { 16 | const res = yield prisma.user.create({ 17 | data: { 18 | email, 19 | password, 20 | firstName, 21 | lastName, 22 | }, 23 | }); 24 | console.log(res); 25 | }); 26 | } 27 | insertData("ahmed@gamil.com", "1234", "Ahmeddd", "A"); 28 | -------------------------------------------------------------------------------- /week-10/Prisma/simpleTodo/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "simpletodo", 3 | "version": "1.0.0", 4 | "description": "", 5 | "main": "index.js", 6 | "scripts": { 7 | "test": "echo \"Error: no test specified\" && exit 1" 8 | }, 9 | "keywords": [], 10 | "author": "", 11 | "license": "ISC", 12 | "devDependencies": { 13 | "@types/node": "^20.11.17", 14 | "prisma": "^5.9.1", 15 | "ts-node": "^10.9.2", 16 | "typescript": "^5.3.3" 17 | }, 18 | "dependencies": { 19 | "@prisma/client": "^5.9.1" 20 | } 21 | } 22 | -------------------------------------------------------------------------------- /week-10/Prisma/simpleTodo/prisma/migrations/20240211055318_userand_todos_added/migration.sql: -------------------------------------------------------------------------------- 1 | -- CreateTable 2 | CREATE TABLE "User" ( 3 | "id" SERIAL NOT NULL, 4 | "email" TEXT NOT NULL, 5 | "password" TEXT NOT NULL, 6 | "firstName" TEXT, 7 | "lastName" TEXT, 8 | 9 | CONSTRAINT "User_pkey" PRIMARY KEY ("id") 10 | ); 11 | 12 | -- CreateTable 13 | CREATE TABLE "Todos" ( 14 | "id" SERIAL NOT NULL, 15 | "title" TEXT NOT NULL, 16 | "done" BOOLEAN NOT NULL DEFAULT false, 17 | "description" TEXT, 18 | "userId" INTEGER NOT NULL, 19 | 20 | CONSTRAINT "Todos_pkey" PRIMARY KEY ("id") 21 | ); 22 | 23 | -- CreateIndex 24 | CREATE UNIQUE INDEX "User_email_key" ON "User"("email"); 25 | -------------------------------------------------------------------------------- /week-10/Prisma/simpleTodo/prisma/migrations/migration_lock.toml: -------------------------------------------------------------------------------- 1 | # Please do not edit this file manually 2 | # It should be added in your version-control system (i.e. Git) 3 | provider = "postgresql" -------------------------------------------------------------------------------- /week-10/Prisma/simpleTodo/prisma/schema.prisma: -------------------------------------------------------------------------------- 1 | // This is your Prisma schema file, 2 | // learn more about it in the docs: https://pris.ly/d/prisma-schema 3 | 4 | generator client { 5 | provider = "prisma-client-js" 6 | } 7 | 8 | datasource db { 9 | provider = "postgresql" 10 | url = "postgresql://junaidcom0065:MCm6UHWh1aAr@ep-mute-resonance-99602592.us-east-2.aws.neon.tech/test?sslmode=require" 11 | } 12 | 13 | model User { 14 | id Int @id @default(autoincrement()) 15 | email String @unique 16 | password String 17 | firstName String? 18 | lastName String? 19 | } 20 | 21 | model Todos { 22 | id Int @id @default(autoincrement()) 23 | title String 24 | done Boolean @default(false) 25 | description String? 26 | userId Int 27 | } -------------------------------------------------------------------------------- /week-10/Prisma/simpleTodo/src/DeleteData.ts: -------------------------------------------------------------------------------- 1 | import { PrismaClient } from "@prisma/client"; 2 | 3 | const prisma = new PrismaClient(); 4 | 5 | async function deleteData(email: string) { 6 | const res = await prisma.user.delete({ 7 | where: { email: email }, 8 | }); 9 | 10 | console.log(res); 11 | } 12 | 13 | deleteData("junaid@gamil.com"); 14 | -------------------------------------------------------------------------------- /week-10/Prisma/simpleTodo/src/GetData.ts: -------------------------------------------------------------------------------- 1 | import { PrismaClient } from "@prisma/client"; 2 | 3 | const prisma = new PrismaClient(); 4 | 5 | async function getData(email: string) { 6 | const res = await prisma.user.findFirst({ 7 | where: { email: email }, 8 | select: { 9 | id: true, 10 | email: true, 11 | firstName: true, 12 | lastName: true, 13 | }, 14 | }); 15 | 16 | console.log(res); 17 | } 18 | 19 | getData("junaid@gamil.com"); 20 | -------------------------------------------------------------------------------- /week-10/Prisma/simpleTodo/src/UpdateQuery.ts: -------------------------------------------------------------------------------- 1 | import { PrismaClient } from "@prisma/client"; 2 | 3 | const prisma = new PrismaClient(); 4 | 5 | async function UpdateData(email: string, firstName: string, lastName: string) { 6 | const res = await prisma.user.update({ 7 | where: { 8 | email: email, 9 | }, 10 | data: { 11 | firstName, 12 | lastName, 13 | }, 14 | }); 15 | console.log(res); 16 | } 17 | 18 | UpdateData("junaid@gamil.com", "Ahmed", "Junaid"); 19 | -------------------------------------------------------------------------------- /week-10/Prisma/simpleTodo/src/index.ts: -------------------------------------------------------------------------------- 1 | import { PrismaClient } from "@prisma/client"; 2 | 3 | const prisma = new PrismaClient(); 4 | 5 | async function insertData( 6 | email: string, 7 | password: string, 8 | firstName: string, 9 | lastName: string 10 | ) { 11 | const res = await prisma.user.create({ 12 | data: { 13 | email, 14 | password, 15 | firstName, 16 | lastName, 17 | }, 18 | }); 19 | 20 | console.log(res); 21 | } 22 | 23 | insertData("ahmed@gamil.com", "1234", "Ahmeddd", "A"); 24 | -------------------------------------------------------------------------------- /week-11/ServerlessBackends/AWS/.gitignore: -------------------------------------------------------------------------------- 1 | *.pem -------------------------------------------------------------------------------- /week-11/ServerlessBackends/hono-app/.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | dist 3 | .wrangler 4 | .dev.vars 5 | 6 | # Change them to your taste: 7 | package-lock.json 8 | yarn.lock 9 | pnpm-lock.yaml -------------------------------------------------------------------------------- /week-11/ServerlessBackends/hono-app/README.md: -------------------------------------------------------------------------------- 1 | ``` 2 | npm install 3 | npm run dev 4 | ``` 5 | 6 | ``` 7 | npm run deploy 8 | ``` 9 | -------------------------------------------------------------------------------- /week-11/ServerlessBackends/hono-app/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "scripts": { 3 | "dev": "wrangler dev src/index.ts", 4 | "deploy": "wrangler deploy --minify src/index.ts" 5 | }, 6 | "dependencies": { 7 | "hono": "^4.0.1" 8 | }, 9 | "devDependencies": { 10 | "@cloudflare/workers-types": "^4.20240129.0", 11 | "wrangler": "^3.25.0" 12 | } 13 | } 14 | -------------------------------------------------------------------------------- /week-11/ServerlessBackends/hono-app/src/index.ts: -------------------------------------------------------------------------------- 1 | import { Hono } from 'hono' 2 | 3 | const app = new Hono() 4 | 5 | app.get('/', (c) => { 6 | return c.text('Hello Hono!') 7 | }) 8 | 9 | export default app 10 | -------------------------------------------------------------------------------- /week-11/ServerlessBackends/hono-app/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "target": "ESNext", 4 | "module": "ESNext", 5 | "moduleResolution": "Bundler", 6 | "strict": true, 7 | "lib": [ 8 | "ESNext" 9 | ], 10 | "types": [ 11 | "@cloudflare/workers-types" 12 | ], 13 | "jsx": "react-jsx", 14 | "jsxImportSource": "hono/jsx" 15 | }, 16 | } -------------------------------------------------------------------------------- /week-11/ServerlessBackends/hono-app/wrangler.toml: -------------------------------------------------------------------------------- 1 | name = "hono-app" 2 | compatibility_date = "2023-12-01" 3 | 4 | # [vars] 5 | # MY_VARIABLE = "production_value" 6 | 7 | # [[kv_namespaces]] 8 | # binding = "MY_KV_NAMESPACE" 9 | # id = "xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx" 10 | 11 | # [[r2_buckets]] 12 | # binding = "MY_BUCKET" 13 | # bucket_name = "my-bucket" 14 | 15 | # [[d1_databases]] 16 | # binding = "DB" 17 | # database_name = "my-database" 18 | # database_id = "" 19 | -------------------------------------------------------------------------------- /week-11/ServerlessBackends/my-app/.editorconfig: -------------------------------------------------------------------------------- 1 | # http://editorconfig.org 2 | root = true 3 | 4 | [*] 5 | indent_style = tab 6 | tab_width = 2 7 | end_of_line = lf 8 | charset = utf-8 9 | trim_trailing_whitespace = true 10 | insert_final_newline = true 11 | 12 | [*.yml] 13 | indent_style = space 14 | -------------------------------------------------------------------------------- /week-11/ServerlessBackends/my-app/.gitignore: -------------------------------------------------------------------------------- 1 | # Logs 2 | 3 | logs 4 | _.log 5 | npm-debug.log_ 6 | yarn-debug.log* 7 | yarn-error.log* 8 | lerna-debug.log* 9 | .pnpm-debug.log* 10 | 11 | # Diagnostic reports (https://nodejs.org/api/report.html) 12 | 13 | report.[0-9]_.[0-9]_.[0-9]_.[0-9]_.json 14 | 15 | # Runtime data 16 | 17 | pids 18 | _.pid 19 | _.seed 20 | \*.pid.lock 21 | 22 | # Directory for instrumented libs generated by jscoverage/JSCover 23 | 24 | lib-cov 25 | 26 | # Coverage directory used by tools like istanbul 27 | 28 | coverage 29 | \*.lcov 30 | 31 | # nyc test coverage 32 | 33 | .nyc_output 34 | 35 | # Grunt intermediate storage (https://gruntjs.com/creating-plugins#storing-task-files) 36 | 37 | .grunt 38 | 39 | # Bower dependency directory (https://bower.io/) 40 | 41 | bower_components 42 | 43 | # node-waf configuration 44 | 45 | .lock-wscript 46 | 47 | # Compiled binary addons (https://nodejs.org/api/addons.html) 48 | 49 | build/Release 50 | 51 | # Dependency directories 52 | 53 | node_modules/ 54 | jspm_packages/ 55 | 56 | # Snowpack dependency directory (https://snowpack.dev/) 57 | 58 | web_modules/ 59 | 60 | # TypeScript cache 61 | 62 | \*.tsbuildinfo 63 | 64 | # Optional npm cache directory 65 | 66 | .npm 67 | 68 | # Optional eslint cache 69 | 70 | .eslintcache 71 | 72 | # Optional stylelint cache 73 | 74 | .stylelintcache 75 | 76 | # Microbundle cache 77 | 78 | .rpt2_cache/ 79 | .rts2_cache_cjs/ 80 | .rts2_cache_es/ 81 | .rts2_cache_umd/ 82 | 83 | # Optional REPL history 84 | 85 | .node_repl_history 86 | 87 | # Output of 'npm pack' 88 | 89 | \*.tgz 90 | 91 | # Yarn Integrity file 92 | 93 | .yarn-integrity 94 | 95 | # dotenv environment variable files 96 | 97 | .env 98 | .env.development.local 99 | .env.test.local 100 | .env.production.local 101 | .env.local 102 | 103 | # parcel-bundler cache (https://parceljs.org/) 104 | 105 | .cache 106 | .parcel-cache 107 | 108 | # Next.js build output 109 | 110 | .next 111 | out 112 | 113 | # Nuxt.js build / generate output 114 | 115 | .nuxt 116 | dist 117 | 118 | # Gatsby files 119 | 120 | .cache/ 121 | 122 | # Comment in the public line in if your project uses Gatsby and not Next.js 123 | 124 | # https://nextjs.org/blog/next-9-1#public-directory-support 125 | 126 | # public 127 | 128 | # vuepress build output 129 | 130 | .vuepress/dist 131 | 132 | # vuepress v2.x temp and cache directory 133 | 134 | .temp 135 | .cache 136 | 137 | # Docusaurus cache and generated files 138 | 139 | .docusaurus 140 | 141 | # Serverless directories 142 | 143 | .serverless/ 144 | 145 | # FuseBox cache 146 | 147 | .fusebox/ 148 | 149 | # DynamoDB Local files 150 | 151 | .dynamodb/ 152 | 153 | # TernJS port file 154 | 155 | .tern-port 156 | 157 | # Stores VSCode versions used for testing VSCode extensions 158 | 159 | .vscode-test 160 | 161 | # yarn v2 162 | 163 | .yarn/cache 164 | .yarn/unplugged 165 | .yarn/build-state.yml 166 | .yarn/install-state.gz 167 | .pnp.\* 168 | 169 | # wrangler project 170 | 171 | .dev.vars 172 | .wrangler/ 173 | -------------------------------------------------------------------------------- /week-11/ServerlessBackends/my-app/.prettierrc: -------------------------------------------------------------------------------- 1 | { 2 | "printWidth": 140, 3 | "singleQuote": true, 4 | "semi": true, 5 | "useTabs": true 6 | } 7 | -------------------------------------------------------------------------------- /week-11/ServerlessBackends/my-app/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "my-app", 3 | "version": "0.0.0", 4 | "private": true, 5 | "scripts": { 6 | "deploy": "wrangler deploy", 7 | "dev": "wrangler dev", 8 | "start": "wrangler dev" 9 | }, 10 | "devDependencies": { 11 | "@cloudflare/workers-types": "^4.20240208.0", 12 | "typescript": "^5.0.4", 13 | "wrangler": "^3.0.0" 14 | } 15 | } 16 | -------------------------------------------------------------------------------- /week-11/ServerlessBackends/my-app/src/index.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * Welcome to Cloudflare Workers! This is your first worker. 3 | * 4 | * - Run `npm run dev` in your terminal to start a development server 5 | * - Open a browser tab at http://localhost:8787/ to see your worker in action 6 | * - Run `npm run deploy` to publish your worker 7 | * 8 | * Learn more at https://developers.cloudflare.com/workers/ 9 | */ 10 | 11 | export interface Env { 12 | // Example binding to KV. Learn more at https://developers.cloudflare.com/workers/runtime-apis/kv/ 13 | // MY_KV_NAMESPACE: KVNamespace; 14 | // 15 | // Example binding to Durable Object. Learn more at https://developers.cloudflare.com/workers/runtime-apis/durable-objects/ 16 | // MY_DURABLE_OBJECT: DurableObjectNamespace; 17 | // 18 | // Example binding to R2. Learn more at https://developers.cloudflare.com/workers/runtime-apis/r2/ 19 | // MY_BUCKET: R2Bucket; 20 | // 21 | // Example binding to a Service. Learn more at https://developers.cloudflare.com/workers/runtime-apis/service-bindings/ 22 | // MY_SERVICE: Fetcher; 23 | // 24 | // Example binding to a Queue. Learn more at https://developers.cloudflare.com/queues/javascript-apis/ 25 | // MY_QUEUE: Queue; 26 | } 27 | 28 | export default { 29 | async fetch(request: Request, env: Env, ctx: ExecutionContext): Promise { 30 | return Response.json({ 31 | message: 'you did not send a get request', 32 | }); 33 | }, 34 | }; 35 | -------------------------------------------------------------------------------- /week-11/ServerlessBackends/my-app/wrangler.toml: -------------------------------------------------------------------------------- 1 | name = "my-app" 2 | main = "src/index.ts" 3 | compatibility_date = "2024-02-08" 4 | 5 | # Variable bindings. These are arbitrary, plaintext strings (similar to environment variables) 6 | # Note: Use secrets to store sensitive data. 7 | # Docs: https://developers.cloudflare.com/workers/platform/environment-variables 8 | # [vars] 9 | # MY_VARIABLE = "production_value" 10 | 11 | # Bind a KV Namespace. Use KV as persistent storage for small key-value pairs. 12 | # Docs: https://developers.cloudflare.com/workers/runtime-apis/kv 13 | # [[kv_namespaces]] 14 | # binding = "MY_KV_NAMESPACE" 15 | # id = "xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx" 16 | 17 | # Bind an R2 Bucket. Use R2 to store arbitrarily large blobs of data, such as files. 18 | # Docs: https://developers.cloudflare.com/r2/api/workers/workers-api-usage/ 19 | # [[r2_buckets]] 20 | # binding = "MY_BUCKET" 21 | # bucket_name = "my-bucket" 22 | 23 | # Bind a Queue producer. Use this binding to schedule an arbitrary task that may be processed later by a Queue consumer. 24 | # Docs: https://developers.cloudflare.com/queues/get-started 25 | # [[queues.producers]] 26 | # binding = "MY_QUEUE" 27 | # queue = "my-queue" 28 | 29 | # Bind a Queue consumer. Queue Consumers can retrieve tasks scheduled by Producers to act on them. 30 | # Docs: https://developers.cloudflare.com/queues/get-started 31 | # [[queues.consumers]] 32 | # queue = "my-queue" 33 | 34 | # Bind another Worker service. Use this binding to call another Worker without network overhead. 35 | # Docs: https://developers.cloudflare.com/workers/platform/services 36 | # [[services]] 37 | # binding = "MY_SERVICE" 38 | # service = "my-service" 39 | 40 | # Bind a Durable Object. Durable objects are a scale-to-zero compute primitive based on the actor model. 41 | # Durable Objects can live for as long as needed. Use these when you need a long-running "server", such as in realtime apps. 42 | # Docs: https://developers.cloudflare.com/workers/runtime-apis/durable-objects 43 | # [[durable_objects.bindings]] 44 | # name = "MY_DURABLE_OBJECT" 45 | # class_name = "MyDurableObject" 46 | 47 | # Durable Object migrations. 48 | # Docs: https://developers.cloudflare.com/workers/learning/using-durable-objects#configure-durable-object-classes-with-migrations 49 | # [[migrations]] 50 | # tag = "v1" 51 | # new_classes = ["MyDurableObject"] 52 | -------------------------------------------------------------------------------- /week-14/backendinnextjs/.env: -------------------------------------------------------------------------------- 1 | # Environment variables declared in this file are automatically made available to Prisma. 2 | # See the documentation for more detail: https://pris.ly/d/prisma-schema#accessing-environment-variables-from-the-schema 3 | 4 | # Prisma supports the native connection string format for PostgreSQL, MySQL, SQLite, SQL Server, MongoDB and CockroachDB. 5 | # See the documentation for all the connection string options: https://pris.ly/d/connection-strings 6 | 7 | DATABASE_URL="postgresql://junaidcom0065:MCm6UHWh1aAr@ep-mute-resonance-99602592.us-east-2.aws.neon.tech/test?sslmode=require" -------------------------------------------------------------------------------- /week-14/backendinnextjs/.eslintrc.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "next/core-web-vitals" 3 | } 4 | -------------------------------------------------------------------------------- /week-14/backendinnextjs/.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | /.pnp 6 | .pnp.js 7 | .yarn/install-state.gz 8 | 9 | # testing 10 | /coverage 11 | 12 | # next.js 13 | /.next/ 14 | /out/ 15 | 16 | # production 17 | /build 18 | 19 | # misc 20 | .DS_Store 21 | *.pem 22 | 23 | # debug 24 | npm-debug.log* 25 | yarn-debug.log* 26 | yarn-error.log* 27 | 28 | # local env files 29 | .env*.local 30 | 31 | # vercel 32 | .vercel 33 | 34 | # typescript 35 | *.tsbuildinfo 36 | next-env.d.ts 37 | -------------------------------------------------------------------------------- /week-14/backendinnextjs/README.md: -------------------------------------------------------------------------------- 1 | This is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app). 2 | 3 | ## Getting Started 4 | 5 | First, run the development server: 6 | 7 | ```bash 8 | npm run dev 9 | # or 10 | yarn dev 11 | # or 12 | pnpm dev 13 | # or 14 | bun dev 15 | ``` 16 | 17 | Open [http://localhost:3000](http://localhost:3000) with your browser to see the result. 18 | 19 | You can start editing the page by modifying `app/page.tsx`. The page auto-updates as you edit the file. 20 | 21 | This project uses [`next/font`](https://nextjs.org/docs/basic-features/font-optimization) to automatically optimize and load Inter, a custom Google Font. 22 | 23 | ## Learn More 24 | 25 | To learn more about Next.js, take a look at the following resources: 26 | 27 | - [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API. 28 | - [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial. 29 | 30 | You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js/) - your feedback and contributions are welcome! 31 | 32 | ## Deploy on Vercel 33 | 34 | The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js. 35 | 36 | Check out our [Next.js deployment documentation](https://nextjs.org/docs/deployment) for more details. 37 | -------------------------------------------------------------------------------- /week-14/backendinnextjs/app/api/user/route.ts: -------------------------------------------------------------------------------- 1 | import { NextRequest } from "next/server"; 2 | import { PrismaClient } from "@prisma/client"; 3 | 4 | const client = new PrismaClient(); 5 | 6 | export function GET() { 7 | return Response.json({ 8 | email: "junaid@gmail.com", 9 | name: "Junaid", 10 | }); 11 | } 12 | 13 | export async function POST(req: NextRequest) { 14 | const body = await req.json(); 15 | 16 | await client.user.create({ 17 | data: { 18 | username: body.username, 19 | password: body.password, 20 | }, 21 | }); 22 | console.log(body); 23 | 24 | return Response.json({ 25 | msg: "Signup successfull", 26 | }); 27 | } 28 | -------------------------------------------------------------------------------- /week-14/backendinnextjs/app/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/junaidahmed-One/Cohort-in-class-coding/5a545c799251f07f8bd62f8957f9de5f4d1ba13f/week-14/backendinnextjs/app/favicon.ico -------------------------------------------------------------------------------- /week-14/backendinnextjs/app/globals.css: -------------------------------------------------------------------------------- 1 | @tailwind base; 2 | @tailwind components; 3 | @tailwind utilities; 4 | -------------------------------------------------------------------------------- /week-14/backendinnextjs/app/layout.tsx: -------------------------------------------------------------------------------- 1 | import type { Metadata } from "next"; 2 | import { Inter } from "next/font/google"; 3 | import "./globals.css"; 4 | 5 | const inter = Inter({ subsets: ["latin"] }); 6 | 7 | export const metadata: Metadata = { 8 | title: "Create Next App", 9 | description: "Generated by create next app", 10 | }; 11 | 12 | export default function RootLayout({ 13 | children, 14 | }: Readonly<{ 15 | children: React.ReactNode; 16 | }>) { 17 | return ( 18 | 19 | {children} 20 | 21 | ); 22 | } 23 | -------------------------------------------------------------------------------- /week-14/backendinnextjs/app/page.tsx: -------------------------------------------------------------------------------- 1 | import Image from "next/image"; 2 | import axios from "axios"; 3 | 4 | async function getData() { 5 | const response = await axios.get("http://localhost:3000/api/user"); 6 | return response.data; 7 | } 8 | export default async function Home() { 9 | const userData = await getData(); 10 | 11 | return
{userData?.name}
; 12 | } 13 | -------------------------------------------------------------------------------- /week-14/backendinnextjs/app/signup/page.tsx: -------------------------------------------------------------------------------- 1 | import { Signup } from "@/components/Signup"; 2 | 3 | export default function SignUpPage() { 4 | return ; 5 | } 6 | -------------------------------------------------------------------------------- /week-14/backendinnextjs/components/Signup.tsx: -------------------------------------------------------------------------------- 1 | "use client"; 2 | 3 | import axios from "axios"; 4 | import { ChangeEventHandler, useState } from "react"; 5 | import { useRouter } from "next/navigation"; 6 | 7 | export function Signup() { 8 | const [username, setUsername] = useState(""); 9 | const [password, setPassword] = useState(""); 10 | const router = useRouter(); 11 | 12 | return ( 13 |
14 |
15 | 19 |
20 |
21 |
22 | Sign up 23 |
24 |
25 |
26 | { 28 | setUsername(e.target.value); 29 | }} 30 | label="Username" 31 | placeholder="harkirat@gmail.com" 32 | /> 33 | { 35 | setPassword(e.target.value); 36 | }} 37 | label="Password" 38 | type={"password"} 39 | placeholder="123456" 40 | /> 41 | 57 |
58 |
59 | 60 |
61 |
62 | ); 63 | } 64 | 65 | function LabelledInput({ 66 | label, 67 | placeholder, 68 | type, 69 | onChange, 70 | }: LabelledInputType) { 71 | return ( 72 |
73 | 76 | 84 |
85 | ); 86 | } 87 | 88 | interface LabelledInputType { 89 | label: string; 90 | placeholder: string; 91 | type?: string; 92 | onChange: ChangeEventHandler; 93 | } 94 | -------------------------------------------------------------------------------- /week-14/backendinnextjs/next.config.mjs: -------------------------------------------------------------------------------- 1 | /** @type {import('next').NextConfig} */ 2 | const nextConfig = {}; 3 | 4 | export default nextConfig; 5 | -------------------------------------------------------------------------------- /week-14/backendinnextjs/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "backendinnextjs", 3 | "version": "0.1.0", 4 | "private": true, 5 | "scripts": { 6 | "dev": "next dev", 7 | "build": "next build", 8 | "start": "next start", 9 | "lint": "next lint" 10 | }, 11 | "dependencies": { 12 | "@prisma/client": "^5.10.2", 13 | "axios": "^1.6.7", 14 | "next": "14.1.1", 15 | "prisma": "^5.10.2", 16 | "react": "^18", 17 | "react-dom": "^18" 18 | }, 19 | "devDependencies": { 20 | "@types/node": "^20", 21 | "@types/react": "^18", 22 | "@types/react-dom": "^18", 23 | "autoprefixer": "^10.0.1", 24 | "eslint": "^8", 25 | "eslint-config-next": "14.1.1", 26 | "postcss": "^8", 27 | "tailwindcss": "^3.3.0", 28 | "typescript": "^5" 29 | } 30 | } 31 | -------------------------------------------------------------------------------- /week-14/backendinnextjs/postcss.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | plugins: { 3 | tailwindcss: {}, 4 | autoprefixer: {}, 5 | }, 6 | }; 7 | -------------------------------------------------------------------------------- /week-14/backendinnextjs/prisma/migrations/20240303150041_init_schema/migration.sql: -------------------------------------------------------------------------------- 1 | -- CreateTable 2 | CREATE TABLE "User" ( 3 | "id" SERIAL NOT NULL, 4 | "username" TEXT NOT NULL, 5 | "password" TEXT NOT NULL, 6 | 7 | CONSTRAINT "User_pkey" PRIMARY KEY ("id") 8 | ); 9 | -------------------------------------------------------------------------------- /week-14/backendinnextjs/prisma/migrations/migration_lock.toml: -------------------------------------------------------------------------------- 1 | # Please do not edit this file manually 2 | # It should be added in your version-control system (i.e. Git) 3 | provider = "postgresql" -------------------------------------------------------------------------------- /week-14/backendinnextjs/prisma/schema.prisma: -------------------------------------------------------------------------------- 1 | // This is your Prisma schema file, 2 | // learn more about it in the docs: https://pris.ly/d/prisma-schema 3 | 4 | // Looking for ways to speed up your queries, or scale easily with your serverless or edge functions? 5 | // Try Prisma Accelerate: https://pris.ly/cli/accelerate-init 6 | 7 | generator client { 8 | provider = "prisma-client-js" 9 | } 10 | 11 | datasource db { 12 | provider = "postgresql" 13 | url = env("DATABASE_URL") 14 | } 15 | 16 | 17 | model User { 18 | id Int @id @default(autoincrement()) 19 | username String 20 | password String 21 | } -------------------------------------------------------------------------------- /week-14/backendinnextjs/public/next.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /week-14/backendinnextjs/public/vercel.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /week-14/backendinnextjs/tailwind.config.ts: -------------------------------------------------------------------------------- 1 | import type { Config } from "tailwindcss"; 2 | 3 | const config: Config = { 4 | content: [ 5 | "./pages/**/*.{js,ts,jsx,tsx,mdx}", 6 | "./components/**/*.{js,ts,jsx,tsx,mdx}", 7 | "./app/**/*.{js,ts,jsx,tsx,mdx}", 8 | ], 9 | theme: { 10 | extend: { 11 | backgroundImage: { 12 | "gradient-radial": "radial-gradient(var(--tw-gradient-stops))", 13 | "gradient-conic": 14 | "conic-gradient(from 180deg at 50% 50%, var(--tw-gradient-stops))", 15 | }, 16 | }, 17 | }, 18 | plugins: [], 19 | }; 20 | export default config; 21 | -------------------------------------------------------------------------------- /week-14/backendinnextjs/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "lib": ["dom", "dom.iterable", "esnext"], 4 | "allowJs": true, 5 | "skipLibCheck": true, 6 | "strict": true, 7 | "noEmit": true, 8 | "esModuleInterop": true, 9 | "module": "esnext", 10 | "moduleResolution": "bundler", 11 | "resolveJsonModule": true, 12 | "isolatedModules": true, 13 | "jsx": "preserve", 14 | "incremental": true, 15 | "plugins": [ 16 | { 17 | "name": "next" 18 | } 19 | ], 20 | "paths": { 21 | "@/*": ["./*"] 22 | } 23 | }, 24 | "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"], 25 | "exclude": ["node_modules"] 26 | } 27 | -------------------------------------------------------------------------------- /week-14/simplenextapp/.eslintrc.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "next/core-web-vitals" 3 | } 4 | -------------------------------------------------------------------------------- /week-14/simplenextapp/.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | /.pnp 6 | .pnp.js 7 | .yarn/install-state.gz 8 | 9 | # testing 10 | /coverage 11 | 12 | # next.js 13 | /.next/ 14 | /out/ 15 | 16 | # production 17 | /build 18 | 19 | # misc 20 | .DS_Store 21 | *.pem 22 | 23 | # debug 24 | npm-debug.log* 25 | yarn-debug.log* 26 | yarn-error.log* 27 | 28 | # local env files 29 | .env*.local 30 | 31 | # vercel 32 | .vercel 33 | 34 | # typescript 35 | *.tsbuildinfo 36 | next-env.d.ts 37 | -------------------------------------------------------------------------------- /week-14/simplenextapp/README.md: -------------------------------------------------------------------------------- 1 | This is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app). 2 | 3 | ## Getting Started 4 | 5 | First, run the development server: 6 | 7 | ```bash 8 | npm run dev 9 | # or 10 | yarn dev 11 | # or 12 | pnpm dev 13 | # or 14 | bun dev 15 | ``` 16 | 17 | Open [http://localhost:3000](http://localhost:3000) with your browser to see the result. 18 | 19 | You can start editing the page by modifying `app/page.tsx`. The page auto-updates as you edit the file. 20 | 21 | This project uses [`next/font`](https://nextjs.org/docs/basic-features/font-optimization) to automatically optimize and load Inter, a custom Google Font. 22 | 23 | ## Learn More 24 | 25 | To learn more about Next.js, take a look at the following resources: 26 | 27 | - [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API. 28 | - [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial. 29 | 30 | You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js/) - your feedback and contributions are welcome! 31 | 32 | ## Deploy on Vercel 33 | 34 | The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js. 35 | 36 | Check out our [Next.js deployment documentation](https://nextjs.org/docs/deployment) for more details. 37 | -------------------------------------------------------------------------------- /week-14/simplenextapp/app/(auth)/layout.tsx: -------------------------------------------------------------------------------- 1 | export default function RootLayout({ 2 | children, 3 | }: Readonly<{ 4 | children: React.ReactNode; 5 | }>) { 6 | return ( 7 |
8 |
9 | 20% off for next few days!! 10 |
11 | {children} 12 |
13 | ); 14 | } 15 | -------------------------------------------------------------------------------- /week-14/simplenextapp/app/(auth)/signin/page.tsx: -------------------------------------------------------------------------------- 1 | import { SigninComponent } from "@/components/Signin"; 2 | 3 | export default function Signin() { 4 | return ( 5 |
6 | 7 |
8 | ); 9 | } 10 | -------------------------------------------------------------------------------- /week-14/simplenextapp/app/(auth)/signup/page.tsx: -------------------------------------------------------------------------------- 1 | export default function Home() { 2 | return
Sign Up
; 3 | } 4 | -------------------------------------------------------------------------------- /week-14/simplenextapp/app/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/junaidahmed-One/Cohort-in-class-coding/5a545c799251f07f8bd62f8957f9de5f4d1ba13f/week-14/simplenextapp/app/favicon.ico -------------------------------------------------------------------------------- /week-14/simplenextapp/app/globals.css: -------------------------------------------------------------------------------- 1 | @tailwind base; 2 | @tailwind components; 3 | @tailwind utilities; 4 | -------------------------------------------------------------------------------- /week-14/simplenextapp/app/layout.tsx: -------------------------------------------------------------------------------- 1 | import type { Metadata } from "next"; 2 | import { Inter } from "next/font/google"; 3 | import "./globals.css"; 4 | 5 | const inter = Inter({ subsets: ["latin"] }); 6 | 7 | export const metadata: Metadata = { 8 | title: "Simple Next App", 9 | description: "Generated by create next app", 10 | }; 11 | 12 | export default function RootLayout({ 13 | children, 14 | }: Readonly<{ 15 | children: React.ReactNode; 16 | }>) { 17 | return ( 18 | 19 | {children} 20 | 21 | ); 22 | } 23 | -------------------------------------------------------------------------------- /week-14/simplenextapp/app/page.tsx: -------------------------------------------------------------------------------- 1 | export default function Home() { 2 | return
Hi There
; 3 | } 4 | -------------------------------------------------------------------------------- /week-14/simplenextapp/components/Signin.tsx: -------------------------------------------------------------------------------- 1 | import { SignupButtonComponent } from "./SignupButton"; 2 | 3 | import axios from "axios"; 4 | 5 | async function getData() { 6 | const response = await axios.get( 7 | "https://week-13-offline.kirattechnologies.workers.dev/api/v1/user/details" 8 | ); 9 | return response.data; 10 | } 11 | 12 | export async function SigninComponent() { 13 | const user = await getData(); 14 | return ( 15 |
16 |
17 | 21 |
22 | Hi {user.name} seems like you are already logged in!.. 23 |
24 |
25 | Sign in 26 |
27 |
28 |
29 | 33 | 38 | 39 |
40 |
41 | 42 |
43 |
44 | ); 45 | } 46 | 47 | interface LabelledInputType { 48 | label: string; 49 | placeholder: string; 50 | type?: string; 51 | } 52 | 53 | function LabelledInput({ label, placeholder, type }: LabelledInputType) { 54 | return ( 55 |
56 | 59 | 66 |
67 | ); 68 | } 69 | -------------------------------------------------------------------------------- /week-14/simplenextapp/components/SignupButton.tsx: -------------------------------------------------------------------------------- 1 | "use client"; 2 | 3 | export function SignupButtonComponent() { 4 | return ( 5 |
6 | 15 |
16 | ); 17 | } 18 | -------------------------------------------------------------------------------- /week-14/simplenextapp/next.config.mjs: -------------------------------------------------------------------------------- 1 | /** @type {import('next').NextConfig} */ 2 | const nextConfig = {}; 3 | 4 | export default nextConfig; 5 | -------------------------------------------------------------------------------- /week-14/simplenextapp/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "simplenextapp", 3 | "version": "0.1.0", 4 | "private": true, 5 | "scripts": { 6 | "dev": "next dev", 7 | "build": "next build", 8 | "start": "next start", 9 | "lint": "next lint" 10 | }, 11 | "dependencies": { 12 | "axios": "^1.6.7", 13 | "axois": "^0.0.1-security", 14 | "next": "14.1.1", 15 | "react": "^18", 16 | "react-dom": "^18" 17 | }, 18 | "devDependencies": { 19 | "@types/node": "^20", 20 | "@types/react": "^18", 21 | "@types/react-dom": "^18", 22 | "autoprefixer": "^10.0.1", 23 | "eslint": "^8", 24 | "eslint-config-next": "14.1.1", 25 | "postcss": "^8", 26 | "tailwindcss": "^3.3.0", 27 | "typescript": "^5" 28 | } 29 | } 30 | -------------------------------------------------------------------------------- /week-14/simplenextapp/postcss.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | plugins: { 3 | tailwindcss: {}, 4 | autoprefixer: {}, 5 | }, 6 | }; 7 | -------------------------------------------------------------------------------- /week-14/simplenextapp/public/next.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /week-14/simplenextapp/public/vercel.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /week-14/simplenextapp/tailwind.config.ts: -------------------------------------------------------------------------------- 1 | import type { Config } from "tailwindcss"; 2 | 3 | const config: Config = { 4 | content: [ 5 | "./pages/**/*.{js,ts,jsx,tsx,mdx}", 6 | "./components/**/*.{js,ts,jsx,tsx,mdx}", 7 | "./app/**/*.{js,ts,jsx,tsx,mdx}", 8 | ], 9 | theme: { 10 | extend: { 11 | backgroundImage: { 12 | "gradient-radial": "radial-gradient(var(--tw-gradient-stops))", 13 | "gradient-conic": 14 | "conic-gradient(from 180deg at 50% 50%, var(--tw-gradient-stops))", 15 | }, 16 | }, 17 | }, 18 | plugins: [], 19 | }; 20 | export default config; 21 | -------------------------------------------------------------------------------- /week-14/simplenextapp/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "lib": ["dom", "dom.iterable", "esnext"], 4 | "allowJs": true, 5 | "skipLibCheck": true, 6 | "strict": true, 7 | "noEmit": true, 8 | "esModuleInterop": true, 9 | "module": "esnext", 10 | "moduleResolution": "bundler", 11 | "resolveJsonModule": true, 12 | "isolatedModules": true, 13 | "jsx": "preserve", 14 | "incremental": true, 15 | "plugins": [ 16 | { 17 | "name": "next" 18 | } 19 | ], 20 | "paths": { 21 | "@/*": ["./*"] 22 | } 23 | }, 24 | "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"], 25 | "exclude": ["node_modules"] 26 | } 27 | -------------------------------------------------------------------------------- /week-19/WebSockets/client-side-websocket/.gitignore: -------------------------------------------------------------------------------- 1 | # Logs 2 | logs 3 | *.log 4 | npm-debug.log* 5 | yarn-debug.log* 6 | yarn-error.log* 7 | pnpm-debug.log* 8 | lerna-debug.log* 9 | 10 | node_modules 11 | dist 12 | dist-ssr 13 | *.local 14 | 15 | # Editor directories and files 16 | .vscode/* 17 | !.vscode/extensions.json 18 | .idea 19 | .DS_Store 20 | *.suo 21 | *.ntvs* 22 | *.njsproj 23 | *.sln 24 | *.sw? 25 | -------------------------------------------------------------------------------- /week-19/WebSockets/client-side-websocket/README.md: -------------------------------------------------------------------------------- 1 | # React + TypeScript + Vite 2 | 3 | This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules. 4 | 5 | Currently, two official plugins are available: 6 | 7 | - [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react/README.md) uses [Babel](https://babeljs.io/) for Fast Refresh 8 | - [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh 9 | 10 | ## Expanding the ESLint configuration 11 | 12 | If you are developing a production application, we recommend updating the configuration to enable type aware lint rules: 13 | 14 | - Configure the top-level `parserOptions` property like this: 15 | 16 | ```js 17 | export default tseslint.config({ 18 | languageOptions: { 19 | // other options... 20 | parserOptions: { 21 | project: ['./tsconfig.node.json', './tsconfig.app.json'], 22 | tsconfigRootDir: import.meta.dirname, 23 | }, 24 | }, 25 | }) 26 | ``` 27 | 28 | - Replace `tseslint.configs.recommended` to `tseslint.configs.recommendedTypeChecked` or `tseslint.configs.strictTypeChecked` 29 | - Optionally add `...tseslint.configs.stylisticTypeChecked` 30 | - Install [eslint-plugin-react](https://github.com/jsx-eslint/eslint-plugin-react) and update the config: 31 | 32 | ```js 33 | // eslint.config.js 34 | import react from 'eslint-plugin-react' 35 | 36 | export default tseslint.config({ 37 | // Set the react version 38 | settings: { react: { version: '18.3' } }, 39 | plugins: { 40 | // Add the react plugin 41 | react, 42 | }, 43 | rules: { 44 | // other rules... 45 | // Enable its recommended rules 46 | ...react.configs.recommended.rules, 47 | ...react.configs['jsx-runtime'].rules, 48 | }, 49 | }) 50 | ``` 51 | -------------------------------------------------------------------------------- /week-19/WebSockets/client-side-websocket/eslint.config.js: -------------------------------------------------------------------------------- 1 | import js from '@eslint/js' 2 | import globals from 'globals' 3 | import reactHooks from 'eslint-plugin-react-hooks' 4 | import reactRefresh from 'eslint-plugin-react-refresh' 5 | import tseslint from 'typescript-eslint' 6 | 7 | export default tseslint.config( 8 | { ignores: ['dist'] }, 9 | { 10 | extends: [js.configs.recommended, ...tseslint.configs.recommended], 11 | files: ['**/*.{ts,tsx}'], 12 | languageOptions: { 13 | ecmaVersion: 2020, 14 | globals: globals.browser, 15 | }, 16 | plugins: { 17 | 'react-hooks': reactHooks, 18 | 'react-refresh': reactRefresh, 19 | }, 20 | rules: { 21 | ...reactHooks.configs.recommended.rules, 22 | 'react-refresh/only-export-components': [ 23 | 'warn', 24 | { allowConstantExport: true }, 25 | ], 26 | }, 27 | }, 28 | ) 29 | -------------------------------------------------------------------------------- /week-19/WebSockets/client-side-websocket/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Vite + React + TS 8 | 9 | 10 |
11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /week-19/WebSockets/client-side-websocket/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "client-side-websocket", 3 | "private": true, 4 | "version": "0.0.0", 5 | "type": "module", 6 | "scripts": { 7 | "dev": "vite", 8 | "build": "tsc -b && vite build", 9 | "lint": "eslint .", 10 | "preview": "vite preview" 11 | }, 12 | "dependencies": { 13 | "react": "^18.3.1", 14 | "react-dom": "^18.3.1" 15 | }, 16 | "devDependencies": { 17 | "@eslint/js": "^9.9.0", 18 | "@types/react": "^18.3.3", 19 | "@types/react-dom": "^18.3.0", 20 | "@vitejs/plugin-react": "^4.3.1", 21 | "eslint": "^9.9.0", 22 | "eslint-plugin-react-hooks": "^5.1.0-rc.0", 23 | "eslint-plugin-react-refresh": "^0.4.9", 24 | "globals": "^15.9.0", 25 | "typescript": "^5.5.3", 26 | "typescript-eslint": "^8.0.1", 27 | "vite": "^5.4.1" 28 | } 29 | } 30 | -------------------------------------------------------------------------------- /week-19/WebSockets/client-side-websocket/public/vite.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /week-19/WebSockets/client-side-websocket/src/App.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/junaidahmed-One/Cohort-in-class-coding/5a545c799251f07f8bd62f8957f9de5f4d1ba13f/week-19/WebSockets/client-side-websocket/src/App.css -------------------------------------------------------------------------------- /week-19/WebSockets/client-side-websocket/src/App.tsx: -------------------------------------------------------------------------------- 1 | import { useEffect, useState } from "react"; 2 | import "./App.css"; 3 | 4 | function App() { 5 | const [socket, setSocket] = useState(null); 6 | const [latestMessage, setLatestMessage] = useState(""); 7 | const [message, setMessage] = useState(""); 8 | 9 | useEffect(() => { 10 | const soc = new WebSocket("ws://localhost:8080"); 11 | 12 | soc.onopen = () => { 13 | console.log("Connected"); 14 | setSocket(soc); 15 | }; 16 | 17 | soc.onmessage = (message) => { 18 | console.log("Received message : ", message.data); 19 | setLatestMessage(message.data); 20 | }; 21 | 22 | return () => { 23 | socket?.close(); 24 | }; 25 | }, []); 26 | 27 | if (!socket) { 28 | return
Connecting to a socket server ...
; 29 | } 30 | 31 | return ( 32 |
33 | { 38 | setMessage(e.target.value); 39 | }} 40 | /> 41 | 49 | {latestMessage} 50 |
51 | ); 52 | } 53 | 54 | export default App; 55 | -------------------------------------------------------------------------------- /week-19/WebSockets/client-side-websocket/src/index.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/junaidahmed-One/Cohort-in-class-coding/5a545c799251f07f8bd62f8957f9de5f4d1ba13f/week-19/WebSockets/client-side-websocket/src/index.css -------------------------------------------------------------------------------- /week-19/WebSockets/client-side-websocket/src/main.tsx: -------------------------------------------------------------------------------- 1 | import { StrictMode } from 'react' 2 | import { createRoot } from 'react-dom/client' 3 | import App from './App.tsx' 4 | import './index.css' 5 | 6 | createRoot(document.getElementById('root')!).render( 7 | 8 | 9 | , 10 | ) 11 | -------------------------------------------------------------------------------- /week-19/WebSockets/client-side-websocket/src/vite-env.d.ts: -------------------------------------------------------------------------------- 1 | /// 2 | -------------------------------------------------------------------------------- /week-19/WebSockets/client-side-websocket/tsconfig.app.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "target": "ES2020", 4 | "useDefineForClassFields": true, 5 | "lib": ["ES2020", "DOM", "DOM.Iterable"], 6 | "module": "ESNext", 7 | "skipLibCheck": true, 8 | 9 | /* Bundler mode */ 10 | "moduleResolution": "bundler", 11 | "allowImportingTsExtensions": true, 12 | "isolatedModules": true, 13 | "moduleDetection": "force", 14 | "noEmit": true, 15 | "jsx": "react-jsx", 16 | 17 | /* Linting */ 18 | "strict": true, 19 | "noUnusedLocals": true, 20 | "noUnusedParameters": true, 21 | "noFallthroughCasesInSwitch": true 22 | }, 23 | "include": ["src"] 24 | } 25 | -------------------------------------------------------------------------------- /week-19/WebSockets/client-side-websocket/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "files": [], 3 | "references": [ 4 | { "path": "./tsconfig.app.json" }, 5 | { "path": "./tsconfig.node.json" } 6 | ] 7 | } 8 | -------------------------------------------------------------------------------- /week-19/WebSockets/client-side-websocket/tsconfig.node.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "target": "ES2022", 4 | "lib": ["ES2023"], 5 | "module": "ESNext", 6 | "skipLibCheck": true, 7 | 8 | /* Bundler mode */ 9 | "moduleResolution": "bundler", 10 | "allowImportingTsExtensions": true, 11 | "isolatedModules": true, 12 | "moduleDetection": "force", 13 | "noEmit": true, 14 | 15 | /* Linting */ 16 | "strict": true, 17 | "noUnusedLocals": true, 18 | "noUnusedParameters": true, 19 | "noFallthroughCasesInSwitch": true 20 | }, 21 | "include": ["vite.config.ts"] 22 | } 23 | -------------------------------------------------------------------------------- /week-19/WebSockets/client-side-websocket/vite.config.ts: -------------------------------------------------------------------------------- 1 | import { defineConfig } from 'vite' 2 | import react from '@vitejs/plugin-react' 3 | 4 | // https://vitejs.dev/config/ 5 | export default defineConfig({ 6 | plugins: [react()], 7 | }) 8 | -------------------------------------------------------------------------------- /week-19/WebSockets/ws-hello-world/.gitignore: -------------------------------------------------------------------------------- 1 | /node_modules 2 | /dist -------------------------------------------------------------------------------- /week-19/WebSockets/ws-hello-world/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "ws-hello-world", 3 | "version": "1.0.0", 4 | "description": "", 5 | "main": "index.js", 6 | "scripts": { 7 | "test": "echo \"Error: no test specified\" && exit 1" 8 | }, 9 | "keywords": [], 10 | "author": "", 11 | "license": "ISC", 12 | "dependencies": { 13 | "@types/express": "^4.17.21", 14 | "@types/ws": "^8.5.10", 15 | "express": "^4.19.2", 16 | "ws": "^8.16.0" 17 | } 18 | } 19 | -------------------------------------------------------------------------------- /week-19/WebSockets/ws-hello-world/src/index.ts: -------------------------------------------------------------------------------- 1 | import express from "express"; 2 | import { WebSocketServer, WebSocket } from "ws"; 3 | 4 | const app = express(); 5 | const httpServer = app.listen(8080, () => { 6 | console.log("Started on port 8080"); 7 | }); 8 | 9 | const wss = new WebSocketServer({ server: httpServer }); 10 | 11 | console.log(wss); 12 | wss.on("connection", function connection(ws) { 13 | ws.on("error", (err) => console.error(err)); 14 | ws.on("message", function message(data, isBinary) { 15 | wss.clients.forEach(function each(client) { 16 | if (client.readyState === WebSocket.OPEN) { 17 | client.send(data, { binary: isBinary }); 18 | } 19 | }); 20 | }); 21 | 22 | ws.send("Hello! Message From Server!!"); 23 | }); 24 | -------------------------------------------------------------------------------- /week-19/redisQueuesPubSubs/express-backend/.gitignore: -------------------------------------------------------------------------------- 1 | /dist 2 | /node_modules -------------------------------------------------------------------------------- /week-19/redisQueuesPubSubs/express-backend/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "express-backend", 3 | "version": "1.0.0", 4 | "description": "", 5 | "main": "index.js", 6 | "scripts": { 7 | "test": "echo \"Error: no test specified\" && exit 1" 8 | }, 9 | "keywords": [], 10 | "author": "", 11 | "license": "ISC", 12 | "dependencies": { 13 | "@types/express": "^4.17.21", 14 | "express": "^4.19.2", 15 | "redis": "^4.6.15" 16 | } 17 | } 18 | -------------------------------------------------------------------------------- /week-19/redisQueuesPubSubs/express-backend/src/index.ts: -------------------------------------------------------------------------------- 1 | import express from "express"; 2 | 3 | import { createClient } from "redis"; 4 | 5 | const app = express(); 6 | app.use(express.json()); 7 | const client = createClient(); 8 | 9 | app.post("/submit", async (req, res) => { 10 | const userId = req.body.userId; 11 | const problemId = req.body.problemId; 12 | const language = req.body.language; 13 | 14 | try { 15 | await client.LPUSH( 16 | "problems", 17 | JSON.stringify({ userId, problemId, language }) 18 | ); 19 | console.log(req.body); 20 | res.status(201).json({ message: "Submission received!" }); 21 | } catch (error) { 22 | console.error("Redis error: ", error); 23 | res.status(500).send("Failed to store submission."); 24 | } 25 | }); 26 | 27 | async function startServer() { 28 | try { 29 | await client.connect(); 30 | console.log("Connected to redis"); 31 | 32 | app.listen(3000, () => { 33 | console.log("Started server on PORT 3000"); 34 | }); 35 | } catch (error) { 36 | console.log("Failed to connect to redis"); 37 | } 38 | } 39 | 40 | startServer(); 41 | -------------------------------------------------------------------------------- /week-19/redisQueuesPubSubs/worker/.gitignore: -------------------------------------------------------------------------------- 1 | /dist 2 | /node_modules -------------------------------------------------------------------------------- /week-19/redisQueuesPubSubs/worker/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "worker", 3 | "version": "1.0.0", 4 | "description": "", 5 | "main": "index.js", 6 | "scripts": { 7 | "test": "echo \"Error: no test specified\" && exit 1" 8 | }, 9 | "keywords": [], 10 | "author": "", 11 | "license": "ISC", 12 | "dependencies": { 13 | "redis": "^4.6.15" 14 | } 15 | } 16 | -------------------------------------------------------------------------------- /week-19/redisQueuesPubSubs/worker/src/index.ts: -------------------------------------------------------------------------------- 1 | import { createClient } from "redis"; 2 | 3 | const client = createClient(); 4 | 5 | async function popfromQueue() { 6 | try { 7 | await client.connect(); 8 | while (1) { 9 | const response = await client.brPop("problems", 0); 10 | console.log(response); 11 | //processing the request 12 | await new Promise((resolve) => setTimeout(resolve, 1000)); 13 | 14 | console.log("Processed user submisions"); 15 | } 16 | } catch (error) { 17 | console.error(error); 18 | } 19 | } 20 | 21 | popfromQueue(); 22 | -------------------------------------------------------------------------------- /week-5/componentStateStyleCounter.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Document 7 | 8 | 9 |
10 | 35 | 36 | 37 | -------------------------------------------------------------------------------- /week-5/new_year_todo_app/README.md: -------------------------------------------------------------------------------- 1 | ## Todo Application 2 | 3 | This project contains simple application 4 | It has the following features - 5 | 6 | - Anyone can create a todo 7 | - Anyone can see thier existing todos 8 | - Anyone can mark a todo as done 9 | -------------------------------------------------------------------------------- /week-5/new_year_todo_app/backend/.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | mongoDetails.js -------------------------------------------------------------------------------- /week-5/new_year_todo_app/backend/dbSchema.js: -------------------------------------------------------------------------------- 1 | const mongoose = require("mongoose"); 2 | const config = require("../backend/mongoDetails"); 3 | mongoose.connect(config.connection); 4 | 5 | const todoSchema = mongoose.Schema({ 6 | id: Number, 7 | title: String, 8 | description: String, 9 | completed: Boolean, 10 | }); 11 | 12 | const todo = mongoose.model("todos", todoSchema); 13 | 14 | module.exports = { 15 | todo, 16 | }; 17 | -------------------------------------------------------------------------------- /week-5/new_year_todo_app/backend/index.js: -------------------------------------------------------------------------------- 1 | const express = require("express"); 2 | const { createTodo, updateTodo } = require("./types"); 3 | const { todo } = require("./dbSchema"); 4 | const cors = require("cors"); 5 | const app = express(); 6 | 7 | app.use(express.json()); 8 | app.use(cors()); 9 | app.post("/todo", function (req, res) { 10 | const todoBody = req.body; 11 | const parsedBody = createTodo.safeParse(todoBody); 12 | 13 | if (!parsedBody.success) { 14 | res.status(411).json({ 15 | message: "Wrong inputs!", 16 | }); 17 | return; 18 | } 19 | todo.create({ 20 | title: todoBody.title, 21 | description: todoBody.description, 22 | completed: false, 23 | }); 24 | 25 | res.status(201).json({ 26 | message: "Todo created", 27 | }); 28 | }); 29 | 30 | app.get("/todos", async function (req, res) { 31 | const allTodos = await todo.find({}); 32 | res.json({ 33 | todos: allTodos, 34 | }); 35 | }); 36 | 37 | app.put("/completed", async function (req, res) { 38 | const todoBody = req.body; 39 | const parsedBody = updateTodo.safeParse(todoBody); 40 | 41 | if (!parsedBody.success) { 42 | res.status(411).json({ 43 | message: "Wrong inputs!", 44 | }); 45 | return; 46 | } 47 | 48 | await todo.update( 49 | { 50 | _id: req.body.id, 51 | }, 52 | { 53 | completed: true, 54 | } 55 | ); 56 | }); 57 | 58 | app.listen(3000, () => { 59 | console.log("Server running..."); 60 | }); 61 | -------------------------------------------------------------------------------- /week-5/new_year_todo_app/backend/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "todo-backend", 3 | "version": "1.0.0", 4 | "description": "This is simple todo application", 5 | "main": "index.js", 6 | "scripts": { 7 | "test": "echo \"Error: no test specified\" && exit 1" 8 | }, 9 | "author": "Junaid", 10 | "license": "ISC", 11 | "dependencies": { 12 | "cors": "^2.8.5", 13 | "express": "^4.18.2", 14 | "mongoose": "^8.0.3", 15 | "zod": "^3.22.4" 16 | } 17 | } 18 | -------------------------------------------------------------------------------- /week-5/new_year_todo_app/backend/types.js: -------------------------------------------------------------------------------- 1 | const zod = require("zod"); 2 | 3 | const createTodo = zod.object({ 4 | title: zod.string(), 5 | description: zod.string(), 6 | }); 7 | 8 | const updateTodo = zod.object({ 9 | id: zod.string(), 10 | }); 11 | 12 | module.exports = { 13 | createTodo: createTodo, 14 | updateTodo: updateTodo, 15 | }; 16 | -------------------------------------------------------------------------------- /week-5/new_year_todo_app/frontend/.eslintrc.cjs: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | root: true, 3 | env: { browser: true, es2020: true }, 4 | extends: [ 5 | 'eslint:recommended', 6 | 'plugin:react/recommended', 7 | 'plugin:react/jsx-runtime', 8 | 'plugin:react-hooks/recommended', 9 | ], 10 | ignorePatterns: ['dist', '.eslintrc.cjs'], 11 | parserOptions: { ecmaVersion: 'latest', sourceType: 'module' }, 12 | settings: { react: { version: '18.2' } }, 13 | plugins: ['react-refresh'], 14 | rules: { 15 | 'react-refresh/only-export-components': [ 16 | 'warn', 17 | { allowConstantExport: true }, 18 | ], 19 | }, 20 | } 21 | -------------------------------------------------------------------------------- /week-5/new_year_todo_app/frontend/.gitignore: -------------------------------------------------------------------------------- 1 | # Logs 2 | logs 3 | *.log 4 | npm-debug.log* 5 | yarn-debug.log* 6 | yarn-error.log* 7 | pnpm-debug.log* 8 | lerna-debug.log* 9 | 10 | node_modules 11 | dist 12 | dist-ssr 13 | *.local 14 | 15 | # Editor directories and files 16 | .vscode/* 17 | !.vscode/extensions.json 18 | .idea 19 | .DS_Store 20 | *.suo 21 | *.ntvs* 22 | *.njsproj 23 | *.sln 24 | *.sw? 25 | -------------------------------------------------------------------------------- /week-5/new_year_todo_app/frontend/README.md: -------------------------------------------------------------------------------- 1 | # React + Vite 2 | 3 | This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules. 4 | 5 | Currently, two official plugins are available: 6 | 7 | - [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react/README.md) uses [Babel](https://babeljs.io/) for Fast Refresh 8 | - [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh 9 | -------------------------------------------------------------------------------- /week-5/new_year_todo_app/frontend/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Vite + React 8 | 9 | 10 |
11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /week-5/new_year_todo_app/frontend/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "frontend", 3 | "private": true, 4 | "version": "0.0.0", 5 | "type": "module", 6 | "scripts": { 7 | "dev": "vite", 8 | "build": "vite build", 9 | "lint": "eslint . --ext js,jsx --report-unused-disable-directives --max-warnings 0", 10 | "preview": "vite preview" 11 | }, 12 | "dependencies": { 13 | "react": "^18.2.0", 14 | "react-dom": "^18.2.0" 15 | }, 16 | "devDependencies": { 17 | "@types/react": "^18.2.43", 18 | "@types/react-dom": "^18.2.17", 19 | "@vitejs/plugin-react": "^4.2.1", 20 | "eslint": "^8.55.0", 21 | "eslint-plugin-react": "^7.33.2", 22 | "eslint-plugin-react-hooks": "^4.6.0", 23 | "eslint-plugin-react-refresh": "^0.4.5", 24 | "vite": "^5.0.8" 25 | } 26 | } 27 | -------------------------------------------------------------------------------- /week-5/new_year_todo_app/frontend/public/vite.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /week-5/new_year_todo_app/frontend/src/App.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/junaidahmed-One/Cohort-in-class-coding/5a545c799251f07f8bd62f8957f9de5f4d1ba13f/week-5/new_year_todo_app/frontend/src/App.css -------------------------------------------------------------------------------- /week-5/new_year_todo_app/frontend/src/App.jsx: -------------------------------------------------------------------------------- 1 | import { useEffect, useState } from "react"; 2 | import { CreateTodo } from "./components/CreateTodo"; 3 | import { Todos } from "./components/Todos"; 4 | 5 | function App() { 6 | const [todos, setTodos] = useState([]); 7 | 8 | useEffect(() => { 9 | setInterval(() => { 10 | fetch("http://localhost:3000/todos").then(async function (res) { 11 | const json = await res.json(); 12 | setTodos(json.todos); 13 | }); 14 | }, 10000); 15 | }, [todos]); 16 | return ( 17 |
18 | 19 | 20 |
21 | ); 22 | } 23 | 24 | export default App; 25 | -------------------------------------------------------------------------------- /week-5/new_year_todo_app/frontend/src/components/CreateTodo.jsx: -------------------------------------------------------------------------------- 1 | import { useState } from "react"; 2 | 3 | export function CreateTodo() { 4 | const [title, setTitle] = useState(""); 5 | const [description, setDescription] = useState(""); 6 | return ( 7 |
8 | 16 |

17 | 25 |

26 | 27 | 46 |
47 | ); 48 | } 49 | -------------------------------------------------------------------------------- /week-5/new_year_todo_app/frontend/src/components/Todos.jsx: -------------------------------------------------------------------------------- 1 | /* eslint-disable react/prop-types */ 2 | /* eslint-disable react/jsx-key */ 3 | export function Todos({ todos }) { 4 | return ( 5 |
6 | {todos.map(function (todo) { 7 | return ( 8 |
9 |

{todo.title}

10 |

{todo.description}

11 | 16 |
17 | ); 18 | })} 19 |
20 | ); 21 | } 22 | -------------------------------------------------------------------------------- /week-5/new_year_todo_app/frontend/src/index.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/junaidahmed-One/Cohort-in-class-coding/5a545c799251f07f8bd62f8957f9de5f4d1ba13f/week-5/new_year_todo_app/frontend/src/index.css -------------------------------------------------------------------------------- /week-5/new_year_todo_app/frontend/src/main.jsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import ReactDOM from "react-dom/client"; 3 | import App from "./App.jsx"; 4 | import "./index.css"; 5 | 6 | ReactDOM.createRoot(document.getElementById("root")).render(); 7 | -------------------------------------------------------------------------------- /week-5/new_year_todo_app/frontend/vite.config.js: -------------------------------------------------------------------------------- 1 | import { defineConfig } from 'vite' 2 | import react from '@vitejs/plugin-react' 3 | 4 | // https://vitejs.dev/config/ 5 | export default defineConfig({ 6 | plugins: [react()], 7 | }) 8 | -------------------------------------------------------------------------------- /week-5/react_foundation/.eslintrc.cjs: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | root: true, 3 | env: { browser: true, es2020: true }, 4 | extends: [ 5 | 'eslint:recommended', 6 | 'plugin:react/recommended', 7 | 'plugin:react/jsx-runtime', 8 | 'plugin:react-hooks/recommended', 9 | ], 10 | ignorePatterns: ['dist', '.eslintrc.cjs'], 11 | parserOptions: { ecmaVersion: 'latest', sourceType: 'module' }, 12 | settings: { react: { version: '18.2' } }, 13 | plugins: ['react-refresh'], 14 | rules: { 15 | 'react-refresh/only-export-components': [ 16 | 'warn', 17 | { allowConstantExport: true }, 18 | ], 19 | }, 20 | } 21 | -------------------------------------------------------------------------------- /week-5/react_foundation/.gitignore: -------------------------------------------------------------------------------- 1 | # Logs 2 | logs 3 | *.log 4 | npm-debug.log* 5 | yarn-debug.log* 6 | yarn-error.log* 7 | pnpm-debug.log* 8 | lerna-debug.log* 9 | 10 | node_modules 11 | dist 12 | dist-ssr 13 | *.local 14 | 15 | # Editor directories and files 16 | .vscode/* 17 | !.vscode/extensions.json 18 | .idea 19 | .DS_Store 20 | *.suo 21 | *.ntvs* 22 | *.njsproj 23 | *.sln 24 | *.sw? 25 | -------------------------------------------------------------------------------- /week-5/react_foundation/README.md: -------------------------------------------------------------------------------- 1 | # React + Vite 2 | 3 | This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules. 4 | 5 | Currently, two official plugins are available: 6 | 7 | - [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react/README.md) uses [Babel](https://babeljs.io/) for Fast Refresh 8 | - [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh 9 | -------------------------------------------------------------------------------- /week-5/react_foundation/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Vite + React 8 | 9 | 10 |
11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /week-5/react_foundation/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "react_foundation", 3 | "private": true, 4 | "version": "0.0.0", 5 | "type": "module", 6 | "scripts": { 7 | "dev": "vite", 8 | "build": "vite build", 9 | "lint": "eslint . --ext js,jsx --report-unused-disable-directives --max-warnings 0", 10 | "preview": "vite preview" 11 | }, 12 | "dependencies": { 13 | "react": "^18.2.0", 14 | "react-dom": "^18.2.0" 15 | }, 16 | "devDependencies": { 17 | "@types/react": "^18.2.43", 18 | "@types/react-dom": "^18.2.17", 19 | "@vitejs/plugin-react": "^4.2.1", 20 | "eslint": "^8.55.0", 21 | "eslint-plugin-react": "^7.33.2", 22 | "eslint-plugin-react-hooks": "^4.6.0", 23 | "eslint-plugin-react-refresh": "^0.4.5", 24 | "vite": "^5.0.8" 25 | } 26 | } 27 | -------------------------------------------------------------------------------- /week-5/react_foundation/public/vite.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /week-5/react_foundation/src/App.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/junaidahmed-One/Cohort-in-class-coding/5a545c799251f07f8bd62f8957f9de5f4d1ba13f/week-5/react_foundation/src/App.css -------------------------------------------------------------------------------- /week-5/react_foundation/src/App.jsx: -------------------------------------------------------------------------------- 1 | /* eslint-disable react/jsx-key */ 2 | /* eslint-disable react/prop-types */ 3 | import { useState } from "react"; 4 | 5 | function App() { 6 | const [todos, setTodos] = useState([ 7 | { 8 | title: "Gym in morning", 9 | description: "Gym workout", 10 | }, 11 | { 12 | title: "Study web dev", 13 | description: "fullstack cohort", 14 | }, 15 | ]); 16 | 17 | function addTodo() { 18 | setTodos([ 19 | ...todos, 20 | { 21 | title: "new todo", 22 | description: "desc for new todo", 23 | }, 24 | ]); 25 | } 26 | 27 | return ( 28 |
29 | 30 | {todos.map(function (todo) { 31 | return ( 32 | 36 | ); 37 | })} 38 |
39 | ); 40 | } 41 | 42 | function CustomeButton(props) { 43 | return ( 44 |
45 |

{props.title}

46 |

{props.description}

47 |
48 | ); 49 | } 50 | 51 | export default App; 52 | -------------------------------------------------------------------------------- /week-5/react_foundation/src/index.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/junaidahmed-One/Cohort-in-class-coding/5a545c799251f07f8bd62f8957f9de5f4d1ba13f/week-5/react_foundation/src/index.css -------------------------------------------------------------------------------- /week-5/react_foundation/src/main.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import ReactDOM from 'react-dom/client' 3 | import App from './App.jsx' 4 | import './index.css' 5 | 6 | ReactDOM.createRoot(document.getElementById('root')).render( 7 | 8 | 9 | , 10 | ) 11 | -------------------------------------------------------------------------------- /week-5/react_foundation/vite.config.js: -------------------------------------------------------------------------------- 1 | import { defineConfig } from 'vite' 2 | import react from '@vitejs/plugin-react' 3 | 4 | // https://vitejs.dev/config/ 5 | export default defineConfig({ 6 | plugins: [react()], 7 | }) 8 | -------------------------------------------------------------------------------- /week-5/shortcuts.txt: -------------------------------------------------------------------------------- 1 | 2 | 1. **Navigation:** 3 | - Go to File: `Ctrl + P` 4 | - Go to Symbol: `Ctrl + Shift + O` 5 | - Go to Line: `Ctrl + G` 6 | 7 | 2. **Editing:** 8 | - Cut line: `Ctrl + X` 9 | - Copy line: `Ctrl + C` 10 | - Paste line below: `Ctrl + V` 11 | - Undo: `Ctrl + Z` 12 | - Redo: `Ctrl + Y` 13 | 14 | 3. **Selection:** 15 | - Select all occurrences of current word: `Ctrl + Shift + L` 16 | - Expand/Shrink selection: `Shift + Alt + Left/Right arrow` 17 | - Multiline cursor: `Alt + Click` 18 | 19 | 4. **Search and Replace:** 20 | - Find: `Ctrl + F` 21 | - Replace: `Ctrl + H` 22 | - Find next match: `F3` (or `Ctrl + G`) 23 | - Find previous match: `Shift + F3` (or `Ctrl + Shift + G`) 24 | 25 | 5. **View:** 26 | - Toggle sidebar visibility: `Ctrl + B` 27 | - Open integrated terminal: `Ctrl + ` (backtick) 28 | - Toggle full screen: `F11` 29 | 30 | 6. **Code Formatting:** 31 | - Format document: `Shift + Alt + F` 32 | - Format selection: `Ctrl + K, Ctrl + F` 33 | 34 | 7. **Git Integration:** 35 | - Open source control: `Ctrl + Shift + G` 36 | - Stage changes: `Ctrl + S` 37 | - Commit changes: `Ctrl + Enter` 38 | -------------------------------------------------------------------------------- /week-5/simpleCounterJS.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Document 7 | 8 | 9 | 10 | 11 | 21 | 22 | 23 | -------------------------------------------------------------------------------- /week-6/assignment-week-6/.eslintrc.cjs: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | root: true, 3 | env: { browser: true, es2020: true }, 4 | extends: [ 5 | 'eslint:recommended', 6 | 'plugin:react/recommended', 7 | 'plugin:react/jsx-runtime', 8 | 'plugin:react-hooks/recommended', 9 | ], 10 | ignorePatterns: ['dist', '.eslintrc.cjs'], 11 | parserOptions: { ecmaVersion: 'latest', sourceType: 'module' }, 12 | settings: { react: { version: '18.2' } }, 13 | plugins: ['react-refresh'], 14 | rules: { 15 | 'react/jsx-no-target-blank': 'off', 16 | 'react-refresh/only-export-components': [ 17 | 'warn', 18 | { allowConstantExport: true }, 19 | ], 20 | }, 21 | } 22 | -------------------------------------------------------------------------------- /week-6/assignment-week-6/.gitignore: -------------------------------------------------------------------------------- 1 | # Logs 2 | logs 3 | *.log 4 | npm-debug.log* 5 | yarn-debug.log* 6 | yarn-error.log* 7 | pnpm-debug.log* 8 | lerna-debug.log* 9 | 10 | node_modules 11 | dist 12 | dist-ssr 13 | *.local 14 | 15 | # Editor directories and files 16 | .vscode/* 17 | !.vscode/extensions.json 18 | .idea 19 | .DS_Store 20 | *.suo 21 | *.ntvs* 22 | *.njsproj 23 | *.sln 24 | *.sw? 25 | -------------------------------------------------------------------------------- /week-6/assignment-week-6/README.md: -------------------------------------------------------------------------------- 1 | # React + Vite 2 | 3 | This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules. 4 | 5 | Currently, two official plugins are available: 6 | 7 | - [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react/README.md) uses [Babel](https://babeljs.io/) for Fast Refresh 8 | - [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh 9 | -------------------------------------------------------------------------------- /week-6/assignment-week-6/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Vite + React 8 | 9 | 10 |
11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /week-6/assignment-week-6/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "assignment-week-6", 3 | "private": true, 4 | "version": "0.0.0", 5 | "type": "module", 6 | "scripts": { 7 | "dev": "vite", 8 | "build": "vite build", 9 | "lint": "eslint . --ext js,jsx --report-unused-disable-directives --max-warnings 0", 10 | "preview": "vite preview" 11 | }, 12 | "dependencies": { 13 | "react": "^18.3.1", 14 | "react-dom": "^18.3.1" 15 | }, 16 | "devDependencies": { 17 | "@types/react": "^18.3.3", 18 | "@types/react-dom": "^18.3.0", 19 | "@vitejs/plugin-react": "^4.3.1", 20 | "eslint": "^8.57.0", 21 | "eslint-plugin-react": "^7.34.3", 22 | "eslint-plugin-react-hooks": "^4.6.2", 23 | "eslint-plugin-react-refresh": "^0.4.7", 24 | "vite": "^5.3.4" 25 | } 26 | } 27 | -------------------------------------------------------------------------------- /week-6/assignment-week-6/public/vite.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /week-6/assignment-week-6/src/App.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/junaidahmed-One/Cohort-in-class-coding/5a545c799251f07f8bd62f8957f9de5f4d1ba13f/week-6/assignment-week-6/src/App.css -------------------------------------------------------------------------------- /week-6/assignment-week-6/src/App.jsx: -------------------------------------------------------------------------------- 1 | import { useState } from "react"; 2 | import { Assignment1 } from "./components/Assingment1"; 3 | import { Assignment2 } from "./components/Assignment2"; 4 | 5 | function App() { 6 | const [count, setCount] = useState(0); 7 | 8 | return ( 9 | <> 10 | 11 | 12 | 13 | ); 14 | } 15 | 16 | export default App; 17 | -------------------------------------------------------------------------------- /week-6/assignment-week-6/src/components/Assignment2.jsx: -------------------------------------------------------------------------------- 1 | import { useState, useRef } from "react"; 2 | 3 | // Create a component that tracks and displays the number of times it has been rendered. Use useRef to create a variable that persists across renders without causing additional renders when it changes. 4 | 5 | export function Assignment2() { 6 | const [, forceRender] = useState(0); 7 | const persistentRef = useRef(0); 8 | const handleReRender = () => { 9 | // Update state to force re-render 10 | forceRender(Math.random()); 11 | }; 12 | persistentRef.current = persistentRef.current + 1; 13 | return ( 14 |
15 |

This component has rendered {persistentRef.current} times.

16 | 17 |
18 | ); 19 | } 20 | -------------------------------------------------------------------------------- /week-6/assignment-week-6/src/components/Assingment1.jsx: -------------------------------------------------------------------------------- 1 | import { useEffect, useRef } from "react"; 2 | 3 | // Create a component with a text input field and a button. When the component mounts or the button is clicked, automatically focus the text input field using useRef. 4 | 5 | export function Assignment1() { 6 | const focusRef = useRef(); 7 | useEffect(() => { 8 | focusRef.current.focus(); 9 | }, []); 10 | 11 | const handleButtonClick = () => { 12 | focusRef.current.focus(); 13 | }; 14 | 15 | return ( 16 |
17 | 18 | 19 |
20 | ); 21 | } 22 | -------------------------------------------------------------------------------- /week-6/assignment-week-6/src/index.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/junaidahmed-One/Cohort-in-class-coding/5a545c799251f07f8bd62f8957f9de5f4d1ba13f/week-6/assignment-week-6/src/index.css -------------------------------------------------------------------------------- /week-6/assignment-week-6/src/main.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import ReactDOM from 'react-dom/client' 3 | import App from './App.jsx' 4 | import './index.css' 5 | 6 | ReactDOM.createRoot(document.getElementById('root')).render( 7 | 8 | 9 | , 10 | ) 11 | -------------------------------------------------------------------------------- /week-6/assignment-week-6/vite.config.js: -------------------------------------------------------------------------------- 1 | import { defineConfig } from 'vite' 2 | import react from '@vitejs/plugin-react' 3 | 4 | // https://vitejs.dev/config/ 5 | export default defineConfig({ 6 | plugins: [react()], 7 | }) 8 | -------------------------------------------------------------------------------- /week-6/hooks-states-reconcilation/hooks-learn/.eslintrc.cjs: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | root: true, 3 | env: { browser: true, es2020: true }, 4 | extends: [ 5 | 'eslint:recommended', 6 | 'plugin:react/recommended', 7 | 'plugin:react/jsx-runtime', 8 | 'plugin:react-hooks/recommended', 9 | ], 10 | ignorePatterns: ['dist', '.eslintrc.cjs'], 11 | parserOptions: { ecmaVersion: 'latest', sourceType: 'module' }, 12 | settings: { react: { version: '18.2' } }, 13 | plugins: ['react-refresh'], 14 | rules: { 15 | 'react/jsx-no-target-blank': 'off', 16 | 'react-refresh/only-export-components': [ 17 | 'warn', 18 | { allowConstantExport: true }, 19 | ], 20 | }, 21 | } 22 | -------------------------------------------------------------------------------- /week-6/hooks-states-reconcilation/hooks-learn/.gitignore: -------------------------------------------------------------------------------- 1 | # Logs 2 | logs 3 | *.log 4 | npm-debug.log* 5 | yarn-debug.log* 6 | yarn-error.log* 7 | pnpm-debug.log* 8 | lerna-debug.log* 9 | 10 | node_modules 11 | dist 12 | dist-ssr 13 | *.local 14 | 15 | # Editor directories and files 16 | .vscode/* 17 | !.vscode/extensions.json 18 | .idea 19 | .DS_Store 20 | *.suo 21 | *.ntvs* 22 | *.njsproj 23 | *.sln 24 | *.sw? 25 | -------------------------------------------------------------------------------- /week-6/hooks-states-reconcilation/hooks-learn/README.md: -------------------------------------------------------------------------------- 1 | # React + Vite 2 | 3 | This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules. 4 | 5 | Currently, two official plugins are available: 6 | 7 | - [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react/README.md) uses [Babel](https://babeljs.io/) for Fast Refresh 8 | - [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh 9 | -------------------------------------------------------------------------------- /week-6/hooks-states-reconcilation/hooks-learn/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Vite + React 8 | 9 | 10 |
11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /week-6/hooks-states-reconcilation/hooks-learn/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "hooks-learn", 3 | "private": true, 4 | "version": "0.0.0", 5 | "type": "module", 6 | "scripts": { 7 | "dev": "vite", 8 | "build": "vite build", 9 | "lint": "eslint . --ext js,jsx --report-unused-disable-directives --max-warnings 0", 10 | "preview": "vite preview" 11 | }, 12 | "dependencies": { 13 | "react": "^18.3.1", 14 | "react-dom": "^18.3.1" 15 | }, 16 | "devDependencies": { 17 | "@types/react": "^18.3.3", 18 | "@types/react-dom": "^18.3.0", 19 | "@vitejs/plugin-react": "^4.3.1", 20 | "eslint": "^8.57.0", 21 | "eslint-plugin-react": "^7.34.3", 22 | "eslint-plugin-react-hooks": "^4.6.2", 23 | "eslint-plugin-react-refresh": "^0.4.7", 24 | "vite": "^5.3.4" 25 | } 26 | } 27 | -------------------------------------------------------------------------------- /week-6/hooks-states-reconcilation/hooks-learn/public/vite.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /week-6/hooks-states-reconcilation/hooks-learn/src/App.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/junaidahmed-One/Cohort-in-class-coding/5a545c799251f07f8bd62f8957f9de5f4d1ba13f/week-6/hooks-states-reconcilation/hooks-learn/src/App.css -------------------------------------------------------------------------------- /week-6/hooks-states-reconcilation/hooks-learn/src/App.jsx: -------------------------------------------------------------------------------- 1 | import { memo, useCallback, useEffect, useMemo, useRef, useState } from "react"; 2 | 3 | function App() { 4 | // const [excahnge1Data, setExcahnge1Data] = useState({}); 5 | // const [excahnge2Data, setExcahnge2Data] = useState({}); 6 | // const [bankData, setBankData] = useState({}); 7 | 8 | // useEffect(() => { 9 | // setTimeout(() => { 10 | // setExcahnge1Data({ returns: 100 }); 11 | // }); 12 | // }, []); 13 | 14 | // useEffect(() => { 15 | // setTimeout(() => { 16 | // setExcahnge2Data({ returns: 100 }); 17 | // }); 18 | // }, []); 19 | 20 | // useEffect( 21 | // () => { 22 | // //what logic to run 23 | // setTimeout(() => { 24 | // setBankData({ income: 100 }); 25 | // }, 3000); 26 | // }, 27 | // [] /* Dependency array [] -> on what state variable change should it run*/ 28 | // ); 29 | 30 | // useMemo() hook, saves re-calculating any operation. in the below example, cryptoReturns should not be calculated again after bankData updates, 31 | //so using useMemo() hook. calculates only when excahnge1Data, excahnge2Data either of this changes. 32 | 33 | // const cryptoReturns = useMemo(() => { 34 | // console.log("under usememo"); 35 | // return excahnge1Data.returns + excahnge2Data.returns; 36 | // }, [excahnge1Data, excahnge2Data]); 37 | 38 | //const incomeTax = (bankData.income + cryptoReturns) * 0.3; 39 | 40 | //useCallback() is used to memoize the function, and change only dependency array updates. 41 | // const calculateCryptogain = useCallback( 42 | // function () { 43 | // return excahnge1Data.returns + excahnge2Data.returns; 44 | // }, 45 | // [excahnge1Data, excahnge2Data] 46 | // ); 47 | 48 | const divref = useRef(); 49 | 50 | useEffect(() => { 51 | setTimeout(() => { 52 | divref.current.innerHTML = "10"; 53 | }, 5000); 54 | }, []); 55 | 56 | const incomeTax = 20000; 57 | return ( 58 |
59 | {/* */} 62 | hit there your income tax returns are{" "} 63 |
{incomeTax}
64 |
65 | ); 66 | } 67 | 68 | // memo is used to skip re-render of component if its states are unchanged 69 | // const CryptoGainCalc = memo(function ({ calculateCryptogain }) { 70 | // console.log("Child re-rendered"); 71 | // return
Your crypto returns are {calculateCryptogain()}
; 72 | // }); 73 | 74 | export default App; 75 | -------------------------------------------------------------------------------- /week-6/hooks-states-reconcilation/hooks-learn/src/index.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/junaidahmed-One/Cohort-in-class-coding/5a545c799251f07f8bd62f8957f9de5f4d1ba13f/week-6/hooks-states-reconcilation/hooks-learn/src/index.css -------------------------------------------------------------------------------- /week-6/hooks-states-reconcilation/hooks-learn/src/main.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import ReactDOM from 'react-dom/client' 3 | import App from './App.jsx' 4 | import './index.css' 5 | 6 | ReactDOM.createRoot(document.getElementById('root')).render( 7 | 8 | 9 | , 10 | ) 11 | -------------------------------------------------------------------------------- /week-6/hooks-states-reconcilation/hooks-learn/vite.config.js: -------------------------------------------------------------------------------- 1 | import { defineConfig } from 'vite' 2 | import react from '@vitejs/plugin-react' 3 | 4 | // https://vitejs.dev/config/ 5 | export default defineConfig({ 6 | plugins: [react()], 7 | }) 8 | -------------------------------------------------------------------------------- /week-6/react-deep-dive/.eslintrc.cjs: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | root: true, 3 | env: { browser: true, es2020: true }, 4 | extends: [ 5 | 'eslint:recommended', 6 | 'plugin:react/recommended', 7 | 'plugin:react/jsx-runtime', 8 | 'plugin:react-hooks/recommended', 9 | ], 10 | ignorePatterns: ['dist', '.eslintrc.cjs'], 11 | parserOptions: { ecmaVersion: 'latest', sourceType: 'module' }, 12 | settings: { react: { version: '18.2' } }, 13 | plugins: ['react-refresh'], 14 | rules: { 15 | 'react-refresh/only-export-components': [ 16 | 'warn', 17 | { allowConstantExport: true }, 18 | ], 19 | }, 20 | } 21 | -------------------------------------------------------------------------------- /week-6/react-deep-dive/.gitignore: -------------------------------------------------------------------------------- 1 | # Logs 2 | logs 3 | *.log 4 | npm-debug.log* 5 | yarn-debug.log* 6 | yarn-error.log* 7 | pnpm-debug.log* 8 | lerna-debug.log* 9 | 10 | node_modules 11 | dist 12 | dist-ssr 13 | *.local 14 | 15 | # Editor directories and files 16 | .vscode/* 17 | !.vscode/extensions.json 18 | .idea 19 | .DS_Store 20 | *.suo 21 | *.ntvs* 22 | *.njsproj 23 | *.sln 24 | *.sw? 25 | -------------------------------------------------------------------------------- /week-6/react-deep-dive/README.md: -------------------------------------------------------------------------------- 1 | # React + Vite 2 | 3 | This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules. 4 | 5 | Currently, two official plugins are available: 6 | 7 | - [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react/README.md) uses [Babel](https://babeljs.io/) for Fast Refresh 8 | - [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh 9 | -------------------------------------------------------------------------------- /week-6/react-deep-dive/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Vite + React 8 | 9 | 10 |
11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /week-6/react-deep-dive/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "react-deep-dive", 3 | "private": true, 4 | "version": "0.0.0", 5 | "type": "module", 6 | "scripts": { 7 | "dev": "vite", 8 | "build": "vite build", 9 | "lint": "eslint . --ext js,jsx --report-unused-disable-directives --max-warnings 0", 10 | "preview": "vite preview" 11 | }, 12 | "dependencies": { 13 | "axios": "^1.6.5", 14 | "react": "^18.2.0", 15 | "react-dom": "^18.2.0" 16 | }, 17 | "devDependencies": { 18 | "@types/react": "^18.2.43", 19 | "@types/react-dom": "^18.2.17", 20 | "@vitejs/plugin-react": "^4.2.1", 21 | "eslint": "^8.55.0", 22 | "eslint-plugin-react": "^7.33.2", 23 | "eslint-plugin-react-hooks": "^4.6.0", 24 | "eslint-plugin-react-refresh": "^0.4.5", 25 | "vite": "^5.0.8" 26 | } 27 | } 28 | -------------------------------------------------------------------------------- /week-6/react-deep-dive/public/vite.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /week-6/react-deep-dive/src/App.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/junaidahmed-One/Cohort-in-class-coding/5a545c799251f07f8bd62f8957f9de5f4d1ba13f/week-6/react-deep-dive/src/App.css -------------------------------------------------------------------------------- /week-6/react-deep-dive/src/App.jsx: -------------------------------------------------------------------------------- 1 | import { useMemo, useState } from "react"; 2 | 3 | function App() { 4 | const [counter, setCounter] = useState(0); 5 | const [inputValue, setInputValue] = useState(1); 6 | 7 | let count = useMemo(() => { 8 | let count = 0; 9 | for (let i = 1; i <= inputValue; i++) { 10 | count = count + i; 11 | } 12 | return count; 13 | }, [inputValue]); 14 | 15 | return ( 16 |
17 | 23 |
24 | Sum from 1 to {inputValue} is {count} 25 |
26 | 33 |
34 | ); 35 | } 36 | 37 | export default App; 38 | -------------------------------------------------------------------------------- /week-6/react-deep-dive/src/index.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/junaidahmed-One/Cohort-in-class-coding/5a545c799251f07f8bd62f8957f9de5f4d1ba13f/week-6/react-deep-dive/src/index.css -------------------------------------------------------------------------------- /week-6/react-deep-dive/src/main.jsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import ReactDOM from "react-dom/client"; 3 | import App from "./App.jsx"; 4 | import "./index.css"; 5 | 6 | ReactDOM.createRoot(document.getElementById("root")).render(); 7 | -------------------------------------------------------------------------------- /week-6/react-deep-dive/vite.config.js: -------------------------------------------------------------------------------- 1 | import { defineConfig } from 'vite' 2 | import react from '@vitejs/plugin-react' 3 | 4 | // https://vitejs.dev/config/ 5 | export default defineConfig({ 6 | plugins: [react()], 7 | }) 8 | -------------------------------------------------------------------------------- /week-7/react-7.2/.eslintrc.cjs: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | root: true, 3 | env: { browser: true, es2020: true }, 4 | extends: [ 5 | 'eslint:recommended', 6 | 'plugin:react/recommended', 7 | 'plugin:react/jsx-runtime', 8 | 'plugin:react-hooks/recommended', 9 | ], 10 | ignorePatterns: ['dist', '.eslintrc.cjs'], 11 | parserOptions: { ecmaVersion: 'latest', sourceType: 'module' }, 12 | settings: { react: { version: '18.2' } }, 13 | plugins: ['react-refresh'], 14 | rules: { 15 | 'react-refresh/only-export-components': [ 16 | 'warn', 17 | { allowConstantExport: true }, 18 | ], 19 | }, 20 | } 21 | -------------------------------------------------------------------------------- /week-7/react-7.2/.gitignore: -------------------------------------------------------------------------------- 1 | # Logs 2 | logs 3 | *.log 4 | npm-debug.log* 5 | yarn-debug.log* 6 | yarn-error.log* 7 | pnpm-debug.log* 8 | lerna-debug.log* 9 | 10 | node_modules 11 | dist 12 | dist-ssr 13 | *.local 14 | 15 | # Editor directories and files 16 | .vscode/* 17 | !.vscode/extensions.json 18 | .idea 19 | .DS_Store 20 | *.suo 21 | *.ntvs* 22 | *.njsproj 23 | *.sln 24 | *.sw? 25 | -------------------------------------------------------------------------------- /week-7/react-7.2/README.md: -------------------------------------------------------------------------------- 1 | # React + Vite 2 | 3 | This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules. 4 | 5 | Currently, two official plugins are available: 6 | 7 | - [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react/README.md) uses [Babel](https://babeljs.io/) for Fast Refresh 8 | - [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh 9 | -------------------------------------------------------------------------------- /week-7/react-7.2/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Vite + React 8 | 9 | 10 |
11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /week-7/react-7.2/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "week-7-1", 3 | "private": true, 4 | "version": "0.0.0", 5 | "type": "module", 6 | "scripts": { 7 | "dev": "vite", 8 | "build": "vite build", 9 | "lint": "eslint . --ext js,jsx --report-unused-disable-directives --max-warnings 0", 10 | "preview": "vite preview" 11 | }, 12 | "dependencies": { 13 | "react": "^18.2.0", 14 | "react-dom": "^18.2.0", 15 | "react-router-dom": "^6.21.2", 16 | "recoil": "^0.7.7" 17 | }, 18 | "devDependencies": { 19 | "@types/react": "^18.2.43", 20 | "@types/react-dom": "^18.2.17", 21 | "@vitejs/plugin-react": "^4.2.1", 22 | "eslint": "^8.55.0", 23 | "eslint-plugin-react": "^7.33.2", 24 | "eslint-plugin-react-hooks": "^4.6.0", 25 | "eslint-plugin-react-refresh": "^0.4.5", 26 | "vite": "^5.0.8" 27 | } 28 | } 29 | -------------------------------------------------------------------------------- /week-7/react-7.2/public/vite.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /week-7/react-7.2/src/App.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/junaidahmed-One/Cohort-in-class-coding/5a545c799251f07f8bd62f8957f9de5f4d1ba13f/week-7/react-7.2/src/App.css -------------------------------------------------------------------------------- /week-7/react-7.2/src/App.jsx: -------------------------------------------------------------------------------- 1 | import { useContext, useState } from "react"; 2 | import { CountContext } from "./context"; 3 | import { Navigate } from "react-router-dom"; 4 | import { 5 | RecoilRoot, 6 | useRecoilState, 7 | useRecoilValue, 8 | useSetRecoilState, 9 | } from "recoil"; 10 | import { countAtom, evenSelector } from "./store/atoms/count"; 11 | 12 | function App() { 13 | return ( 14 |
15 | 16 | 17 | 18 |
19 | ); 20 | } 21 | 22 | function Count() { 23 | return ( 24 |
25 | 26 | 27 |
28 | ); 29 | } 30 | 31 | function CountRenderer() { 32 | const count = useRecoilValue(countAtom); 33 | return ( 34 |
35 | {count} 36 | 37 | 38 |
39 | ); 40 | } 41 | 42 | function EvenRerender() { 43 | const isEven = useRecoilValue(evenSelector); 44 | 45 | return
{isEven === 0 ? "Its even" : "Its odd"}
; 46 | } 47 | 48 | function Buttons() { 49 | const setCount = useSetRecoilState(countAtom); 50 | return ( 51 |
52 | 59 | 60 | 67 |
68 | ); 69 | } 70 | 71 | export default App; 72 | -------------------------------------------------------------------------------- /week-7/react-7.2/src/assets/react.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /week-7/react-7.2/src/components/Dashboard.jsx: -------------------------------------------------------------------------------- 1 | import { useEffect, useState } from "react" 2 | 3 | export default function Dashboard() { 4 | 5 | return
6 | Dashboard page 7 |
8 | } 9 | -------------------------------------------------------------------------------- /week-7/react-7.2/src/components/Landing.jsx: -------------------------------------------------------------------------------- 1 | 2 | 3 | export default function Landing() { 4 | return
5 | Landing page 6 |
7 | } -------------------------------------------------------------------------------- /week-7/react-7.2/src/context.jsx: -------------------------------------------------------------------------------- 1 | import { createContext } from "react"; 2 | 3 | export const CountContext = createContext(0); 4 | 5 | -------------------------------------------------------------------------------- /week-7/react-7.2/src/index.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/junaidahmed-One/Cohort-in-class-coding/5a545c799251f07f8bd62f8957f9de5f4d1ba13f/week-7/react-7.2/src/index.css -------------------------------------------------------------------------------- /week-7/react-7.2/src/main.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import ReactDOM from 'react-dom/client' 3 | import App from './App.jsx' 4 | import './index.css' 5 | 6 | ReactDOM.createRoot(document.getElementById('root')).render( 7 | 8 | 9 | , 10 | ) 11 | -------------------------------------------------------------------------------- /week-7/react-7.2/src/store/atoms/count.js: -------------------------------------------------------------------------------- 1 | import { atom, selector } from "recoil"; 2 | 3 | export const countAtom = atom({ 4 | key: "countAtom", 5 | default: 0, 6 | }); 7 | 8 | export const evenSelector = selector({ 9 | key: "evenSelector", 10 | get: ({ get }) => { 11 | const count = get(countAtom); 12 | return count % 2; 13 | }, 14 | }); 15 | -------------------------------------------------------------------------------- /week-7/react-7.2/vite.config.js: -------------------------------------------------------------------------------- 1 | import { defineConfig } from 'vite' 2 | import react from '@vitejs/plugin-react' 3 | 4 | // https://vitejs.dev/config/ 5 | export default defineConfig({ 6 | plugins: [react()], 7 | }) 8 | -------------------------------------------------------------------------------- /week-7/react-concepts/.eslintrc.cjs: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | root: true, 3 | env: { browser: true, es2020: true }, 4 | extends: [ 5 | "eslint:recommended", 6 | "plugin:react/recommended", 7 | "plugin:react/jsx-runtime", 8 | "plugin:react-hooks/recommended", 9 | ], 10 | ignorePatterns: ["dist", ".eslintrc.cjs"], 11 | parserOptions: { ecmaVersion: "latest", sourceType: "module" }, 12 | settings: { react: { version: "18.2" } }, 13 | plugins: ["react-refresh"], 14 | rules: { 15 | "react-refresh/only-export-components": [ 16 | "warn", 17 | { allowConstantExport: true }, 18 | ], 19 | "react/prop-types": "off", 20 | }, 21 | }; 22 | -------------------------------------------------------------------------------- /week-7/react-concepts/.gitignore: -------------------------------------------------------------------------------- 1 | # Logs 2 | logs 3 | *.log 4 | npm-debug.log* 5 | yarn-debug.log* 6 | yarn-error.log* 7 | pnpm-debug.log* 8 | lerna-debug.log* 9 | 10 | node_modules 11 | dist 12 | dist-ssr 13 | *.local 14 | 15 | # Editor directories and files 16 | .vscode/* 17 | !.vscode/extensions.json 18 | .idea 19 | .DS_Store 20 | *.suo 21 | *.ntvs* 22 | *.njsproj 23 | *.sln 24 | *.sw? 25 | -------------------------------------------------------------------------------- /week-7/react-concepts/README.md: -------------------------------------------------------------------------------- 1 | # React + Vite 2 | 3 | This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules. 4 | 5 | Currently, two official plugins are available: 6 | 7 | - [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react/README.md) uses [Babel](https://babeljs.io/) for Fast Refresh 8 | - [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh 9 | -------------------------------------------------------------------------------- /week-7/react-concepts/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Vite + React 8 | 9 | 10 |
11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /week-7/react-concepts/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "react-concepts", 3 | "private": true, 4 | "version": "0.0.0", 5 | "type": "module", 6 | "scripts": { 7 | "dev": "vite", 8 | "build": "vite build", 9 | "lint": "eslint . --ext js,jsx --report-unused-disable-directives --max-warnings 0", 10 | "preview": "vite preview" 11 | }, 12 | "dependencies": { 13 | "react": "^18.2.0", 14 | "react-dom": "^18.2.0", 15 | "react-router-dom": "^6.21.2" 16 | }, 17 | "devDependencies": { 18 | "@types/react": "^18.2.43", 19 | "@types/react-dom": "^18.2.17", 20 | "@vitejs/plugin-react": "^4.2.1", 21 | "eslint": "^8.55.0", 22 | "eslint-plugin-react": "^7.33.2", 23 | "eslint-plugin-react-hooks": "^4.6.0", 24 | "eslint-plugin-react-refresh": "^0.4.5", 25 | "vite": "^5.0.8" 26 | } 27 | } 28 | -------------------------------------------------------------------------------- /week-7/react-concepts/public/vite.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /week-7/react-concepts/src/App.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/junaidahmed-One/Cohort-in-class-coding/5a545c799251f07f8bd62f8957f9de5f4d1ba13f/week-7/react-concepts/src/App.css -------------------------------------------------------------------------------- /week-7/react-concepts/src/App.jsx: -------------------------------------------------------------------------------- 1 | import { useContext, useState } from "react"; 2 | import { CountContext } from "./context"; 3 | 4 | function App() { 5 | const [count, setCount] = useState(0); 6 | 7 | return ( 8 |
9 | 10 | 11 | 12 |
13 | ); 14 | } 15 | 16 | function Count({ setCount }) { 17 | return ( 18 |
19 | 20 | 21 |
22 | ); 23 | } 24 | 25 | function CountRenderer() { 26 | const count = useContext(CountContext); 27 | return
{count}
; 28 | } 29 | 30 | function Buttons({ setCount }) { 31 | const count = useContext(CountContext); 32 | return ( 33 |
34 | 41 | 42 | 49 |
50 | ); 51 | } 52 | 53 | export default App; 54 | -------------------------------------------------------------------------------- /week-7/react-concepts/src/Pages/Dashboard.jsx: -------------------------------------------------------------------------------- 1 | export default function Dashboard() { 2 | return
Dashboard
; 3 | } 4 | -------------------------------------------------------------------------------- /week-7/react-concepts/src/Pages/Landing.jsx: -------------------------------------------------------------------------------- 1 | export default function Landing() { 2 | return
Landing
; 3 | } 4 | -------------------------------------------------------------------------------- /week-7/react-concepts/src/assets/react.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /week-7/react-concepts/src/context.jsx: -------------------------------------------------------------------------------- 1 | import { createContext } from "react"; 2 | 3 | export const CountContext = createContext(0); 4 | -------------------------------------------------------------------------------- /week-7/react-concepts/src/index.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/junaidahmed-One/Cohort-in-class-coding/5a545c799251f07f8bd62f8957f9de5f4d1ba13f/week-7/react-concepts/src/index.css -------------------------------------------------------------------------------- /week-7/react-concepts/src/main.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import ReactDOM from 'react-dom/client' 3 | import App from './App.jsx' 4 | import './index.css' 5 | 6 | ReactDOM.createRoot(document.getElementById('root')).render( 7 | 8 | 9 | , 10 | ) 11 | -------------------------------------------------------------------------------- /week-7/react-concepts/vite.config.js: -------------------------------------------------------------------------------- 1 | import { defineConfig } from 'vite' 2 | import react from '@vitejs/plugin-react' 3 | 4 | // https://vitejs.dev/config/ 5 | export default defineConfig({ 6 | plugins: [react()], 7 | }) 8 | -------------------------------------------------------------------------------- /week-8/Dukaan-Assignment/dukaan-assignment/.eslintrc.cjs: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | root: true, 3 | env: { browser: true, es2020: true }, 4 | extends: [ 5 | 'eslint:recommended', 6 | 'plugin:react/recommended', 7 | 'plugin:react/jsx-runtime', 8 | 'plugin:react-hooks/recommended', 9 | ], 10 | ignorePatterns: ['dist', '.eslintrc.cjs'], 11 | parserOptions: { ecmaVersion: 'latest', sourceType: 'module' }, 12 | settings: { react: { version: '18.2' } }, 13 | plugins: ['react-refresh'], 14 | rules: { 15 | 'react-refresh/only-export-components': [ 16 | 'warn', 17 | { allowConstantExport: true }, 18 | ], 19 | }, 20 | } 21 | -------------------------------------------------------------------------------- /week-8/Dukaan-Assignment/dukaan-assignment/.gitignore: -------------------------------------------------------------------------------- 1 | # Logs 2 | logs 3 | *.log 4 | npm-debug.log* 5 | yarn-debug.log* 6 | yarn-error.log* 7 | pnpm-debug.log* 8 | lerna-debug.log* 9 | 10 | node_modules 11 | dist 12 | dist-ssr 13 | *.local 14 | 15 | # Editor directories and files 16 | .vscode/* 17 | !.vscode/extensions.json 18 | .idea 19 | .DS_Store 20 | *.suo 21 | *.ntvs* 22 | *.njsproj 23 | *.sln 24 | *.sw? 25 | -------------------------------------------------------------------------------- /week-8/Dukaan-Assignment/dukaan-assignment/README.md: -------------------------------------------------------------------------------- 1 | # React + Vite 2 | 3 | This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules. 4 | 5 | Currently, two official plugins are available: 6 | 7 | - [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react/README.md) uses [Babel](https://babeljs.io/) for Fast Refresh 8 | - [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh 9 | -------------------------------------------------------------------------------- /week-8/Dukaan-Assignment/dukaan-assignment/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Vite + React 8 | 9 | 10 |
11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /week-8/Dukaan-Assignment/dukaan-assignment/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "dukaan-assignment", 3 | "private": true, 4 | "version": "0.0.0", 5 | "type": "module", 6 | "scripts": { 7 | "dev": "vite", 8 | "build": "vite build", 9 | "lint": "eslint . --ext js,jsx --report-unused-disable-directives --max-warnings 0", 10 | "preview": "vite preview" 11 | }, 12 | "dependencies": { 13 | "react": "^18.2.0", 14 | "react-dom": "^18.2.0" 15 | }, 16 | "devDependencies": { 17 | "@types/react": "^18.2.43", 18 | "@types/react-dom": "^18.2.17", 19 | "@vitejs/plugin-react": "^4.2.1", 20 | "eslint": "^8.55.0", 21 | "eslint-plugin-react": "^7.33.2", 22 | "eslint-plugin-react-hooks": "^4.6.0", 23 | "eslint-plugin-react-refresh": "^0.4.5", 24 | "vite": "^5.0.8" 25 | } 26 | } 27 | -------------------------------------------------------------------------------- /week-8/Dukaan-Assignment/dukaan-assignment/public/vite.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /week-8/Dukaan-Assignment/dukaan-assignment/src/App.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/junaidahmed-One/Cohort-in-class-coding/5a545c799251f07f8bd62f8957f9de5f4d1ba13f/week-8/Dukaan-Assignment/dukaan-assignment/src/App.css -------------------------------------------------------------------------------- /week-8/Dukaan-Assignment/dukaan-assignment/src/App.jsx: -------------------------------------------------------------------------------- 1 | import "./App.css"; 2 | import { RevenueCard } from "./components/RevenueCard"; 3 | 4 | function App() { 5 | return ( 6 | <> 7 | 8 | 9 | ); 10 | } 11 | 12 | export default App; 13 | -------------------------------------------------------------------------------- /week-8/Dukaan-Assignment/dukaan-assignment/src/components/RevenueCard.jsx: -------------------------------------------------------------------------------- 1 | export const RevenueCard = ({ title, showWarning, orderCount, amount }) => { 2 | return ( 3 |
4 |
{title}
5 |
{amount}
6 |
{orderCount ?
{orderCount} order(s)
: null}
7 |
8 | ); 9 | }; 10 | -------------------------------------------------------------------------------- /week-8/Dukaan-Assignment/dukaan-assignment/src/index.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/junaidahmed-One/Cohort-in-class-coding/5a545c799251f07f8bd62f8957f9de5f4d1ba13f/week-8/Dukaan-Assignment/dukaan-assignment/src/index.css -------------------------------------------------------------------------------- /week-8/Dukaan-Assignment/dukaan-assignment/src/main.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import ReactDOM from 'react-dom/client' 3 | import App from './App.jsx' 4 | import './index.css' 5 | 6 | ReactDOM.createRoot(document.getElementById('root')).render( 7 | 8 | 9 | , 10 | ) 11 | -------------------------------------------------------------------------------- /week-8/Dukaan-Assignment/dukaan-assignment/vite.config.js: -------------------------------------------------------------------------------- 1 | import { defineConfig } from 'vite' 2 | import react from '@vitejs/plugin-react' 3 | 4 | // https://vitejs.dev/config/ 5 | export default defineConfig({ 6 | plugins: [react()], 7 | }) 8 | -------------------------------------------------------------------------------- /week-8/Tailwind-Project/.eslintrc.cjs: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | root: true, 3 | env: { browser: true, es2020: true }, 4 | extends: [ 5 | 'eslint:recommended', 6 | 'plugin:react/recommended', 7 | 'plugin:react/jsx-runtime', 8 | 'plugin:react-hooks/recommended', 9 | ], 10 | ignorePatterns: ['dist', '.eslintrc.cjs'], 11 | parserOptions: { ecmaVersion: 'latest', sourceType: 'module' }, 12 | settings: { react: { version: '18.2' } }, 13 | plugins: ['react-refresh'], 14 | rules: { 15 | 'react-refresh/only-export-components': [ 16 | 'warn', 17 | { allowConstantExport: true }, 18 | ], 19 | }, 20 | } 21 | -------------------------------------------------------------------------------- /week-8/Tailwind-Project/.gitignore: -------------------------------------------------------------------------------- 1 | # Logs 2 | logs 3 | *.log 4 | npm-debug.log* 5 | yarn-debug.log* 6 | yarn-error.log* 7 | pnpm-debug.log* 8 | lerna-debug.log* 9 | 10 | node_modules 11 | dist 12 | dist-ssr 13 | *.local 14 | 15 | # Editor directories and files 16 | .vscode/* 17 | !.vscode/extensions.json 18 | .idea 19 | .DS_Store 20 | *.suo 21 | *.ntvs* 22 | *.njsproj 23 | *.sln 24 | *.sw? 25 | -------------------------------------------------------------------------------- /week-8/Tailwind-Project/README.md: -------------------------------------------------------------------------------- 1 | # React + Vite 2 | 3 | This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules. 4 | 5 | Currently, two official plugins are available: 6 | 7 | - [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react/README.md) uses [Babel](https://babeljs.io/) for Fast Refresh 8 | - [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh 9 | -------------------------------------------------------------------------------- /week-8/Tailwind-Project/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Vite + React 8 | 9 | 10 |
11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /week-8/Tailwind-Project/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "tailwind-project", 3 | "private": true, 4 | "version": "0.0.0", 5 | "type": "module", 6 | "scripts": { 7 | "dev": "vite", 8 | "build": "vite build", 9 | "lint": "eslint . --ext js,jsx --report-unused-disable-directives --max-warnings 0", 10 | "preview": "vite preview" 11 | }, 12 | "dependencies": { 13 | "react": "^18.2.0", 14 | "react-dom": "^18.2.0" 15 | }, 16 | "devDependencies": { 17 | "@types/react": "^18.2.43", 18 | "@types/react-dom": "^18.2.17", 19 | "@vitejs/plugin-react": "^4.2.1", 20 | "autoprefixer": "^10.4.17", 21 | "eslint": "^8.55.0", 22 | "eslint-plugin-react": "^7.33.2", 23 | "eslint-plugin-react-hooks": "^4.6.0", 24 | "eslint-plugin-react-refresh": "^0.4.5", 25 | "postcss": "^8.4.33", 26 | "tailwindcss": "^3.4.1", 27 | "vite": "^5.0.8" 28 | } 29 | } 30 | -------------------------------------------------------------------------------- /week-8/Tailwind-Project/postcss.config.js: -------------------------------------------------------------------------------- 1 | export default { 2 | plugins: { 3 | tailwindcss: {}, 4 | autoprefixer: {}, 5 | }, 6 | } 7 | -------------------------------------------------------------------------------- /week-8/Tailwind-Project/public/vite.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /week-8/Tailwind-Project/src/App.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/junaidahmed-One/Cohort-in-class-coding/5a545c799251f07f8bd62f8957f9de5f4d1ba13f/week-8/Tailwind-Project/src/App.css -------------------------------------------------------------------------------- /week-8/Tailwind-Project/src/App.jsx: -------------------------------------------------------------------------------- 1 | import "./App.css"; 2 | 3 | function App() { 4 | return ( 5 | <> 6 |
Hi there
7 | 8 | ); 9 | } 10 | 11 | export default App; 12 | -------------------------------------------------------------------------------- /week-8/Tailwind-Project/src/index.css: -------------------------------------------------------------------------------- 1 | @tailwind base; 2 | @tailwind components; 3 | @tailwind utilities; 4 | -------------------------------------------------------------------------------- /week-8/Tailwind-Project/src/main.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import ReactDOM from 'react-dom/client' 3 | import App from './App.jsx' 4 | import './index.css' 5 | 6 | ReactDOM.createRoot(document.getElementById('root')).render( 7 | 8 | 9 | , 10 | ) 11 | -------------------------------------------------------------------------------- /week-8/Tailwind-Project/tailwind.config.js: -------------------------------------------------------------------------------- 1 | /** @type {import('tailwindcss').Config} */ 2 | export default { 3 | content: ["./index.html", "./src/**/*.{js,ts,jsx,tsx}"], 4 | theme: { 5 | extend: {}, 6 | }, 7 | plugins: [], 8 | }; 9 | -------------------------------------------------------------------------------- /week-8/Tailwind-Project/vite.config.js: -------------------------------------------------------------------------------- 1 | import { defineConfig } from 'vite' 2 | import react from '@vitejs/plugin-react' 3 | 4 | // https://vitejs.dev/config/ 5 | export default defineConfig({ 6 | plugins: [react()], 7 | }) 8 | -------------------------------------------------------------------------------- /week-8/paytm-main/Dockerfile: -------------------------------------------------------------------------------- 1 | FROM mongo:4.4.7 2 | RUN echo "rs.initiate();" > /docker-entrypoint-initdb.d/replica-init.js 3 | CMD [ "--replSet", "rs" ] 4 | -------------------------------------------------------------------------------- /week-8/paytm-main/README.md: -------------------------------------------------------------------------------- 1 | 2 | ## Build a basic version of PayTM 3 | -------------------------------------------------------------------------------- /week-8/paytm-main/backend/.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | -------------------------------------------------------------------------------- /week-8/paytm-main/backend/index.js: -------------------------------------------------------------------------------- 1 | const express = require("express"); 2 | 3 | 4 | -------------------------------------------------------------------------------- /week-8/paytm-main/backend/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "backend", 3 | "version": "1.0.0", 4 | "description": "", 5 | "main": "index.js", 6 | "scripts": { 7 | "test": "echo \"Error: no test specified\" && exit 1" 8 | }, 9 | "keywords": [], 10 | "author": "", 11 | "license": "ISC", 12 | "dependencies": { 13 | "express": "^4.18.2", 14 | "mongoose": "^8.1.0", 15 | "zod": "^3.22.4" 16 | } 17 | } 18 | -------------------------------------------------------------------------------- /week-8/paytm-main/frontend/.eslintrc.cjs: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | root: true, 3 | env: { browser: true, es2020: true }, 4 | extends: [ 5 | 'eslint:recommended', 6 | 'plugin:react/recommended', 7 | 'plugin:react/jsx-runtime', 8 | 'plugin:react-hooks/recommended', 9 | ], 10 | ignorePatterns: ['dist', '.eslintrc.cjs'], 11 | parserOptions: { ecmaVersion: 'latest', sourceType: 'module' }, 12 | settings: { react: { version: '18.2' } }, 13 | plugins: ['react-refresh'], 14 | rules: { 15 | 'react-refresh/only-export-components': [ 16 | 'warn', 17 | { allowConstantExport: true }, 18 | ], 19 | }, 20 | } 21 | -------------------------------------------------------------------------------- /week-8/paytm-main/frontend/.gitignore: -------------------------------------------------------------------------------- 1 | # Logs 2 | logs 3 | *.log 4 | npm-debug.log* 5 | yarn-debug.log* 6 | yarn-error.log* 7 | pnpm-debug.log* 8 | lerna-debug.log* 9 | 10 | node_modules 11 | dist 12 | dist-ssr 13 | *.local 14 | 15 | # Editor directories and files 16 | .vscode/* 17 | !.vscode/extensions.json 18 | .idea 19 | .DS_Store 20 | *.suo 21 | *.ntvs* 22 | *.njsproj 23 | *.sln 24 | *.sw? 25 | -------------------------------------------------------------------------------- /week-8/paytm-main/frontend/README.md: -------------------------------------------------------------------------------- 1 | # React + Vite 2 | 3 | This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules. 4 | 5 | Currently, two official plugins are available: 6 | 7 | - [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react/README.md) uses [Babel](https://babeljs.io/) for Fast Refresh 8 | - [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh 9 | -------------------------------------------------------------------------------- /week-8/paytm-main/frontend/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Vite + React 8 | 9 | 10 |
11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /week-8/paytm-main/frontend/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "frontend", 3 | "private": true, 4 | "version": "0.0.0", 5 | "type": "module", 6 | "scripts": { 7 | "dev": "vite", 8 | "build": "vite build", 9 | "lint": "eslint . --ext js,jsx --report-unused-disable-directives --max-warnings 0", 10 | "preview": "vite preview" 11 | }, 12 | "dependencies": { 13 | "react": "^18.2.0", 14 | "react-dom": "^18.2.0" 15 | }, 16 | "devDependencies": { 17 | "@types/react": "^18.2.43", 18 | "@types/react-dom": "^18.2.17", 19 | "@vitejs/plugin-react": "^4.2.1", 20 | "eslint": "^8.55.0", 21 | "eslint-plugin-react": "^7.33.2", 22 | "eslint-plugin-react-hooks": "^4.6.0", 23 | "eslint-plugin-react-refresh": "^0.4.5", 24 | "vite": "^5.0.8" 25 | } 26 | } 27 | -------------------------------------------------------------------------------- /week-8/paytm-main/frontend/public/vite.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /week-8/paytm-main/frontend/src/App.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/junaidahmed-One/Cohort-in-class-coding/5a545c799251f07f8bd62f8957f9de5f4d1ba13f/week-8/paytm-main/frontend/src/App.css -------------------------------------------------------------------------------- /week-8/paytm-main/frontend/src/App.jsx: -------------------------------------------------------------------------------- 1 | 2 | function App() { 3 | 4 | return ( 5 |
6 | Hello world 7 |
8 | ) 9 | } 10 | 11 | export default App 12 | -------------------------------------------------------------------------------- /week-8/paytm-main/frontend/src/index.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/junaidahmed-One/Cohort-in-class-coding/5a545c799251f07f8bd62f8957f9de5f4d1ba13f/week-8/paytm-main/frontend/src/index.css -------------------------------------------------------------------------------- /week-8/paytm-main/frontend/src/main.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import ReactDOM from 'react-dom/client' 3 | import App from './App.jsx' 4 | import './index.css' 5 | 6 | ReactDOM.createRoot(document.getElementById('root')).render( 7 | 8 | 9 | , 10 | ) 11 | -------------------------------------------------------------------------------- /week-8/paytm-main/frontend/vite.config.js: -------------------------------------------------------------------------------- 1 | import { defineConfig } from 'vite' 2 | import react from '@vitejs/plugin-react' 3 | 4 | // https://vitejs.dev/config/ 5 | export default defineConfig({ 6 | plugins: [react()], 7 | }) 8 | -------------------------------------------------------------------------------- /week-9/Custom-Hooks/.eslintrc.cjs: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | root: true, 3 | env: { browser: true, es2020: true }, 4 | extends: [ 5 | 'eslint:recommended', 6 | 'plugin:react/recommended', 7 | 'plugin:react/jsx-runtime', 8 | 'plugin:react-hooks/recommended', 9 | ], 10 | ignorePatterns: ['dist', '.eslintrc.cjs'], 11 | parserOptions: { ecmaVersion: 'latest', sourceType: 'module' }, 12 | settings: { react: { version: '18.2' } }, 13 | plugins: ['react-refresh'], 14 | rules: { 15 | 'react-refresh/only-export-components': [ 16 | 'warn', 17 | { allowConstantExport: true }, 18 | ], 19 | }, 20 | } 21 | -------------------------------------------------------------------------------- /week-9/Custom-Hooks/.gitignore: -------------------------------------------------------------------------------- 1 | # Logs 2 | logs 3 | *.log 4 | npm-debug.log* 5 | yarn-debug.log* 6 | yarn-error.log* 7 | pnpm-debug.log* 8 | lerna-debug.log* 9 | 10 | node_modules 11 | dist 12 | dist-ssr 13 | *.local 14 | 15 | # Editor directories and files 16 | .vscode/* 17 | !.vscode/extensions.json 18 | .idea 19 | .DS_Store 20 | *.suo 21 | *.ntvs* 22 | *.njsproj 23 | *.sln 24 | *.sw? 25 | -------------------------------------------------------------------------------- /week-9/Custom-Hooks/README.md: -------------------------------------------------------------------------------- 1 | # React + Vite 2 | 3 | This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules. 4 | 5 | Currently, two official plugins are available: 6 | 7 | - [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react/README.md) uses [Babel](https://babeljs.io/) for Fast Refresh 8 | - [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh 9 | -------------------------------------------------------------------------------- /week-9/Custom-Hooks/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Vite + React 8 | 9 | 10 |
11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /week-9/Custom-Hooks/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "custom-hooks", 3 | "private": true, 4 | "version": "0.0.0", 5 | "type": "module", 6 | "scripts": { 7 | "dev": "vite", 8 | "build": "vite build", 9 | "lint": "eslint . --ext js,jsx --report-unused-disable-directives --max-warnings 0", 10 | "preview": "vite preview" 11 | }, 12 | "dependencies": { 13 | "axios": "^1.6.7", 14 | "react": "^18.2.0", 15 | "react-dom": "^18.2.0" 16 | }, 17 | "devDependencies": { 18 | "@types/react": "^18.2.43", 19 | "@types/react-dom": "^18.2.17", 20 | "@vitejs/plugin-react": "^4.2.1", 21 | "eslint": "^8.55.0", 22 | "eslint-plugin-react": "^7.33.2", 23 | "eslint-plugin-react-hooks": "^4.6.0", 24 | "eslint-plugin-react-refresh": "^0.4.5", 25 | "vite": "^5.0.8" 26 | } 27 | } 28 | -------------------------------------------------------------------------------- /week-9/Custom-Hooks/public/vite.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /week-9/Custom-Hooks/src/App.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/junaidahmed-One/Cohort-in-class-coding/5a545c799251f07f8bd62f8957f9de5f4d1ba13f/week-9/Custom-Hooks/src/App.css -------------------------------------------------------------------------------- /week-9/Custom-Hooks/src/App.jsx: -------------------------------------------------------------------------------- 1 | import { useEffect, useState } from "react"; 2 | import axios from "axios"; 3 | 4 | function useTodos(n) { 5 | const [todos, setTodos] = useState([]); 6 | const [loading, setLoading] = useState(true); 7 | 8 | useEffect(() => { 9 | const value = setInterval(() => { 10 | axios.get("https://sum-server.100xdevs.com/todos").then((res) => { 11 | setTodos(res.data.todos); 12 | setLoading(false); 13 | }); 14 | }, n * 1000); 15 | 16 | axios.get("https://sum-server.100xdevs.com/todos").then((res) => { 17 | setTodos(res.data.todos); 18 | setLoading(false); 19 | }); 20 | 21 | return () => { 22 | clearInterval(value); 23 | }; 24 | }, [n]); 25 | 26 | return { todos, loading }; 27 | } 28 | 29 | function App() { 30 | const { todos, loading } = useTodos(3); 31 | 32 | if (loading) { 33 | return
loading...
; 34 | } 35 | 36 | return ( 37 | <> 38 | {todos.map((todo) => ( 39 | 40 | ))} 41 | 42 | ); 43 | } 44 | 45 | function Track({ todo }) { 46 | return ( 47 |
48 | {todo.title} 49 |
50 | {todo.description} 51 |
52 | ); 53 | } 54 | 55 | export default App; 56 | -------------------------------------------------------------------------------- /week-9/Custom-Hooks/src/assets/react.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /week-9/Custom-Hooks/src/index.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/junaidahmed-One/Cohort-in-class-coding/5a545c799251f07f8bd62f8957f9de5f4d1ba13f/week-9/Custom-Hooks/src/index.css -------------------------------------------------------------------------------- /week-9/Custom-Hooks/src/main.jsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import ReactDOM from "react-dom/client"; 3 | import App from "./App.jsx"; 4 | import "./index.css"; 5 | 6 | ReactDOM.createRoot(document.getElementById("root")).render(); 7 | -------------------------------------------------------------------------------- /week-9/Custom-Hooks/vite.config.js: -------------------------------------------------------------------------------- 1 | import { defineConfig } from 'vite' 2 | import react from '@vitejs/plugin-react' 3 | 4 | // https://vitejs.dev/config/ 5 | export default defineConfig({ 6 | plugins: [react()], 7 | }) 8 | -------------------------------------------------------------------------------- /week-9/TypeScriptLearning/node-app/.gitignore: -------------------------------------------------------------------------------- 1 | dist -------------------------------------------------------------------------------- /week-9/TypeScriptLearning/node-app/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "app", 3 | "version": "1.0.0", 4 | "description": "", 5 | "main": "index.js", 6 | "scripts": { 7 | "test": "echo \"Error: no test specified\" && exit 1" 8 | }, 9 | "keywords": [], 10 | "author": "", 11 | "license": "ISC" 12 | } 13 | -------------------------------------------------------------------------------- /week-9/TypeScriptLearning/node-app/src/Arrays.ts: -------------------------------------------------------------------------------- 1 | function max(arr: number[]): number { 2 | let ans = 0; 3 | 4 | for (let i = 0; i < arr.length; i++) { 5 | if (arr[i] > ans) { 6 | ans = arr[i]; 7 | } 8 | } 9 | return ans; 10 | } 11 | 12 | console.log(max([1, 20, 4, 3, 6])); 13 | 14 | interface User { 15 | name: string; 16 | password: string | number; 17 | age: number; 18 | } 19 | 20 | function filterUsers(user: User[]) { 21 | return user.filter((person) => person.age >= 18); 22 | } 23 | 24 | const user = [ 25 | { name: "Junaid", password: 12334, age: 12 }, 26 | { name: "Ahmed", password: "fdsgsdf", age: 18 }, 27 | { name: "Raam", password: 123, age: 20 }, 28 | { name: "Rohan", password: "fsdfsd", age: 16 }, 29 | { name: "Aditya", password: "12334", age: 40 }, 30 | ]; 31 | 32 | console.log(filterUsers(user)); 33 | -------------------------------------------------------------------------------- /week-9/TypeScriptLearning/node-app/src/BasicTypes.ts: -------------------------------------------------------------------------------- 1 | function greet(name: string) { 2 | console.log(`Hello ${name}`); 3 | } 4 | 5 | greet("Junaid"); 6 | 7 | function sum(a: number, b: number): number { 8 | return a + b; 9 | } 10 | 11 | const ans = sum(5, 8); 12 | console.log(ans); 13 | 14 | function isLegal1(a: number): boolean { 15 | if (a >= 18) { 16 | return true; 17 | } 18 | return false; 19 | } 20 | 21 | console.log(isLegal1(13)); 22 | 23 | //void is type for function 24 | function runafter1S(callback: () => void) { 25 | setTimeout(callback, 1000); 26 | } 27 | runafter1S(() => console.log("Runs after 1 sec")); 28 | -------------------------------------------------------------------------------- /week-9/TypeScriptLearning/node-app/src/EnumsAndGenerics.ts: -------------------------------------------------------------------------------- 1 | enum Direction { 2 | UP, 3 | DOWN, 4 | RIGHT, 5 | LEFT, 6 | } 7 | 8 | function doSomething(keyPressed: Direction) { 9 | console.log(keyPressed); 10 | } 11 | 12 | doSomething(Direction.UP); 13 | 14 | enum Direction1 { 15 | UP = 1, 16 | //by default when assigned, the rest follows the next 17 | DOWN, // 2 18 | RIGHT, // 3 19 | LEFT, //4 20 | } 21 | 22 | console.log(Direction1.DOWN); 23 | 24 | enum Direction2 { 25 | UP = "UP", 26 | DOWN = "DOWN", 27 | RIGHT = "RIGHT", 28 | LEFT = "LEFT", 29 | } 30 | 31 | console.log(Direction2.RIGHT); 32 | 33 | function getGenericType(arr: T[]) { 34 | return arr[0]; 35 | } 36 | 37 | console.log(getGenericType([1, 2, "Junaid"])); 38 | -------------------------------------------------------------------------------- /week-9/TypeScriptLearning/node-app/src/Interfaces.ts: -------------------------------------------------------------------------------- 1 | interface Users { 2 | firstName: string; 3 | lastName: string; 4 | age: number; 5 | } 6 | 7 | function isLegal(user: Users) { 8 | if (user.age >= 18) { 9 | return true; 10 | } 11 | return false; 12 | } 13 | 14 | console.log(isLegal({ firstName: "Junaid", lastName: "Ahmed", age: 22 })); 15 | -------------------------------------------------------------------------------- /week-9/TypeScriptLearning/node-app/src/Types.ts: -------------------------------------------------------------------------------- 1 | //union, intersection 2 | 3 | type StringOrNumber = string | number; 4 | 5 | function displayId(id: StringOrNumber) { 6 | return `Id is ${id}`; 7 | } 8 | 9 | console.log(displayId(10)); 10 | console.log(displayId("20")); 11 | 12 | type Manager = { 13 | name: string; 14 | age: number; 15 | }; 16 | 17 | type Ceo = { 18 | Status: string; 19 | name: string; 20 | }; 21 | 22 | interface Species { 23 | type: string; 24 | } 25 | // can mix type and interface 26 | type Charater = Manager & Ceo & Species; 27 | 28 | const Alpha: Charater = { 29 | name: "Junaid", 30 | Status: "CEO", 31 | age: 23, 32 | type: "Human", 33 | }; 34 | -------------------------------------------------------------------------------- /week-9/TypeScriptLearning/node-app/src/a.ts: -------------------------------------------------------------------------------- 1 | let x: number = 1; 2 | console.log(x); 3 | --------------------------------------------------------------------------------