SRK Skill Center - Professional Educational Platform

A high-performance, analytics-driven, and scalable educational service provider website built for SRK Skill Center (Ganaur, Haryana). This project is designed to handle student leads, content management, and user behavior tracking with a modern UI/UX.

---

🛠 Technology Stack (Recruiter Ready)

This platform utilizes a modern full-stack architecture designed for performance, SEO, and scalability.

Frontend

• React.js: For building a dynamic, component-based user interface.
• Tailwind CSS: A utility-first CSS framework used for rapid, responsive, and consistent styling.
• Framer Motion: Used for high-quality, high-performance UI animations and page transitions.
• React Router (v7): Handles client-side routing and deep linking.
• React Icons & Lucide React: Branded and consistent iconography system.
• Recharts: For data visualization on the Administrative Dashboard.

Backend & Storage

• Node.js & Express: (Architecture Blueprint provided) Designed to handle RESTful API requests.
• Strapi (Headless CMS): The chosen solution for enabling non-technical staff to manage courses, prices, and gallery content without code.
• MongoDB Atlas: Cloud-hosted NoSQL database used for storing student leads and custom analytics events.
• Local Storage / Session Storage: Currently implemented for client-side persistence and simulation of backend features.

DevOps & Analytics

• Custom Analytics Engine: Tracks page views, button clicks (WhatsApp/Call/Enroll), and device types.
• Google Analytics 4 (GA4): Ready for global traffic monitoring.
• Vercel/Netlify: Optimized for frontend hosting.
• Render/Railway: Recommended for hosting the Strapi CMS and Node.js backend.

---

🌟 Core Features

• Dynamic Course Catalog: Automatically generated pages for over 8+ professional courses.
• Dual Theme Support: Professional Dark and Light modes with optimized contrast for readability.
• CRM-Style Lead Capture: Integrated inquiry forms that track source, course interest, and timestamp.
• Administrative Dashboard: Real-time visualization of traffic trends, lead counts, and course popularity.
• Mobile-First Design: Optimized for the student demographic, primarily accessing via smartphones.
• HKCL Integration: Highlighted government-authorized learning center status.
• Library Management: Slot-based display and pricing for the institute's study library.

---

💻 Local Development Setup

Follow these steps to run the project on your local machine:

1. Prerequisites

• Node.js (v16 or higher)
• npm or yarn

2. Clone the Project

git clone [your-repository-link]
cd srk-skill-center

3. Install Dependencies

npm install

4. Run Development Server

npm run dev

5. Accessing the App

• Open your browser and navigate to http://localhost:3000
• Staff Login: To access the Admin Dashboard, navigate to /admin or click "Staff Login" in the footer.
• Access Code: The default simulated access code is srkadmin.

6. Build for Production

npm run build

---

🚀 Deployment Strategy

Frontend Deployment on Vercel

1. Connect Repository: Connect your GitHub repository to Vercel.
2. Auto-Deployment: Vercel will automatically detect the Vite configuration and build settings.
3. SPA Routing: The included vercel.json ensures proper routing for the single-page application.
4. Environment Variables: Set any required environment variables in Vercel dashboard (e.g., GEMINI_API_KEY if used).

Backend Deployment

1. Backend: Follow the server.ts blueprint to set up a Node/Express server on Render.com or Railway.
2. Database: Set up a free cluster on MongoDB Atlas and whitelist the IP of your backend server.
3. Environment Variables:
   • MONGODB_URI: Your MongoDB connection string.
   • STRAPI_API_KEY: Your CMS authentication token.
   • PORT: 5000 (standard for backend).

---

---

👤 Author

Project Lead / Architect Built as a real-world solution for SRK Skill Center, Ganaur.

live link of this project.

https://srkindia.vercel.app/