This project automates the process of capturing screenshots for various web projects using Puppeteer. It leverages Puppeteer to navigate to different URLs, capture screenshots, and save them for showcasing purposes. The captured screenshots are displayed in a React component named "Header," showcasing each project's name, description, and a screenshot.
- Node.js
- yarn
- Clone the repository:
git clone https://github.com/your-username/puppeteer-project.git
- Install project dependencies:
cd puppeteer-project
yarn install
- Run the Puppeteer script to capture screenshots:
yarn run capture
- Start the development server:
yarn run dev
- Open your browser and navigate to http://localhost:3000 to see the captured screenshots in the Header component.
- scripts/: Contains the Puppeteer script for capturing screenshots.
- public/screenshots/: Directory where captured screenshots will be saved.
- src/: Main application source code.
- components/: Contains React components.
- Header.tsx: React component displaying project information and screenshots.
- projects/: Contains an array of project data for Puppeteer.
- styles/: Contains styled-components styles for components.
- pages/: Next.js pages for rendering the project.
- ...
- components/: Contains React components.
- storybook/: Storybook configuration and stories for the Header component.
- Puppeteer: Headless browser automation tool.
- React: JavaScript library for building user interfaces.
- Next.js: React framework for server-rendered applications.
- Styled Components: CSS-in-JS library for styling components.
- Jest: Testing framework.
- Storybook: UI component development environment.
- ...