diff --git a/.gitignore b/.gitignore index f138d24..3270126 100644 --- a/.gitignore +++ b/.gitignore @@ -277,4 +277,11 @@ pyrightconfig.json .history .ionide -# End of https://www.toptal.com/developers/gitignore/api/python,visualstudiocode,flask \ No newline at end of file +# 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 \ No newline at end of file diff --git a/README.md b/README.md index b5b62f0..eb2cc1b 100644 --- a/README.md +++ b/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 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 diff --git a/app.py b/app.py index 34bfe6e..12e4ad8 100644 --- a/app.py +++ b/app.py @@ -1,5 +1,6 @@ # Main Flask application file from flask import Flask +from flask_cors import CORS from config import Config from routes import register_blueprints @@ -7,6 +8,9 @@ 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) diff --git a/frontend/.gitignore b/frontend/.gitignore new file mode 100644 index 0000000..5ef6a52 --- /dev/null +++ b/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 diff --git a/frontend/README.md b/frontend/README.md new file mode 100644 index 0000000..a53e8fb --- /dev/null +++ b/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. diff --git a/frontend/app/favicon.ico b/frontend/app/favicon.ico new file mode 100644 index 0000000..718d6fe Binary files /dev/null and b/frontend/app/favicon.ico differ diff --git a/frontend/app/globals.css b/frontend/app/globals.css new file mode 100644 index 0000000..109f0b4 --- /dev/null +++ b/frontend/app/globals.css @@ -0,0 +1,43 @@ +@import "tailwindcss"; + +:root { + --background: #ffffff; + --foreground: #1a1a1a; +} + +@theme inline { + --color-background: var(--background); + --color-foreground: var(--foreground); + --font-sans: var(--font-inter); +} + +body { + background: var(--background); + color: var(--foreground); + font-family: var(--font-inter), system-ui, -apple-system, sans-serif; +} + +/* Custom scrollbar */ +::-webkit-scrollbar { + width: 10px; +} + +::-webkit-scrollbar-track { + background: #f1f1f1; +} + +::-webkit-scrollbar-thumb { + background: #888; + border-radius: 5px; +} + +::-webkit-scrollbar-thumb:hover { + background: #555; +} + +/* Smooth animations */ +* { + transition-property: background-color, border-color, color, fill, stroke; + transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); + transition-duration: 150ms; +} diff --git a/frontend/app/jobs/[id]/page.tsx b/frontend/app/jobs/[id]/page.tsx new file mode 100644 index 0000000..436af75 --- /dev/null +++ b/frontend/app/jobs/[id]/page.tsx @@ -0,0 +1,176 @@ +'use client'; + +import { useState, useEffect } from 'react'; +import { useParams, useRouter } from 'next/navigation'; +import { api } from '@/lib/api'; +import { Job } from '@/types'; +import Link from 'next/link'; + +export default function JobDetailPage() { + const params = useParams(); + const router = useRouter(); + const [job, setJob] = useState(null); + const [loading, setLoading] = useState(true); + const [error, setError] = useState(null); + + useEffect(() => { + fetchJob(); + }, [params.id]); + + const fetchJob = async () => { + try { + setLoading(true); + setError(null); + const data = await api.getJob(Number(params.id)); + setJob(data.job); + } catch (err) { + setError('Failed to fetch job details.'); + console.error(err); + } finally { + setLoading(false); + } + }; + + if (loading) { + return ( +
+
+
+ ); + } + + if (error || !job) { + return ( +
+
+
+ ⚠️ +
+

Error

+

{error || 'Job not found'}

+
+
+ + ← Back to Home + +
+
+ ); + } + + return ( +
+ {/* Back Button */} + + ← Back to Jobs + + + {/* Job Card */} +
+ {/* Header with Gradient */} +
+
+ + {job.category} + + {getCategoryIcon(job.category)} +
+

{job.title}

+
+ + {/* Details */} +
+ {/* Info Grid */} +
+
+ 👤 +
+

Employer

+

{job.employer}

+
+
+ +
+ 📍 +
+

Location

+

{job.location}

+
+
+ +
+ 💰 +
+

Salary

+

{job.salary}

+
+
+ +
+ 📞 +
+

Contact

+

{job.phone}

+
+
+
+ + {/* Description */} +
+

+ 📝 + Job Description +

+

{job.description}

+
+ + {/* Action Button */} + + 📞 Call Employer Now + +
+
+ + {/* Map Section */} +
+

+ 🗺️ + Location on Map +

+
+