2 add better UI with next js

.gitignore

@@ -277,4 +277,11 @@ pyrightconfig.json
 .history
 .ionide
 
-# End of https://www.toptal.com/developers/gitignore/api/python,visualstudiocode,flask
+# End of https://www.toptal.com/developers/gitignore/api/python,visualstudiocode,flask
+
+# Next.js
+frontend/node_modules/
+frontend/.next/
+frontend/out/
+frontend/.vercel
+frontend/.env*.local

README.md

@@ -48,6 +48,15 @@ Sahayak is a revolutionary multilingual job portal specifically designed for blu
 
 ### Frontend
 
+#### Next.js Frontend (New!)
+
+- **Next.js 15+** - Modern React framework with App Router
+- **TypeScript** - Type-safe development
+- **Tailwind CSS 4** - Clean and artistic UI design
+- **React 19** - Latest React features with server components
+
+#### Legacy Flask Frontend
+
 - **Jinja2 templates** - Responsive web design
 - **JavaScript** - Interactive user interface
 - **Tailwind play CDN** - Modern UI components
@@ -56,16 +65,24 @@ Sahayak is a revolutionary multilingual job portal specifically designed for blu
 
 ```
 sahayak/
-├── app.py                 # Main Flask application
+├── app.py                 # Main Flask application (Backend)
 ├── requirements.txt       # Python dependencies
+├── routes/                # Flask API routes
+│   ├── api.py            # RESTful API for Next.js frontend
+│   └── ...               # Other Flask routes
 ├── data/
 │   ├── jobs.json         # Job database with Hindi/English
 │   └── map.py            # Hindi-English keyword mapping
-├── static/
+├── frontend/             # Next.js Frontend (NEW!)
+│   ├── app/              # Next.js pages
+│   ├── components/       # React components
+│   ├── lib/              # API client and utilities
+│   └── types/            # TypeScript types
+├── static/               # Static files for legacy frontend
 │   ├── css/              # Stylesheets
 │   ├── js/               # JavaScript files
 │   └── images/           # Category images
-└── templates/
+└── templates/            # Jinja2 templates for legacy frontend
     ├── base.html         # Base template
     ├── index.html        # Home page with search
     ├── job_detail.html   # Job details page
@@ -78,10 +95,11 @@ sahayak/
 ### Prerequisites
 
 - Python 3.8+
+- Node.js 18+ and npm (for Next.js frontend)
 - pip package manager
 - Internet connection (for AI model downloads)
 
-### Installation Steps
+### Backend Installation
 
 1. **Clone the repository**
 
@@ -90,20 +108,78 @@ git clone <repository-url>
 cd sahayak
 ```
 
-2. **Install dependencies**
+2. **Install Python dependencies**
+
+```bash
+pip install -r requirements.txt
+```
+
+3. **Run the Flask backend**
+
+```bash
+python app.py
+```
+
+The backend API will be available at `http://localhost:5000`
+
+### Frontend Installation (Next.js)
+
+1. **Navigate to the frontend directory**
+
+```bash
+cd frontend
+```
+
+2. **Install Node.js dependencies**
+
+```bash
+npm install
+```
+
+3. **Start the Next.js development server**
+
+```bash
+npm run dev
+```
+
+4. **Access the application**
+   Open your browser and navigate to `http://localhost:3000`
+
+### Legacy Frontend (Jinja2)
+
+The legacy Jinja2 frontend is still accessible at `http://localhost:5000` when running the Flask backend.
+
+## 🎨 Using the New Next.js Frontend
+
+The new Next.js frontend provides a modern, visually impressive UI with:
+
+- **Beautiful gradients** and smooth animations
+- **Responsive design** for all screen sizes
+- **Fast performance** with React Server Components
+- **Type-safe** development with TypeScript
+- **Better UX** with loading states and error handling
+
+### Features
+
+1. **Job Search** - AI-powered semantic search with instant results
+2. **Job Details** - Rich job information with Google Maps integration
+3. **Create Jobs** - Intuitive form with validation
+4. **Profile** - Manage your job postings easily
+
+For detailed frontend documentation, see [frontend/README.md](frontend/README.md)
+
 
 ```bash
 pip install -r requirements.txt
 ```
 
-3. **Run the application**
+3. **Run the backend**
 
 ```bash
 python app.py
 ```
 
-4. **Access the platform**
-   Open your browser and navigate to `http://localhost:5000`
+Then follow the frontend installation steps above to run the Next.js frontend.
 
 ## 🎯 Core Functionality
 

app.py

@@ -1,12 +1,16 @@
 # Main Flask application file
 from flask import Flask
+from flask_cors import CORS
 from config import Config
 from routes import register_blueprints
 
 # Create Flask application
 app = Flask(__name__)
 app.config.from_object(Config)
 
