Skip to content

Abhishek-Punhani/TS-JS-Workshop-Submission

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

3 Commits
 
 
 
 
 
 

Repository files navigation

README.md for Workshop Task Submission


Automated Web Screenshot Service Challenge: Operation Spicy Screenshot Supremacy

Problem Statement

Greetings, intrepid coders!

Your mission—should you be brave (and slightly crazy) enough to accept it—is to craft an Automated Web Screenshot Service using the darkest corners of JavaScript, the Puppeteer library, and concurrency magic via puppeteer-cluster. Imagine you have an ever-growing list of websites to "grab a visual" from. Instead of cycling through them one by one (like a not-so-glamorous chore), you're going to harness multiple headless browsers at once—basically an army of stealth ninjas snapping screenshots in parallel.

Your final creation will:

  1. Spin up a mini Node.js script that launches several headless Chromium instances using puppeteer-cluster.
  2. Queue up a handful of URLs (the weirder, the better—time to test sneaky corners of the internet).
  3. Capture full-page screenshots and store them locally with a neat naming scheme (maybe incorporating a timestamp or random ID for bragging rights).

Optional Advanced Features:

  • Convert pages to PDFs or gather extra page metrics (like performance stats).
  • Introduce server-based logic so you can spin up your screenshot cluster on demand through an HTTP endpoint.
  • Bolster your concurrency approach with caching, retry logic, or queued scheduling for massive URL lists.

Real-World Use Cases:

  • Bulk Screenshot Testing: Perfect for UI reviews or site design comparisons.
  • Performance Troubleshooting: At scale, you can track how quickly pages load (and brag at stand-ups).
  • Larger-Than-Life Visual Archives: Got a thousand pages to keep an eye on? Summon your concurrency horde.

Core Must-Haves

  1. Concurrency with puppeteer-cluster: Let multiple pages open at once, so you’re not stuck slow-poking through them in sequence.
  2. Configurable URL Input: Hardcode a small list to start, but be ready for the ultimate onslaught of URLs.
  3. Error Handling & Logging: Because the internet is a wild place—some URLs might be down or load weird scripts.

Criteria for “Mission Accomplished”

  • Produce visibly valid screenshots for your chosen list of URLs.
  • Show concurrency in action—monitor your console logs or system resources to confirm multiple browsers spin up.
  • Demonstrate that if some site fails to load, your code gracefully handles the error and doesn’t crash.
  • Bonus points for creative expansions—maybe add an Express server for an on-demand screenshot endpoint or track total time taken for all screenshots and brag about your concurrency speed.

Rules of Engagement

  1. Keep your sense of humor: If something breaks, blame the JavaScript “gremlins,” then fix it gracefully.
  2. Don’t be shy about experimenting with additional libraries or TypeScript for strong typing.
  3. Document your code with clear comments—think of it as a guided tour for any future maintainers (and your future self).

Contributing Guidelines

To contribute to this project, follow these steps:

  1. Fork the Repository: Click the "Fork" button on the top right corner of the repository page to create your own copy.
  2. Clone Your Forked Repository:
    git clone https://github.com/yourusername/yourforkedrepo.git
    cd yourforkedrepo
  3. Create a New Branch: It's a good practice to work on a new branch.
    git checkout -b Name_Branch_rollNo
  4. Implement Your Solution: Add your code following the problem statement and guidelines.
  5. Commit Your Changes:
    git add .
    git commit -m "Add solution for Operation Spicy Screenshot Supremacy"
  6. Push Your Changes:
    git push origin Name_Branch_rollNo
  7. Make a Pull Request (PR): Go to the original repository and click on the "Pull Request" button. Fill out the form with necessary details and submit your PR.

Naming Convention for Branches

Please name your branches in the following format: Name_Branch_rollNo. For example, if your name is John Doe and your roll number is 12345, your branch name should be JohnDoe_ScreenshotService_12345.

Final Words

This challenge is a step into advanced territory—showcasing how Node.js can orchestrate complex tasks beyond your everyday CRUD app. It’ll push you to learn concurrency, automation, and a dash of error handling, all crucial aspects of the unstoppable JavaScript world. So, strap on your coding goggles, muster some nerve, and launch your own screenshot-capturing legion! The internet awaits.

Good luck, and may your screenshots always be crisp and clean!


Happy Coding! 🚀

About

No description, website, or topics provided.

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published