Checkcup - Browserless Puppetter Project Build. Priyanshu Verma - Jun 10 - - Dev Community
Checkcup
Checkcup is a website monitoring tool that fetches the status of websites along with screenshots and active status. It is built using Next.js for the frontend and Puppeteer with Browserless in the backend.
Features
Fetches website status including HTTP status code, response time, and active status.
Captures screenshots of websites for visual verification.
Supports monitoring multiple websites simultaneously.
Demo
Checkcup is a website monitoring tool that fetches the status of websites along with screenshots and active status. It is built using Next.js for the frontend and Puppeteer with Browserless in the backend.
Checkcup
Checkcup is a website monitoring tool that fetches the status of websites along with screenshots and active status. It is built using Next.js for the frontend and Puppeteer with Browserless in the backend.
Features
Fetches website status including HTTP status code, response time, and active status.
Captures screenshots of websites for visual verification.
Supports monitoring multiple websites simultaneously.
VOTE FOR ME ๐ฅบ
Please Vote on Quine: Voting link here
Demo
checkcup-demo.mp4
Live Preview
You can view a live preview of Checkcup here .
Installation
Clone the repository:
git clone https://github.com/your-username/quine-checkcup.git
Install dependencies:
Configure environment variables:
Create a .env
file in the root directory and provide the following variables:
DATABASE_URL=your_database_url
NEXT_PUBLIC_URL=server_url
Replace your_database_url
with the URL of your MongoDB database
Replace server_url
with the URL of your server.
Install dependencies for the server
directory:
Configure environment variables for the server
directory:
Createโฆ
Live Preview
You can view a live preview of Checkcup here .
Installation
Clone the repository:
git clone https://github.com/priyanshuverma-dev/quine-checkcup.git
Enter fullscreen mode
Exit fullscreen mode
Install dependencies:
cd checkcup
bun install
Enter fullscreen mode
Exit fullscreen mode
Configure environment variables:
Create a .env
file in the root directory and provide the following variables:
DATABASE_URL=your_database_url
NEXT_PUBLIC_URL=server_url
Enter fullscreen mode
Exit fullscreen mode
Replace your_database_url
with the URL of your MongoDB database.
Replace server_url
with the URL of your server.
Install dependencies for the server
directory:
cd server
bun install
Enter fullscreen mode
Exit fullscreen mode
Configure environment variables for the server
directory:
Create a .env
file in the server
directory and provide the following variables:
BROWSERLESS_URL=browserless_url
Enter fullscreen mode
Exit fullscreen mode
Replace browserless_url
with the URL of your Browserless instance.
Usage
Start the server:
cd server
bun run dev
Enter fullscreen mode
Exit fullscreen mode
Generate Prisma client:
bunx prisma generate
Enter fullscreen mode
Exit fullscreen mode
Start the development server:
bun run dev
Enter fullscreen mode
Exit fullscreen mode
Open your browser and navigate to http://localhost:3000
.
Enter the URLs of the websites you want to monitor and click on the "Check Status" button.
View the status, response time, and screenshot of each website.
Deployment
To deploy Checkcup to production, follow these steps:
Build the Next.js app:
bun run build
Enter fullscreen mode
Exit fullscreen mode
Start the production server:
bun start
Enter fullscreen mode
Exit fullscreen mode
Visit the deployed URL to access Checkcup.
To deploy the server, follow the same steps as above in server directory.
Technologies Used
Next.js
Puppeteer
Browserless
Contributing
Contributions are welcome! Please feel free to submit issues and pull requests.
License
This project is licensed under the MIT License - see the LICENSE file for details.