Uptime Monitor

Uptime Monitor provides a website monitoring service, to let users know when their endpoints go down. It is featured by configurable website setting and visualized real-time dashboard.

This project uses:

• Next.js as SSR React framework
• Ant Design as React UI library
• tailwindcss as CSS framework
• GraphQL as query language
• Apollo for the communication between the client and backend services
• Nexus to write the GraphQL schemas in Typescript
• Prisma as Typescript ORM

Useful Links

• Heroku APP
• Papertrail as Staging Env Log Management

Requirements

• node >= 14.0.0
• typescript >= 4.3
• yarn

Installation

To install the dependencies, please run

yarn 
# or
yarn install

Configuration

• create a .env.development file and a .env.production file, and set environment variables for development and production respectively.
  • DATABASE_URL: your database URL
  • NEXT_PUBLIC_SERVER: address of Next server
  • EMAIL_*: variables to set up your email service

Usage

For development

• Generate Prisma client

   yarn db-types

• Synchronize the Prisma schema and your database schema

   yarn dev:db-push

• Seed the development database

   yarn dev:seed

  Alternatively, you can also create the data from scratch.
• Start the development server

   yarn dev
  

• Start monitoring service

   yarn dev:start-monitor
  

Finally, open http://localhost:3000 with your browser to see the result.

Also, you can visit http://localhost:3000/api/graphql to explore the API document.

Notice that you need to re-run the yarn db-types and yarn dev:db-push command after every change that's made to your Prisma schema to update the generated Prisma Client code.

For Production

• Build Next application

   yarn build
  

• Synchronize the database if necessary

   yarn prod:db-push
  

• Start the server and the monitoring service

   yarn start