This is collection of some big project's codebases built with Reactjs that direct downloaded from some websites. They're good for reading and studying, but not recommended for using in product.

All of codebases in this repo should be reviewed by our team, to ensure they are good for users to reference.

This picture show how we get the source code.

See the "Automate saving source code files" section for an easy way to export the source-mapped files

Notes:

• Before you submit a PR to add a codebase to this repo, you must add it to this index
• Try to keep those items bellow in alphabet sort
• Named template: NAME (URL) - CATEGORIES / ADDED_BY, ADDED_AT. eg: Zappos (https://www.zappos.com/) - eCommerce / Cong Nguyen, 2021/09/20

• Anchor (https://anchor.fm/) - Audio / Cong Nguyen, 2021/09/20

• Bestbuy (https://bestbuy.ca) - eCommerce / Cong Nguyen, 2021/09/20

• Coursera (https://coursera.org) - education / Cong Nguyen, 2021/09/22
• Calibre (https://calibreapp.com/) - Site monitoring / Nguy Thang, 2021/09/24

• Elastic (https://cloud.elastic.co) - Searching / Cong Nguyen, 2021/09/20
• Ello (https://ello.co) - Social / Cong Nguyen, 2021/09/23

• Gatsby Homepage (https://www.gatsbyjs.com) - Landing Page / Khoa Huynh, 2021/09/21
• Glitch (https://glitch.com) - Codesandbox / Nguy Thang, 2021/09/23

• Hubspot (https://app.hubspot.com) - CRM / Cong Nguyen, 2021/09/23

• Intercom (https://intercom.com) - Messaging, Nextjs, SSR / Cong Nguyen, 2021/09/20
• Invision App dashboard (https://invisionapp.com) - Utilities, Marketing tool / Cong Nguyen, 2021/09/23

• Microsoft Outlook (https://outlook.live.com) - Utilities, Email / Cong Nguyen, 2021/09/23

• Pipedrive dashboard (https://pipedrive.com) - CRM / Cong Nguyen, 2021/09/23
• Postman Web (https://web.postman.co) - electron / Cong Nguyen, 2021/09/20

• SendBird (https://dashboard.sendbird.com) - Messaging / Cong Nguyen, 2021/09/20
• Skillshare (https://skillshare.com) - Education / Cong Nguyen, 2021/09/22
• Similarweb (https://pro.similarweb.com) - Ranking / Cong Nguyen, 2021/09/23
• Stackshare (https://stackshare.io) - QA / Cong Nguyen, 2021/09/24

• Telegram (https://web.telegram.org) - Messaging / Cong Nguyen, 2021/09/20
• Toptal Homepage (https://toptal.com) - freelance / Nguy Thang, 2021/09/20
• Tribe Platform (https://tribeplatform.com) - Social / Cong Nguyen, 2021/09/23

• Auth Udacity - (https://auth.udacity.com/) - education / Nguy Thang, 2021/09/20
• Classroom Udacity (https://classroom.udacity.com) - education / Nguy Thang, 2021/09/20

• Zappos (https://www.zappos.com/) - eCommerce / Cong Nguyen, 2021/09/20

Contributions are always welcome, no matter how large or small!

(document how to make a PR is in construction)

We have a facebook group for update and talking about these codebases. Unfortunately, only Vietnamese is supported now. Click here to visit our group.

Chrome Devtools does not allow you to save entire folders from the sources tab, but you can automate this process by opening a Devtools window for the Devtools window itself. To do this:

• Navigate to chrome://inspect/#pages in your browser.
• Look for a title like "DevTools - example.com" where example.com is the target site, and click inspect to open a new Devtools window.
• In the new devtools window, use the following snippet to generate a JSON of all the source-mapped files from the target site.

  // Chrome update made this obsolete
  // let srcMappings = Bindings.resourceMapping.workspace.uiSourceCodes();
  // let srcFiles = Array.prototype.filter.call(srcMappings, (f) => {
  //     return !/^(webpack:\/\/\/.\/node_modules|debugger:\/\/|chrome-extension:\/\/)/.test(f.parentURLInternal)
  // });
  
  let srcFiles = Bindings.debuggerWorkspaceBinding.workspace.projectsForType("network")
      .find(p => p.idInternal === "jsSourceMaps::main")
      .uiSourceCodesList;
  
  await Promise.all(srcFiles.map(async (f) => {
      let file = await f.requestContent();
      if (file.content === null) file.content = file.error || "Error loading file";
  
      let name = f.displayName();
      if (name === "(index)") name = "index.html";
      if (/\?/.test(name)) name = name.replace(/\?.*/, "");
  
      let originName = f.originInternal.replace(/^https?:\/\//, "").replace(/:?[\/\\]+$/g, "").replace(/[\/\\]+/g, "_");
      return {
          name: f.displayName(),
          path: f.parentURLInternal.replace(f.originInternal, ""),
          content: file.content,
          origin: originName
      };
  }));

• Copy the JSON output from the previous snippet
• Using NodeJS, run the following snippet after modifying it with the JSON copied in the previous step.

  const srcFiles = {}; // Replace with copied JSON
  const fs = require("fs");
  const path = require("path");
  
  const outDir = "./output";
  if (!fs.existsSync(outDir)) fs.mkdirSync(outDir);
  
  srcFiles.forEach((file) => {
      file.origin = file.origin.replace(/[\\\/\?\|:\*<>]/g, "");
      file.name = file.name.replace(/\?.*$/g, "").replace(/[\\\/\?\|:\*<>]/g, "");
      const destDir = path.join(outDir, file.origin, file.path).replace(/[\?\|:\*<>]/g, "");
  
      if (!fs.existsSync(destDir)) fs.mkdirSync(destDir, { recursive: true }); 
      try {
          fs.writeFileSync(path.join(destDir, file.name), file.isEncoded ? atob(file.content) : file.content);
      } catch(e) {
          console.warn(`Failed writing file '${path.join(destDir, file.name)}' -`, e.message);
      }
  });