{"id":18671953,"url":"https://github.com/lucky-kashyap/full-stack-web-dev","last_synced_at":"2025-08-08T01:04:52.573Z","repository":{"id":198273743,"uuid":"700478146","full_name":"Lucky-Kashyap/full-stack-web-dev","owner":"Lucky-Kashyap","description":"full stack web dev challenge 75 days","archived":false,"fork":false,"pushed_at":"2025-03-26T16:50:32.000Z","size":78058,"stargazers_count":2,"open_issues_count":0,"forks_count":2,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-04-19T09:09:23.883Z","etag":null,"topics":["bootstrap","css","css-flexbox","ejs","expressjs","html","javascript","mern-stack","mongodb","node-js","react-js"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/Lucky-Kashyap.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2023-10-04T17:08:19.000Z","updated_at":"2025-03-26T16:50:36.000Z","dependencies_parsed_at":"2023-10-11T10:46:25.432Z","dependency_job_id":"20a63ad3-a4ac-449d-9171-c51450446d18","html_url":"https://github.com/Lucky-Kashyap/full-stack-web-dev","commit_stats":null,"previous_names":["lucky-kashyap/full-stack-web-dev"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/Lucky-Kashyap/full-stack-web-dev","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Lucky-Kashyap%2Ffull-stack-web-dev","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Lucky-Kashyap%2Ffull-stack-web-dev/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Lucky-Kashyap%2Ffull-stack-web-dev/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Lucky-Kashyap%2Ffull-stack-web-dev/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Lucky-Kashyap","download_url":"https://codeload.github.com/Lucky-Kashyap/full-stack-web-dev/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Lucky-Kashyap%2Ffull-stack-web-dev/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":269348099,"owners_count":24401885,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","status":"online","status_checked_at":"2025-08-07T02:00:09.698Z","response_time":73,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["bootstrap","css","css-flexbox","ejs","expressjs","html","javascript","mern-stack","mongodb","node-js","react-js"],"created_at":"2024-11-07T09:08:54.646Z","updated_at":"2025-08-08T01:04:52.559Z","avatar_url":"https://github.com/Lucky-Kashyap.png","language":"JavaScript","readme":"# full-stack-web-dev\n\ntake challenge #75 days to complete full stack web dev\n\n### Started with FrontEnd Journey\n\nLearn HTML , CSS \u0026 JavaScript\n\nHTML:\n\nBasic tags , formatting tags , semantic elements.\n\nCSS :\n\nLearn Basics of CSS:\n\nHow to do Styling in an element\n\nDeveloper Projects:\n\nLanding page :\n\nProject 1: Urban Women Wear\n\n![screencapture-127-0-0-1-5500-index-html-2023-10-11-21_40_42](https://github.com/Lucky-Kashyap/full-stack-web-dev/assets/88204554/11518969-d00b-4307-af79-13f592e4899b)\n\nProject 2: Peanut butter get silvs (Inspiration) [[https://getsilvs.webflow.io/]]\n\n![screencapture-127-0-0-1-5500-index-html-2023-10-16-19_23_17](https://github.com/Lucky-Kashyap/full-stack-web-dev/assets/88204554/2fa8bbe3-3001-4618-8847-0dd2f6d20a01)\n\nProject 3: Simple Landing Page\n\n![screencapture-file-D-New-folder-3-Full-stack-Web-dev-front-end-CSS-index-html-2023-11-29-18_14_42](https://github.com/Lucky-Kashyap/full-stack-web-dev/assets/88204554/70f5c00a-92c5-42ae-92c6-7b3303cbdad6)\n\nProject 4: Block Practice\n\n![screencapture-file-D-New-folder-3-Full-stack-Web-dev-front-end-CSS-Block-practice-index-html-2023-11-29-18_15_55](https://github.com/Lucky-Kashyap/full-stack-web-dev/assets/88204554/17fa9fce-fd72-409a-9699-d7d37d625b16)\n\nProject 5: Fashion Arrival From (Adobe XD) Design\n\n![screencapture-file-D-New-folder-3-Full-stack-Web-dev-front-end-CSS-Project-1-index-html-2023-11-29-18_16_53](https://github.com/Lucky-Kashyap/full-stack-web-dev/assets/88204554/0b2f8294-e935-41bb-a7a2-f9667f24b5a1)\n\nProject 6: Maria Michno From (Adobe XD) Design\n\n![screencapture-file-D-New-folder-3-Full-stack-Web-dev-front-end-CSS-Project-2-index-html-2023-11-29-18_17_40](https://github.com/Lucky-Kashyap/full-stack-web-dev/assets/88204554/3966e750-3bdb-456b-9b25-00ddcf95a5ea)\n\nProject 7: Apna College Website Landing Page [[https://www.apnacollege.in/course/delta]]\n\n![screencapture-file-D-New-folder-3-Full-stack-Web-dev-front-end-CSS-Project-Apna-college-index-html-2023-11-29-18_18_23](https://github.com/Lucky-Kashyap/full-stack-web-dev/assets/88204554/fbcfe28a-ad62-438f-82de-541786169440)\n\nProject 8: Blog Post\n\n![screencapture-127-0-0-1-5500-2023-11-04-17_38_20](https://github.com/Lucky-Kashyap/full-stack-web-dev/assets/88204554/c06e20a0-b02c-4813-89ff-7df30d1098af)\n\nProject 9: Microsoft UI Design (Home Page clone) [[https://www.microsoft.com/en-in/]]\n\n![screencapture-127-0-0-1-5500-index-html-2023-10-24-17_01_57](https://github.com/Lucky-Kashyap/full-stack-web-dev/assets/88204554/47097d8a-bb85-438c-9736-548444ffb282)\n\nProject 10: Pentaclay (Home Page) [[https://pentaclay.com/]]\n\n![screencapture-127-0-0-1-5500-index-html-2023-11-20-12_28_45](https://github.com/Lucky-Kashyap/full-stack-web-dev/assets/88204554/5789c98a-1480-4098-b5f1-130dc0469175)\n\nProject 11: Vmake Fashion Model (Complete Home page with CSS Effects) [[https://vmake.ai/?utm_source=dribbble_designer09]]\n\n![screencapture-file-D-New-folder-3-Full-stack-Web-dev-front-end-CSS-Project-v-make-index-html-2023-11-29-18_22_24](https://github.com/Lucky-Kashyap/full-stack-web-dev/assets/88204554/82657f23-0c7f-440f-98ff-21b97c935e19)\n\nProject 12: School UI (Figma Design) [[https://www.figma.com/file/sfmVzdPgFIWblLk3qzRdL1/Railway-school-ui?node-id=736%3A1418\u0026mode=dev]]\n\n![screencapture-file-D-New-folder-3-Full-stack-Web-dev-front-end-CSS-school-ui-index-html-2023-11-29-18_23_36](https://github.com/Lucky-Kashyap/full-stack-web-dev/assets/88204554/898e8ad7-32a0-4630-9482-536b4a49dc82)\n\nProject 13: SpiderMan UI (Figma Design) [[https://www.figma.com/file/ypa9bzTvujICcbDbD8vDFb/test-(Copy)?type=design\u0026node-id=0-1\u0026mode=design\u0026t=NBKJVyzpQBPd0h0Z-0]]\n\n![screencapture-file-D-New-folder-3-Full-stack-Web-dev-front-end-CSS-Spiderman-landing-page-index-html-2023-11-29-18_24_26](https://github.com/Lucky-Kashyap/full-stack-web-dev/assets/88204554/49a5efc8-c143-4a30-8e84-2a6f0a8b0faf)\n\nVisit Link : [[https://spiderman-landing-page.netlify.app/]]\n\nProject 14: Landing Page [[https://thisisdigital.co.uk/]]\n\n![screencapture-file-D-New-folder-3-Full-stack-Web-dev-front-end-CSS-css-landing-page-this-uk-index-html-2023-11-29-18_26_09](https://github.com/Lucky-Kashyap/full-stack-web-dev/assets/88204554/df2cd02c-47ae-47ba-bedd-92edce6a2eaa)\n\nProject 15: Login Form Using Tailwind CSS\n\n- Build Login Form Using Tailwind CSS\n\nProject ShowCase :\n\n![Screenshot (3397)](https://github.com/Lucky-Kashyap/full-stack-web-dev/assets/88204554/97c175f5-1b15-4d86-87b5-1d5304c17f46)\n\n## Tailwind CSS:\n\n- Class Based Styling\n\n- Utility CSS Library\n- Utility first-CSS-FrameWork\n\n- Customization Also possible\n\n- via CDN\n\n      \u003cscript src=\"https://cdn.tailwindcss.com\" defer\u003e\u003c/script\u003e\n\n- Use Post CSS to use tailwind\n\n- generate package.json via\n\n      npm init -y\n\n- Install via these commands\n\n      npm install -D tailwindcss postcss autoprefixer\n      npx tailwindcss init -p\n\n- postcss.config.js\n\n       module.exports = {\n            plugins: {\n            tailwindcss: {},\n            autoprefixer: {},\n            }\n      }\n\n- tailwind.config.js\n\n            /** @type {import('tailwindcss').Config} */\n                  module.exports = {\n                        content: [\"*\"],\n                        theme: {\n                        extend: {},\n                        },\n                        plugins: [],\n            }\n\n- style.css\n\n            @tailwind base;\n            @tailwind components;\n            @tailwind utilities;\n\n- install vite\n\n            npm i vite\n\n- in package.json\n\n            \"dev\":\"vite\"\n\n- to run project\n\n      npm run dev\n\n- It will start the project on localhost\n\n## Tailwind CSS Customization:\n\n- Customized tailwind.config.js file\n\n  - give customized color\n  - background color according to our need\n  - many things we can customize\n  - How we can make our custom value\n\n            fontSize: {\n                  \"10xl\": \"10rem\",\n            },\n\n  - customize text-10xl\n\n                  theme: {\n            colors: {\n                  // pink: \"#ffc0cb\",\n                  // red: \"#56f543\",\n                  // red: {\n                  //   99: \"#56f543\",\n                  // },\n                  blue: {\n                  100: \"#1fb6ff\",\n                  200: \"#1fb6ff\",\n                  390: \"#1fb6ff\",\n                  600: \"#1fb6ff\",\n                  },\n                  purple: \"#7e5bef\",\n                  pink: \"#ff49db\",\n                  orange: \"#ff7849\",\n                  green: \"#13ce66\",\n                  yellow: \"#ffc82c\",\n                  \"gray-dark\": \"#273444\",\n                  gray: \"#8492a6\",\n                  \"gray-light\": \"#d3dce6\",\n            },\n            extend: {\n                  fontSize: {\n                  \"10xl\": \"5rem\",\n                  },\n                  fontWeight: {\n                  xl: 900,\n                  },\n                  screens: {\n                  hello: { min: \"640px\", max: \"767px\" },\n                  },\n            },\n\n## Project Using Tailwind CSS (Paytm Clone):\n\n- SetUp files for building paytm Clone\n\n- Use tailwind utility classes to power up project\n\n- Completed Paytm Clone Using Tailwind CSS (Build)\n\n#### Project Showcase :\n\n![screencapture-localhost-5173-2024-03-13-21_25_32](https://github.com/Lucky-Kashyap/full-stack-web-dev/assets/88204554/c53d5f40-8c79-4ee4-9d75-db5a0602d94b)\n\n## Project Using Tailwind CSS (Zeplin Extensions)\n\n- Take reference from [[https://extensions.zeplin.io/]]\n\n- Use Customzation to set the UI\n\n- In tailwind.config.js set own colors and shadow of an element\n\n- Zeplin Config \u0026 Class generator\n\n- This tool makes it easy to generate Tailwind CSS configurations. A well-organized workspace where developers and designers can come together to collaborate to create and deploy products. This tool generates snippets of code from designers made by designers.\n\n#### Project Showcase :\n\n![screencapture-localhost-5173-2024-03-14-20_54_24](https://github.com/Lucky-Kashyap/full-stack-web-dev/assets/88204554/c7f4cf22-c2db-4481-a32d-8617daa1687c)\n\n## Learning Bootstrap (v5) :\n\n- Bootstrap Installation (Using CDN)\n\n      \u003clink href=\"https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css\" rel=\"stylesheet\" integrity=\"sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH\" crossorigin=\"anonymous\"\u003e\n\n      \u003cscript src=\"https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js\" integrity=\"sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz\" crossorigin=\"anonymous\"\u003e\u003c/script\u003e\n\n### Basic Intro about Bootstrap\n\n- Bootstrap Typography\n- we can write classes according to our text size we want (h1,h2,h3,h4,h5,h6) these are classes for text size\n- Display Heading\n- Lead Text and Alignment\n- Text decoration \u0026 font-weight\n- Text Colors\n- BG Colors\n- Buttons\n- Button sizes\n- Outlined Style\n- Button Groups\n- Links as buttons\n- Utilities classees\n\n  - Margin and padding it goes from 0 to 5\n  - Borders\n  - Box Shadow\n  - Font weight\n\n### More Classes\n\n#### Container Classes:\n\n- Container\n- Container Fluid\n- Container Small\n- Container Medium\n- Container Large\n- Container Extra Large\n\n#### Bootstrap Navigation:\n\n- Use Navigation of bootstrap\n- Responsive\n\n#### Bootstrap Cards:\n\n- Use card class to make Bootstrap Card\n- Use image title description and a beautiful button\n\n## Card Design:\n\n![screencapture-127-0-0-1-5500-cards-html-2024-04-12-20_43_15](https://github.com/Lucky-Kashyap/full-stack-web-dev/assets/88204554/56918daf-dfd1-4d8a-959c-407a56c64126)\n\n#### Bootstrap Carousel:\n\n- Use Bootstrap Slider for sliding images\n- We can customize it whenever we need\n- Auto Slide\n- Carouel Slider Buttons\n- Carousel Indicators\n- Carousel Caption\n\n#### Bootstrap Modal:\n\n- Button trigger modal\n- Modal Header , Modal Body , Modal Footer\n\n#### Bootstrap Dropdown:\n\n- we can modiy dropdown button and add dropdown links according to our need\n\n- Example single danger button with Dropdown Menu\n- Example split danger button with Dropdown Menu\n\n#### Bootstrap Popover:\n\n- we can show small popup/dialog with next to element\n- we can set its position also\n\n#### Bootstrap ScrollSpy:\n\n- we can use this when we have large text and we want to move over that text\n\n#### Bootstrap Pagination:\n\n- we can set size, disable, pagination icons\n- we can also set its alignment\n\n## Started with JavaScript:\n\nLearn Basics of programming\n\nBuild small-small projects\n\nProject 1: Bulb on off\n\n![screencapture-file-D-New-folder-3-Full-stack-Web-dev-front-end-Javascript-Bulb-on-OFF-index-html-2023-11-29-18_26_57](https://github.com/Lucky-Kashyap/full-stack-web-dev/assets/88204554/4d5a37ed-6f29-4ed9-b63d-f7197a9618cf)\n\nProject 2: Event Timer\n\n![screencapture-file-D-New-folder-3-Full-stack-Web-dev-front-end-Javascript-Event-Timer-index-html-2023-11-29-18_27_27](https://github.com/Lucky-Kashyap/full-stack-web-dev/assets/88204554/a8ab52c0-a376-44c4-a9ac-5999fb335f33)\n\nProject 3: Modal\n\n![screencapture-file-D-New-folder-3-Full-stack-Web-dev-front-end-Javascript-Modal-index-html-2023-11-29-18_28_05](https://github.com/Lucky-Kashyap/full-stack-web-dev/assets/88204554/6edae9f2-b288-46fc-9d4a-27a69da9393e)\n\nProject 4: Login-signup\n\n![screencapture-file-D-New-folder-3-Full-stack-Web-dev-front-end-Javascript-login-signup-index-html-2023-11-29-18_28_33](https://github.com/Lucky-Kashyap/full-stack-web-dev/assets/88204554/77ad73c7-a092-46ec-ba58-eb34e60937ee)\n\n🚀 [GAMECHANGER ] Create Modern Landing Page with HTML CSS JS | Shery.js Launch 🌟\n\n- UI Created.\n- Use Shery JS to add animation\n- Follow Shery JS Github and apply Shery JS in Application\n\n      Shery.imageEffect(element,configurations)\n\nProject ShowCase :\n\n![Screenshot (3352)](https://github.com/Lucky-Kashyap/full-stack-web-dev/assets/88204554/38580b9c-6d27-4dc8-8449-83e29fce916b)\n\n![Screenshot (3354)](https://github.com/Lucky-Kashyap/full-stack-web-dev/assets/88204554/624345dc-d878-4fea-9d88-8bc5564d5a1d)\n\n![Screenshot (3355)](https://github.com/Lucky-Kashyap/full-stack-web-dev/assets/88204554/19e13936-608c-46aa-8211-ace1a9202ffc)\n\nMove to React JS Library:\n\nLearn Basics of react-js\n\n- How react works.\n- About components.\n- Rendering.\n- Types of components.\n- state variables\n- react Hooks.\n- Event Handling\n- context API\n\nImplement all these learning inside project:\n\nProject 1: Bharat clock APP v1\n\nFeatures:\n\n- show date \u0026 time\n- using Date method\n\nUpdated Version v2:\n\nUse React Hooks: to calculate correct date \u0026 time , with time clear it\n\n            const [timer, setTimer] = useState(new Date());\n\n            useEffect(() =\u003e {\n\n                  const intervalId = setInterval(() =\u003e {\n                        setTimer(new Date());\n                  }, 1000);\n\n                  return () =\u003e {\n                        clearInterval(intervalId);\n                  };\n            }, []);\n\nProject ShowCase :\n\n![ezgif com-video-to-gif (2)](https://github.com/Lucky-Kashyap/full-stack-web-dev/assets/88204554/88f475b7-d959-40d7-958b-74006cc8079d)\n\nProject 2: Calculator APP\n\nFeatures:\n\n- create input box\n- create different types of buttons of calculator UI\n- implement functionality to calculate things\n- use functions\n\nProject ShowCase :\n\n![ezgif com-video-to-gif (3)](https://github.com/Lucky-Kashyap/full-stack-web-dev/assets/88204554/51fa8f2f-0d5b-4202-897a-8e0e13962cb2)\n\nVisit Link : [[https://calculator-app-v.netlify.app/]]\n\nProject 3: Todo APP\n\nFeatures:\n\n- create two input boxes (item \u0026 date)\n- add items to todo\n- remove item from todo\n\nProject ShowCase :\n\n![ezgif com-video-to-gif (4)](https://github.com/Lucky-Kashyap/full-stack-web-dev/assets/88204554/4082f548-59d0-4abe-b2a5-19a5fa589085)\n\nProject 4: Social Media APP\n\nFeatures:\n\n- create UI with Bootstrap\n- use context API for managing posts\n- ADD Post\n- Delete Post\n- Use API to add post \u0026 delete post (Dummy JSON API)\n\nProject ShowCase :\n\n![ezgif com-video-to-gif](https://github.com/Lucky-Kashyap/full-stack-web-dev/assets/88204554/cbce161c-a923-4e5c-b938-d2062be718ad)\n\nProject 5: Food-App (Search by input \u0026 Category Wise Filter)\n\nFeatures:\n\n- Use server for data\n- implement search functionality\n- filter food items via category buttons\n\nProject ShowCase :\n\n![ezgif com-video-to-gif (5)](https://github.com/Lucky-Kashyap/full-stack-web-dev/assets/88204554/5724ce85-b869-4316-a742-c7e797d9fa64)\n\nDesign Link : [[https://www.figma.com/file/rephrU2FVgN8MFz6XhnP51/Learn-React-with-10-Projects?node-id=342%3A52\u0026mode=dev]]\n\nProject 6: Mini-Docs-App\n\nFeatures:\n\n- Use Tailwind CSS for UI.\n- Quick practice of react components\n- Use array of object \u0026 map through it with dynamic data\n- create Foreground, Background \u0026 Card component\n- Use react icons library to use icons in docs app\n- also use Framer motion library to move card here \u0026 there according to drag values (motion)\n\nProject ShowCase :\n\n![ezgif com-video-to-gif](https://github.com/Lucky-Kashyap/full-stack-web-dev/assets/88204554/71c963c0-e185-4807-877f-d0b1d4a29136)\n\nProject 7: Tic-Tac-Toe Game\n\nFeature:\n\n- Use board logic for checking 1 2 3 4 5 6 7 8 9\n- Use react icons for display cross \u0026 zero\n- Use html css for UI structure\n- Add event listener on each card and check whether wins or not\n\n      function isWinner(board, symbol) {\n\n      if (board[0] === board[1] \u0026\u0026 board[1] === board[2] \u0026\u0026 board[2] === symbol)\n      return symbol;\n      if (board[3] === board[4] \u0026\u0026 board[4] === board[5] \u0026\u0026 board[5] === symbol)\n      return symbol;\n      if (board[6] === board[7] \u0026\u0026 board[7] === board[8] \u0026\u0026 board[8] === symbol)\n      return symbol;\n\n      if (board[0] === board[3] \u0026\u0026 board[3] === board[6] \u0026\u0026 board[6] === symbol)\n      return symbol;\n      if (board[1] === board[4] \u0026\u0026 board[4] === board[7] \u0026\u0026 board[7] === symbol)\n      return symbol;\n      if (board[2] === board[5] \u0026\u0026 board[5] === board[8] \u0026\u0026 board[8] === symbol)\n      return symbol;\n\n      if (board[0] === board[4] \u0026\u0026 board[4] === board[8] \u0026\u0026 board[4] === symbol)\n      return symbol;\n      if (board[2] === board[4] \u0026\u0026 board[4] === board[6] \u0026\u0026 board[4] === symbol)\n      return symbol;\n\n      return \"\";\n      }\n\n      export default isWinner;\n\nProject ShowCase :\n\n![ezgif com-video-to-gif-converted (1)](https://github.com/Lucky-Kashyap/full-stack-web-dev/assets/88204554/417ca101-3dfc-440c-bd81-fd5246370d63)\n\nProject 8: React-Image-Slider\n\nFeatures:\n\n- Implement carousel functionality.\n- Slide Images using react-slick\n\n      npm install react-slick slick-carousel\n\n- Use Images inside Slider component to implement functionality \u0026 config settings of slick to use it\n\nProject ShowCase :\n\n![ezgif com-optimize (1)](https://github.com/Lucky-Kashyap/full-stack-web-dev/assets/88204554/910af0db-3acf-4c0c-93de-72b4dd32e7e0)\n\nProject 9: React Multi Language Support Application\n\nFeatures:\n\n- Use i18 Next technology for knowing the current language and change it accordingly\n\n- Give interalization language feature to the app\n\nProject ShowCase :\n\nProject 10 (Dark/Light Mode) :\n\n- Implement Dark/Light Mode Feature\n\n### Solving Challenge Job Board\n\nBuild a job board that displays the latest job postings fetched from the Hacker News API, with each posting displaying the job title, poster, and date posted.\n\nRequirements\n\n- The page should show 6 jobs on initial load with a button to load more postings.\n- Clicking on the \"Load more\" button will load the next page of 6 postings. The button does not appear if there aren't any more postings to load.\n- If there's a url field returned for the job details, make the job title a link that opens the job details page in a new window when clicked.\n- The timestamp can be formatted in any way you like.\n\n# API\n\n- Hacker News has a public API to fetch jobs by Y Combinator companies:\n\n# Job Stories\n\nFetches a list of job posting IDs.\n\n- URL: https://hacker-news.firebaseio.com/v0/jobstories.json\n- HTTP Method: GET\n- Content Type: json\n\nJob Details\n\n- Fetches job posting details given its ID.\n\n- URL: https://hacker-news.firebaseio.com/v0/item/{id}.json\n- HTTP Method: GET\n  Content Type: json\n\n# Notes\n\nThe focus of this question is on functionality and not on styling, but feel free to beautify the page.\nTo improve the user experience and avoid overfetching, you may want to limit the number of job details fetched to the number of jobs visible on the page.\n\nProject ShowCase :\n\n![ezgif com-video-to-gif](https://github.com/Lucky-Kashyap/full-stack-web-dev/assets/88204554/ee117ea0-dac6-4bca-a75f-dbe14a06aaee)\n\nVisit Link : [[https://job-on-board.netlify.app/]]\n\n### Project Registration Form Using MySql:\n\n- create simple Form with fields username,email,mobile,password and a save button\n\n- save button will show data on UI in the table form.\n\n- while clicking on save button trigger post request through axios to save data inside mysql database\n\n- firstly we have to configure mysql with project and start server\n\n- Then post data and check on mysql workbench whether data save or not\n\n- server code :\n\n            const express = require(\"express\");\n            const bodyParser = require(\"body-parser\");\n            const mysql = require(\"mysql\");\n            const cors = require(\"cors\");\n\n            const app = express();\n\n            const port = 3000;\n            app.use(cors());\n\n            app.use(bodyParser.json());\n\n            const connection = mysql.createConnection({\n            host: \"localhost\",\n            user: \"root\",\n            password: \"rootlucky\",\n            database: \"registration\",\n            });\n\n            // Connect to MySQL\n            connection.connect((err) =\u003e {\n            if (err) {\n            console.error(\"Error connecting to MySQL:\", err);\n            return;\n            }\n            console.log(\"Connected to MySQL database\");\n            });\n\n            // POST endpoint for user registration\n            app.post(\"/userReg\", (req, res) =\u003e {\n            const { username, email, mobile, password } = req.body;\n            const sql =\n            \"INSERT INTO TestUser2 (username, email, mobile, password) VALUES  (?,?,?,?)\";\n            const values = [username, email, mobile, password];\n\n            connection.query(sql, values, (err, result) =\u003e {\n            if (err) {\n                  console.error(\"Error executing SQL query:\", err);\n                  res.status(500).json({ message: \"Registration failed\" });\n                  return;\n            }\n            console.log(\"User registered successfully\");\n            res.status(200).json({ message: \"User registered successfully\" });\n            });\n            });\n\n            // Start the server\n            app.listen(port, () =\u003e {\n            console.log(`Server is running on port ${port}`);\n            });\n\n- on save button this function runs that save the data and post data into mysql table\n\n            const handleClick = async () =\u003e {\n            setRegisteredUsers([...registeredUsers, formData]);\n            setFormData({ username: \"\", email: \"\", mobile: \"\", password: \"\" });\n\n            try {\n                  const response = await axios.post(\n                  \"http://localhost:3000/userReg\",\n                  formData\n                  );\n                  console.log(response.data); // Assuming server sends back success message\n                  // You can handle success message here\n            } catch (error) {\n                  console.error(\"Error:\", error.message);\n                  // Handle error here\n            }\n            };\n\n#### Project Showcase :\n\n![Screenshot (3734)](https://github.com/Lucky-Kashyap/full-stack-web-dev/assets/88204554/f267e219-b138-41c4-ac3b-0f1328e7a83c)\n\n![Screenshot (3735)](https://github.com/Lucky-Kashyap/full-stack-web-dev/assets/88204554/edaf59e3-2bc9-46c5-8d8c-f8a15f807a47)\n\nLearning Advance topics:\n\n- state management library\n- advance hooks\n- react-routing\n- API Handling\n- react-redux \u0026 react-redux-toolkit\n- RTK\n- Many more...\n\n## IPL Project:\n\n- Start creating basic IPL Proj Which displays matches, team, table points and many more...\n\n- Use cricbuzz API for data\n\n- Added MatchDetail feature\n\n## React Assignment (Validate OTP):\n\n- ✅ Auto-focus Navigation: Moves focus to the next input field after entering a digit.\n- ✅ Backspace Handling: Deletes the digit first, then moves focus back when pressed again.\n- ✅ Dynamic Input Fields: Supports different OTP lengths.\n- ✅ Optimized with useRef: Uses React's useRef for direct input control.\n- ✅ User-friendly Experience: Smooth transitions between fields.\n\n## Learning Redux:\n\n#### Redux Fundamentals\n\nNow Move to Backend Part:\n\n### 🚀 Node JS Basics:\n\n##### Process:\n\n- process: this object provides information about, and control over, the current Node.js process.\n\n- process.argv: returns an array containing the command-line arguments passed when the node.js process was launched.\n\n##### module.exports\n\n- requiring files\n\n- require() a build-in function to include external modules that exist in seperate files. module.exports a special object\n\n- installing packages\n\n- node_modules: The node_modules folder contains every installed dependency for your project.\n\n- package-lock.json: It records the exact version of every installed dependency, including its sub-dependencies and their version\n\n- package.json the package.json file contains descriptive and functional meta data about a project such as a name,version and dependencies\n\n- npm init\n\n- require vs import\n\n- import {sum} from './math.js';\n\n- we can't selectively load only the piece we need with require but with import, we can selectively load only the piece we need, which can save memory.\n  Loading is asynchronous for 'require' butt can be asynchronous for 'import'\n\n### 🚀 Backend (Node JS) Series - Learn What Matters 1: Understanding the Internet\n\n🌐 What is the Internet?\n\n◽Discover the origins and evolution of the Internet, and why it's such a crucial part of our daily lives.\n\n🌐 Ownership of the Internet\n\n◽Learn about the decentralized nature of the Internet and explore who owns and manages this vast global network.\n\n🌐 Data Transfer\n\n◽Dive into the fascinating mechanisms behind how your messages and data travel across the Internet. We explore the role of towers and undersea fiber optic cables.\n\n🌐 Packets and Servers\n\n◽Uncover the magic of data packets and how they ensure efficient communication across the web. We also touch on the role of servers in this process.\n\n🌐 HTTP vs. HTTPS\n\n◽Understand the importance of secure web browsing and the differences between HTTP and HTTPS protocols.\n\n🌐 Ports\n\nExplore the concept of ports in networking and how they facilitate the flow of data between your computer and web servers.\n\n### 🚀 Backend (Node JS) Series - Learn What Matters 2: Mastering Node.js Fundamentals\n\n- what is backend ?\n  backend developer wo banda hai jo ki server and db program karta hai\n- why backend\n\n      download now  par kuch ho\n      to make websites more usable and purpose ful for the audience, to make websites dynamic\n\n- why not frontend alone ?\n\n      with frontend websites are static and they are of not much use.\n\n- what do we need ?\n\n      node js, mongodb, mongoose js, express js\n\n- what should we make to hit big companies ?\n\nCONTENT\n\n- node js install\n\n      install ka matlab hota hai aapke laptop/computer/tablet usmein files ko copy karna\n\n- import and export\n\n      var figlet = require(\"figlet\");\n      figlet(\"Hello World!!\", function (err, data) {\n          if (err) {\n              console.log(\"Something went wrong...\");\n              console.dir(err);\n              return;\n          }\n          console.log(data);\n      });\n\n- run the code\n\n      node ja hai khoob saara c++ ka code jo ki liya gaya hai chrome browser ke v8 engine ke code se\n      aur is c++ code jisko liya gaya usey wrap kar\n      diya gaya js code se and ye hume allow krta hai ke hum js code likhien aur ye js code accept karega and c++ ke basis par aapko ek server\n      environmant bana kar deta hai, par sirf tab tak\n       ye code chalayega  jab tak apka node (v8 engine and js wrapper) chaalu hai\n\n-- node js core usage \u0026 usage \u0026 understanding - http\n\n- npm usage\n\n         npm - naan paneer makhni\n         npm ek jagah hai jaha par khoob saare packages milte hai\n         bani banaai cheejein/features kehlaate hai packages\n\n      text -\u003e voice\n\n      // hey hello\n\nnpm package for text -\u003e audio\n\n- express\n\n      // express fromework for node js\n      // express k use case =\u003e routing\n      // routing =\u003e GET POST PUT PATCH DELETE\n      // /profile = profile\n      // /contact = contact\n      // /like/hfvyhjgb = like post\n      // /comment/jhmvubhjn = comment\n      // /cart = cart\n\n- express generator\n- mongodb\n\n-- intermediate mongodb\n\n-- api development\n\n-- authentication and authorization\n\n-- error handling\n\n- middleware\n\n  middleware ek aisa function hai jo kisi bhi route se pehle chalta hai, jiska matlab aapka route chalne se pehle agar aap koi kaam\n  karana chaahte ho to middleware\n  ka upyog kiya jaa sakta hai\n\nroute pe chalne se pehle print karo chala on console\n\nroute chalne se pehle route pe hits counter ki value badhegi\n\niska matlab route chlne se pehle jo chalega woh hai middleware\n\nsirf ek dikkat hai agar humara iddleware chl gya toh req jaam ho jati hai aur route tak nahi pahuch paati\n\n### 🚀 Express.js - Learn What Matters: Mastering the Framework | Backend (Node JS) Series\n\n- node vs express :\n\n            node is the main thing express ke code se hum server ka code likh pate hein and\n            server kaisa react karega wo bhi express ke help se likhte hai\n\n- what is the real deal ?\n- what is express js ?\n\n            package, routing perform, server side management \u0026 many more....\n\n- why express js ?\n\n            http is difficult to use,\n            express makes this easier.\n\n- Routing\n\n            routes banaane ke process ko hum kahte hai routing.\n\n            /profile\n            /home\n            /contact\n            /profile/lucky/jhnvhjngb\n\n- Middleware\n\n      middleware ek aisa function hota hai jo har route se pehle chalta hai, iska matlab\n      saare routes mein koi bhi chale usse pehle middleware chalta hai and usmein likha\n      code pehle execute hota hai\n\n      node ke saath ek dikkat hai ki agar control ek baar bhi kisi middleware par gaya to control khud se agle route/middleware par nahi\n      jaayega, use agle par lejaane ke liyein aapko push karna padega aur ye push kahlaayega next ko chalaana\n\n- Request and Response\n\n              req mein saara data hota hai aane waale user ki request ki\n              taraf ka, jaise ki uski location, info and other things.\n\n              res mein controls hote hai jinke basis pe hum server se response bhej paate hai\n\n              next is just a push so that our request moves to the next thing which\n\n              should be executed.\n\n- Route Parameters\n\n            aisa koi bhi route jiska koi hissa baar baar same rehta hai and kuch hissa baar\n            baar change hota hai iske liye aap ek dynamic route bana skte ho\n\n            /profile/:username\n            /profile/lucky\n            /profile/ansh\n            /profile/sachin\n\nURL mein jab bhi aapke paas ek aisa pattern ho\n\n      req.params\n\nto make any route dynamic you can use :\n\nat the place where you want\nto make it dynamic, and to access there value use req.params\n\n      /author/books/issued/harsh\n      /author/books/issued/harsh\n      /author/books/issued/harshita\n      /author/books/issued/lucky\n      /author/books/issued/ajay\n      /author/books/issued/:username\n\n- Templates engine\n\n      html ke pass superpowers nahi hai calculation krne ki\n      ejs is html with superpower\n\nejs setup karne ke liyein\n\n1.  ejs install\n\n             npm i ejs\n\n2.  configure ejs\n\n             app.set('view engine','ejs')\n\n3.  ek views folder banao\n\n4.  usmein ejs files banao\n\n5.  send ki jagah render karo =\u003e render karte waqt make sure aap views folder ke andar waali hi koi file kaa naam likhein, aur render fnc mein .ejs mention naa karein\n\nye ek style of markup se convert krke apko html dete hai\n\nTemplate Engines : pug, handlebars, ejs, jade, etc...\n\nejs is very very similar to html\n\nek markup style jo ki baad mein convert\nhojaayegi html mein\n\ndata send via EJS File\n\n      res.send('index',{age:23});\n\n- Static Files\n\nimages, stylesheets, frontEnd js setup karna\n\nstatic files setup karne ke liyein:\n\n1.  create a folder called public\n\n2.  create three folders inside it, images, stylesheets, javascripts\n\n3.  configure the express static in script.js file\n\n4.  understand the path\n\n             app.use(express.static('./public'))\n\n- HTTP Methods - get and post\n- Error Handling\n\n      Error Handling refers to how Express catches and processes errors that occur both synchronously and asynchronously. Express comes with a default error handler so you don’t need to write your own to get started.\n\n            app.get(\"/error\", (req, res, next) =\u003e {\n                  throw Error(\"Something Went Wrong\");\n            });\n\n\n\n            app.use(function errorHandler(err, req, res, next) {\n                  if (res.headersSent) {\n                        return next(err);\n                  }\n\n                  res.status(500);\n                  res.render(\"error\", { error: err });\n            });\n\n### 🚀 Backend - The EndGame (Part-1) | Mastering Advanced Concepts | Backend (Node JS) Series\n\nexpress generator\n\nhum lgo ko kaafi saara kaam karna padta hai express setup krne mein iska matlab har baar jab hum naya project bnaayege to har baar fir se utna hi kaam krna padega, matlab ki poora code likho and sab kuchh setup karo, is time ko bacha sakte ho with help of express generator, use express generator and it will make the folder structure for you and it will also write the basic code for the project.\n\nexpress genarator ek folder bana ke deta hai, jiska matlab aapko khudse folder nahi banana hai,to express generator saare files ko isi folder mein daal ke dega\n\nsteps to use express generator\n\nsabse pehle jeevan mein ek baar laptop par install karo globally\n\n      npm i express-generator -g\n\nto create new app anywhere:\nopen cmd move to desktop\ncreate new app:\n\n      express appname --view=ejs\n\nnow use two commands\n\n      cd appname\n      npm i\n\nopen it to vs code\n\nmondodb\n\nhar naye app ka data store hoga storage mein, par usey directly rakne ki jagah ek container mein rakhenge, us container mein sirf us app ka data aayega.\n\nmodels (code) =\u003e collection (db)\n\nschema (code) =\u003e documents (db)\n\nek app ka poora data =\u003e db\n\nek app mein variety of data hota hai par poora data hota app ka hi hai, par us data ka sub category kehlata hai collection\n\ncollection malab ki bola users ka data, ek user pe baat kri to hua document\n\n// install mongodb\n// install mongoosejs\n// require and setup connection\n// make schema\n// create model and export\n\n      const mongoose = require('mongoose');\n\n      mongoose.connect('mongodb://127.0.0.1:27017/dbname');\n\n// db create\n\nschema matlab aapko ye batana hai banne waala har document mein kya kya hoga\n\ncreate User :\n\n      const userSchema = mongoose.Schema({\n            username:String,\n            name:String,\n            age:Number\n      })\n\n// har docuement kesa hoga document data\n\n      module.exports = mongoose.model(naam,schema);\n\n// naam se bnega collection\n\n// make collection\n\nFind User:\n\n      router.get(\"/allusers\", async (req, res) =\u003e {\n      // let user = await userModel.find();\n\n      // find one user (specific)\n      let user = await userModel.findOne({username:''lucky});\n\n      res.send(user);\n      });\n\ncreate seperate array of object for creating users:\n\n            const users = [\n                        {\n                        username: \"lucky\",\n                        age: 25,\n                        name: \"divyanshu\",\n                        },\n                        {\n                        username: \"ajay\",\n                        age: 22,\n                        name: \"ajay\",\n                        },\n                        {\n                        username: \"rahul\",\n                        age: 27,\n                        name: \"rahul\",\n                        },\n                        {\n                        username: \"sachin\",\n                        age: 23,\n                        name: \"sachin\",\n                        },\n            ];\n\nDelete User:\n\n            router.get(\"/delete\", async (req, res) =\u003e {\n                        let deletedUser = await userModel.findOneAndDelete({\n                        username: \"lucky\",\n                        });\n\n                        res.send(deletedUser);\n            });\n\ndbs, models, schema, collections, documents\n\ndbs, models, schema, collections, documents\n\nunderstanding sessions\n\n- session and cookies\n\ncreating sessions, using sessions across routes and destroying sessions\n\nresave :\n\n// agar session ki value change na huyi ho toh fir se save mat krna\n\nsaveUninitialized:false\n\n//esa data baar baar save na kro\n\nsecret -\u003e data encrypt kiya jayega\n\n            app.use(\n                  session({\n                  resave: false,\n                  saveUninitialized: false,\n                  secret: \"holabholaholabhola\",\n                  })\n            );\n\n            router.get(\"/\", function (req, res, next) {\n                  // req.session.koibhinam = \"lucky kashyap\";\n                  req.session.ban = true;\n                  res.render(\"index\", { title: \"Express\" });\n                  // res.send(\"hello\");\n            });\n\n            router.get(\"/checksession\", (req, res) =\u003e {\n                  if (req.session.ban === true) {\n                  res.send(\"You are banned\");\n                  }\n            // console.log(req.session);\n            // res.send(\"check kiya hai console dekho\");\n            });\n\ncreate -\u003e req.session.koibhinaam = koibhivalue\n\nread\nreq.session.koibhinaam\n\ndelete\nreq.session.destroy(()=\u003e{\n})\n\nDelete Session:\n\n      router.get(\"/removeban\", (req, res) =\u003e {\n            req.session.destroy((err) =\u003e {\n            if (err) throw Error(err);\n\n            console.log(err);\n            res.send(\"ban remove\");\n            });\n      });\n\ncreating cookies, using cookies across routes and destroying cokkies\n\nCreate Cookie:\n\nBy default package install hota hai\n\n            res.cookie(\"age\", 23);\n\nRead Cookie:\n\n            router.get(\"/read\", (req, res) =\u003e {\n                   console.log(req.cookies);\n\n                  res.send(\"check\");\n            });\n\nDelete Cookie:\n\n            router.get(\"/remove\", (req, res) =\u003e {\n                  res.clearCookie(\"age\");\n\n                  res.send(\"clear cookie\");\n            });\n\nTask 1:\n\nhume ek route banana hai, jismein ek page show ho aur waha par ek css use kra hua page dikhein\n\nexpress js\ninstall\nexpress js boilerplate code\nexpress js ejs setup\ninstall ejs\nset view engine\ncreate views folder\ncreate ejs files\nrender ejs files inside route\n\nexpress static files setup\narchitecture of public folder\n\n      const data =\n      {\n            name: \"Lucky\",\n            age: 23,\n            work: \"Developer\",\n            address: \"Kalindi Vihar\",\n      }\n\n      res.render('index',{data});\n\n\n      \u003ch1\u003eUser Information\u003c/h1\u003e\n      \u003cp\u003eName: \u003c%= data.name %\u003e\u003c/p\u003e\n      \u003cp\u003eAge: \u003c%= data.age %\u003e\u003c/p\u003e\n      \u003cp\u003eProfession: \u003c%= data.work %\u003e\u003c/p\u003e\n\n### 🚀 Backend - The EndGame (Part-2) | ElevateYour Skills | Backend (Node JS) Series\n\nflash messages\n\njab bhi aap ejs page ko dekhenge waha par aapko kisi prakaar ka koi info dena hai, wo kehlata hai flash message, they are more like good looking alerts, warning and descriptions\n\n      install connect-flash\n\n- make sure you put connect flash in app.use function\n\n- kisi bhi route mein aap ko flash create karna hai\n\n- kisi bhi doosre route par app use chalane ka try karein\n\n- aap connect flash ko use nahi kr skte bina express session\n\n      express level-6 --view=ejs\n\n\n      cd level-6\n      npm i\n\n      npm i connect-flash\n\n      npm i express-session\n\n// setup express session\n\n      const expressSession = require(\"express-session\");\n      const flash = require(\"connect-flash\");\n\n\n      app.use(\n      expressSession({\n      resave: false,\n      saveUninitialized: false,\n      secret: \"hello you connect with flash\",\n      })\n      );\n\n      app.use(flash());\n\n// to run\n\n      npx nodemon\n\n\n      localhost:3000\n\n- hum log chahte hai ki jab ham kisi route par jaayein jaise ki /failed us route par ek flash message bane aur wo flash message hum logo ko/ route par dikhein ejs mein\n\n- flash message ka matlab server ke kisi route mein koi data banana and us data ko doosre route kar paana\n\n- flash message aapko ye allow krte hai ki aap is route mein bane huye data ko doosre route mein use kr sko\n\n- agar login hojayein to login page ke baad profile page dikhado\n- agar naa ho to fir, mujhe is route se kisi aur route lejao jaise ki /error aur wha par dikhao failed\n\n      router.get(\"/failed\", function (req, res) {\n      req.flash(\"age\", 23);\n      req.flash(\"name\", \"Lucky Kashyap\");\n      // res.render(\"index\");\n\n      res.send(\"ban gaya data\");\n      });\n\n      router.get(\"/checkkaro\", (req, res) =\u003e {\n      console.log(req.flash(\"age\"));\n      console.log(req.flash(\"name\"));\n      res.send(\"check karlo backend ke terminal par\");\n      });\n\nintermediate mongodb\n\nmongoose setup\n\n      npm i mongoose\n      mongoose.connect('mongodb://127.0.0.1:27017/testingendgame2);\n\n- How can I perform a case-insensitive search in Mongoose?\n\n      router.get(\"/find\", async (req, res) =\u003e {\n      // let user = await userModel.find({ username: \"ajay\" });\n\n      // let regex = new RegExp(\"Ajay\", \"i\");\n\n      let regex = new RegExp(\"^harsh$\", \"i\");\n\n      let user = await userModel.find({ username: regex });\n\n      res.send(user);\n      });\n\n- How do I find documents where an array field contains all of a set of values?\n\n      let user = await userModel.find({ categories: { $all: [\"wwe\"] } });\n\n- How can I search for documents with a specific date range in Mongoose?\n\n       let date1 = new Date(\"2023-12-10\");\n\n       let date2 = new Date(\"2023-12-12\");\n\n      let user = await userModel.find({\n            datecreated: { $gte: date1, $lte: date2 },\n      });\n\n- How can I filter documents based on the existence of a field in Mongoose?\n\n      let user = await userModel.find({ categories: { $exists: true } });\n\n- How can I filter documents based on a specific field's length in Mongoose?\n\n      let user = await userModel.find({\n            $expr: {\n                  $and: [\n                  { $gte: [{ $strLenCP: \"$nickname\" }, 0] },\n                  { $lte: [{ $strLenCP: \"$nickname\" }, 12] },\n                  ],\n            },\n      });\n\nauthentication and authorization\n\n      npm i passport passport-local passport-local-mongoose\n\n- write app.js code first in app.js file and write it after view engine \u0026 before looger\n\n- setup user.js\n\n- in index.js try register first \u0026 then other code as well\n\nchoosing project:\n\nProject Creating :\n\n### [PROJECT🚀] Pinterest Clone Tutorial Part 1: Building Your Own Social Inspiration Platform!\n\nLearning data association\n\n- ek model se doosre model ke data ko jod dena id ke through, matlab ki agar aap ke pass ek user hai to wo post bnaayeha hi, jab post banega to wo user ke dwaara hi banega, to hum kya krte hai jab do aise data aapas mein closely related hote hai to hum dono ko jod dete hai, ki ek model ke bane huyein data ki id doosre model ke data ko dedete hai aur is model ke data ki id pichhle model ke data ko de dete hai.\n\n- do models bnao\n\n- make a mongoose model for me which contains user details, as such username,password,posts which is an array,dp,email and full name.\n\n- make another model for me, this time for posts,every post contains, post text, current date \u0026 time, likes\n\n- ab ek route bnao jisme ek user ban jaayein\n\n      express pinterest --view=ejs\n\n- /route par login and signup hoga\n\n- / route par aapko aapki profile dikhegi and aapke saved posts dikhege, aur ek uploaded section hoga jo abhi nahi bana rahe\n\n- Install mongoose\n\n      npm i mongoose\n\n- / feed yaha par saari images dikhegi\n\n- /click karke image open hojaayegi save kr skte ho\n\n- Use Passport JS for login/register/signUp\n\n      npm i passport passport-local passport-local-mongoose express-session\n\n- configure login/register/signup functionality\n\n- create /profile route \u0026 redirect user when register successfully\n\n- /board/:boardname poora board dikhega\n\n### Upcoming Projects:\n\n- youtube music\n- instagram\n- google photos\n- flipkart\n\n-- deployement\n-- testing\n\n-- realtime stuff\n\n### Self Learning And Building Things Up to Grow More..!!\n\nHappy Coding With ☕ Divyanshu Kashyap 💻🚀\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Flucky-kashyap%2Ffull-stack-web-dev","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Flucky-kashyap%2Ffull-stack-web-dev","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Flucky-kashyap%2Ffull-stack-web-dev/lists"}