https://github.com/sksmagr23/shannon_frontend
Hack it out - Technex'25 | AI-Powered Energy Generation Predictions
https://github.com/sksmagr23/shannon_frontend
energy-generation-prediction groq-ai hackathon machine-learning nextjs recharts-js tailwind-css
Last synced: about 2 months ago
JSON representation
Hack it out - Technex'25 | AI-Powered Energy Generation Predictions
- Host: GitHub
- URL: https://github.com/sksmagr23/shannon_frontend
- Owner: sksmagr23
- Created: 2025-02-28T06:35:12.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2025-05-09T05:02:21.000Z (about 1 year ago)
- Last Synced: 2025-06-29T16:44:42.876Z (about 1 year ago)
- Topics: energy-generation-prediction, groq-ai, hackathon, machine-learning, nextjs, recharts-js, tailwind-css
- Language: JavaScript
- Homepage: https://shannonntpc.vercel.app/
- Size: 56.9 MB
- Stars: 0
- Watchers: 1
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Hack it out'25 | Technex'25 | Frontend code
## Shannon - Renewable Energy Forecasting Platform
A Next.js based web application for predicting and visualizing renewable energy generation using AI models and interactive data visualization.
## Features
- Interactive MapboxGL integration for location selection and Reverse geocoding for city name lookup.
- Real-time data visualization using Recharts
- Modern UI with Ant Design and Framer Motion animations
- Authentication with Google and github using next-auth
- Fully responsive design
- Real-time data updates and predictions on Dashboard
## Tech Stack
- **Framework**: Next.js 15.2.0
- **UI Library**: React 19
- **Styling**:
- TailwindCSS
- Ant Design
- Framer Motion
- **Maps**: MapboxGL
- **Charts**: Recharts
- **Authentication**: Next-auth
- **API Integration**: Axios
- **AI Integration**: Groq SDK
### Prerequisites
Before running the project, make sure you have:
- Node.js >= 16.0.0
- npm package manager
- A Firebase project with Google Authentication enabled
- Mapbox API key
- Groq API key
### Environment Variables
Create a `.env` file in the root directory with the following variables:
```env
NEXT_PUBLIC_FIREBASE_API_KEY=your_firebase_api_key
NEXT_PUBLIC_FIREBASE_AUTH_DOMAIN=your_firebase_auth_domain
NEXT_PUBLIC_FIREBASE_PROJECT_ID=your_firebase_project_id
NEXT_PUBLIC_FIREBASE_STORAGE_BUCKET=your_storage_bucket
NEXT_PUBLIC_FIREBASE_MESSAGING_SENDER_ID=your_messaging_sender_id
NEXT_PUBLIC_FIREBASE_APP_ID=your_app_id
NEXT_PUBLIC_FIREBASE_MEASUREMENT_ID=your_measurement_id
NEXT_PUBLIC_MAPBOX_TOKEN=your_mapbox_token
NEXT_PUBLIC_GROQ_API_KEY=your_groq_api_key
NEXT_PUBLIC_API_URL=your_backend_url
```
### Installation and local setup
#### 1. Clone the Repository
```bash
git clone https://github.com/sksmagr23/shannon_frontend.git
cd shannon_frontend/shannon
```
#### 2. Install Dependencies
```bash
npm install
# or
yarn install
```
#### 3. Configure Environment Variables
Create a `.env` file in the root directory and add your environment variables:
```bash
cp .env .env.local
# Now edit .env with your actual API keys and credentials
```
#### 4. Start Development Server
```bash
npm run dev
# or
yarn dev
```
#### 5. Access the Application
Open your browser and navigate to:
```
http://localhost:3000
```