+# Enable CORS for Next.js frontend
+CORS(app, resources={r"/api/*": {"origins": "http://localhost:3000"}})
+
 # Register all blueprints
 register_blueprints(app)
 

frontend/.gitignore

@@ -0,0 +1,41 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.*
+.yarn/*
+!.yarn/patches
+!.yarn/plugins
+!.yarn/releases
+!.yarn/versions
+
+# testing
+/coverage
+
+# next.js
+/.next/
+/out/
+
+# production
+/build
+
+# misc
+.DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+.pnpm-debug.log*
+
+# env files (can opt-in for committing if needed)
+.env*
+
+# vercel
+.vercel
+
+# typescript
+*.tsbuildinfo
+next-env.d.ts

frontend/README.md

@@ -0,0 +1,148 @@
+# Sahayak Frontend - Next.js
+
+This is the modern Next.js frontend for the Sahayak job portal application.
+
+## Features
+
+- 🎨 Modern, clean, and artistic UI design
+- 📱 Fully responsive design for all devices
+- ⚡ Fast performance with Next.js App Router
+- 🎭 Smooth animations and transitions
+- 🔍 Real-time job search functionality
+- 💼 Job creation and management
+- 🗺️ Interactive Google Maps integration
+- 🎯 AI-powered job matching via backend API
+
+## Tech Stack
+
+- **Next.js 15+** - React framework with App Router
+- **TypeScript** - Type-safe development
+- **Tailwind CSS 4** - Utility-first styling
+- **React 19** - Latest React features
+
+## Getting Started
+
+### Prerequisites
+
+- Node.js 18+ and npm
+- Flask backend running on http://localhost:5000
+
+### Installation
+
+1. Navigate to the frontend directory:
+   ```bash
+   cd frontend
+   ```
+
+2. Install dependencies:
+   ```bash
+   npm install
+   ```
+
+3. Create a `.env.local` file (or use the existing one):
+   ```bash
+   NEXT_PUBLIC_API_URL=http://localhost:5000/api
+   ```
+
+4. Start the development server:
+   ```bash
+   npm run dev
+   ```
+
+5. Open your browser and navigate to `http://localhost:3000`
+
+## Available Scripts
+
+- `npm run dev` - Start development server
+- `npm run build` - Build for production
+- `npm start` - Start production server
+- `npm run lint` - Run ESLint
+
+## Project Structure
+
+```
+frontend/
+├── app/                      # Next.js App Router pages
+│   ├── page.tsx             # Home page with job search
+│   ├── layout.tsx           # Root layout with header/footer
+│   ├── jobs/
+│   │   ├── [id]/            # Job detail page
+│   │   └── create/          # Job creation page
+│   └── profile/             # User profile page
+├── components/              # Reusable React components
+│   ├── Header.tsx          # Navigation header
+│   └── JobCard.tsx         # Job listing card
+├── lib/                    # Utility libraries
+│   └── api.ts              # API client for Flask backend
+├── types/                  # TypeScript type definitions
+│   └── index.ts           # Job and API types
+└── public/                # Static assets
+```
+
+## Pages
+
+### Home (`/`)
+- Job search interface with real-time results
+- Display all jobs or filtered results
+- AI-powered semantic search via backend
+- Feature highlights section
+
+### Job Detail (`/jobs/[id]`)
+- Detailed job information
+- Employer contact details
+- Interactive Google Maps location
+- Call-to-action button
+
+### Create Job (`/jobs/create`)
+- Form to post new jobs
+- Category selection
+- Form validation
+- Success/error handling
+
+### Profile (`/profile`)
+- View jobs by employer name
+- Manage and delete own jobs
+- Job statistics
+
+## API Integration
+
+The frontend communicates with the Flask backend via REST API:
+
+- `GET /api/jobs` - Fetch all jobs or search
+- `GET /api/jobs/:id` - Get job details
+- `POST /api/jobs` - Create new job
+- `DELETE /api/jobs/:id` - Delete job
+- `GET /api/profile/:name` - Get employer jobs
+
+## Design Highlights
+
+- **Gradient backgrounds** - Blue, purple, and pink gradients for visual appeal
+- **Modern cards** - Rounded corners, shadows, and hover effects
+- **Smooth animations** - Scale, fade, and transition effects
+- **Emoji icons** - Friendly and accessible visual elements
+- **Responsive layout** - Works seamlessly on mobile, tablet, and desktop
+- **Professional typography** - Inter font for clean readability
+
+## Deployment
+
+To deploy the frontend:
+
+1. Build the application:
+   ```bash
+   npm run build
+   ```
+
+2. Start the production server:
+   ```bash
+   npm start
+   ```
+
+The app will be available on port 3000 by default.
+
+## Environment Variables
+
+- `NEXT_PUBLIC_API_URL` - Backend API base URL (default: http://localhost:5000/api)
+
+## License
+
+Same as the main Sahayak project.