Analytics Hub: Custom Google Analytics Dashboard Platform

Analytics Hub is a web application that allows users to sign in with their Google accounts and access their Google Analytics data through a customized dashboard interface. This platform makes analytics data more accessible and actionable compared to Google's standard interface.

Core Features

• Google Authentication: Users sign in with their Google accounts using OAuth 2.0
• Data Visualization: Custom charts and graphs of Google Analytics metrics
• Personalized Dashboards: Users can create and save custom dashboard layouts
• Multi-User Support: Each user manages their own Google Analytics properties
• Data Insights: Simplified presentation of key metrics with actionable recommendations

Tech Stack

This project is built with the T3 Stack:

• Next.js - React framework for building the UI
• TypeScript - Type-safe JavaScript
• Tailwind CSS - Utility-first CSS framework
• tRPC - End-to-end typesafe API layer
• Prisma - Type-safe ORM for database access
• NextAuth.js - Authentication for Next.js

Getting Started

Prerequisites

• Node.js 18+ and npm
• PostgreSQL database
• Google Cloud Platform account with Analytics API access

Setup Instructions

1. Clone the repository

   git clone https://github.com/yourusername/analytics-hub.git
   cd analytics-hub

2. Install dependencies

   npm install

3. Set up environment variables

   • Copy .env.example to .env
   • Update the variables with your own values
   • For Google OAuth, you'll need to create credentials in the Google Cloud Console

4. Set up the database

   # Start the PostgreSQL container
   ./start-database.sh
   
   # Push the schema to the database
   npm run db:push

5. Run the development server

   npm run dev

6. Open http://localhost:3000 in your browser

Google Analytics API Setup

To use the Google Analytics API:

1. Create a project in the Google Cloud Console
2. Enable the Google Analytics API
3. Create OAuth 2.0 credentials
4. Add the credentials to your .env file

Development Workflow

• npm run dev - Start the development server
• npm run build - Build the production application
• npm run start - Start the production server
• npm run lint - Run ESLint
• npm run format:write - Format code with Prettier
• npm run db:studio - Open Prisma Studio to manage your database

Deployment

Follow our deployment guides for:

• Vercel
• Netlify
• Docker

Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

License

This project is licensed under the MIT License - see the LICENSE file for details.