Full Stack Bhautika-_Portfolio-application-
Booking-enabled portfolio site for physiotherapist Nirupama Bhatt, built with React, Firebase, and Gemini AI lets clients view her work and book slot
Preview Gallery
6 media
Technologies & Skills
Limited time offer
1. The Core Application A fully functional, deployed and live portfolio + booking website (not just source code — a working product they can show clients immediately). Complete source code (React + TypeScript + Firebase + Gemini AI integration) with full ownership rights transferred. 2. Functional Features Professional portfolio pages showcasing credentials, bio, and services. A working public booking form that captures client requests (name, email, phone, service, message) with no login required. A secure backend (Firestore) where only the site owner can view/manage bookings. Built-in AI capability (Gemini API integration) as a differentiator over template-based portfolio sites. 3. Technical Deliverables Clean, modern tech stack (React 19, TypeScript, Tailwind CSS, Vite) — easy for any future developer to maintain or extend. Firestore security rules already configured for safe public-write/admin-read access. Responsive design that works across desktop and mobile. 4. Documentation Package Project Documentation (technical reference) Project Report (formal overview, architecture, outcomes) Presentation deck (great for pitching/demoing to the client) Installation, usage, and system requirement guides A roadmap of future enhancements — shows the client there's room to grow, which adds perceived value 5. Deployment & Setup Either a ready-to-use live deployment (Vercel link) or full instructions/credentials handover so they can deploy it under their own domain and Firebase/Vercel account. Guidance on connecting their own Gemini API key and Firebase project (so their data is fully theirs, not tied to your accounts). Ownership transfer: the GitHub repo, Firebase project, and Vercel deployment are transferred to their accounts (not just shared access) — otherwise they're dependent on your accounts indefinitely. Domain/branding: confirm whether a custom domain is included or if they need to buy/connect their own. Support period: decide if you're including any post-sale bug-fix window or it's a clean handoff. Customization: since this was built specifically for "Nirupama Bhatt," any new buyer will need their own content (bio, services, images) swapped in — clarify whether that's part of the deal or an extra service.
What's Included
Support & Customization
Resource Links
Purchase this project to unlock source and premium resources. Document/report remain secure preview-based on this page.
What the project is
Bhautika is a personal/professional portfolio and client-booking website for Nirupama Bhatt, a Senior MSK (musculoskeletal) Physiotherapist and Global Mentor. It's not a generic developer portfolio template — it's a small business site for a healthcare/mentoring professional, built to showcase her credentials and let prospective clients book services directly from the site.
It was originally generated/scaffolded using Google AI Studio (the repo still contains the standard "Run and deploy your AI Studio app" boilerplate and links back to an AI Studio project), then fleshed out into a real deployed app, currently live at bhautika-portfolio-application.vercel.app.
How it works
Frontend
- Built with React 19 + TypeScript, bundled by Vite, styled with Tailwind CSS v4, animated with Motion (Framer Motion's successor), icons from lucide-react, and routed with react-router-dom.
- Served in development through a small custom Express server (
server.ts) that mounts Vite as middleware; in production it just serves the staticdistbuild and falls back toindex.htmlfor client-side routing (a typical SPA setup).
AI integration
- The project depends on
@google/genai(Google's Gemini SDK) and the README instructs setting aGEMINI_API_KEY. This strongly suggests the site has an AI-powered feature — most likely a content generator or assistant used somewhere in the UI (e.g., for drafting responses, FAQs, or an interactive chat element), consistent with its AI Studio origins.
Backend / data
- Client data is stored in Firebase/Firestore, not a traditional server backend.
firebase-blueprint.jsondefines aBookingentity — name, email, phone, service requested (e.g. "1:1 Career Guidance" or "Workshop"), an optional message, and a timestamp — stored in abookingscollection.firestore.rulesenforces a simple but sensible security model: anyone can create a booking (so the public-facing form works without login), but only the site owner's email can read, update, or delete booking records. Everything else in the database is locked down by default.
So functionally: a visitor browses Nirupama's bio/credentials/services, fills out a booking form for a consultation or workshop, and that submission lands directly in a private Firestore collection only she can see and manage — essentially a lightweight, self-hosted alternative to a Calendly/contact-form SaaS tool.
Who it's for
- Primary beneficiary: Nirupama Bhatt herself — it's her professional online presence and lead-capture tool.
- End users: prospective clients or mentees looking for MSK physiotherapy consultations, career guidance sessions, or workshops, who use the site to learn about her and submit a booking request.
- From a developer's standpoint: it's also a useful reference example for anyone wanting to see a minimal, real-world pattern for combining React + Vite + Firebase (Firestore) + Gemini AI, with a public-write/admin-read security model — relevant for the repo owner (Kartik) as a portfolio/freelance project of his own.
Future Enhancements
1. Documentation & Project Hygiene
- Replace the boilerplate Google AI Studio README with a proper, project-specific one (setup, screenshots, feature list).
- Add a
CONTRIBUTING.md, license file, and inline code comments for maintainability. - Add an automated test suite (unit tests for components, integration tests for the booking flow) — currently absent.
2. Booking System Improvements
- Automated email/SMS confirmations to both client and admin when a booking is submitted (via Firebase Cloud Functions + a service like SendGrid/Twilio).
- Calendar integration (Google Calendar/Calendly-style availability) to prevent double-booking and show real-time open slots.
- Booking status tracking (pending/confirmed/completed/cancelled) instead of a flat record, with admin ability to update status from a dashboard.
- Payment integration (Stripe/Razorpay) for paid consultations or workshops, turning it into a true booking-and-billing system.
3. Admin Experience
- Build a dedicated admin dashboard UI inside the app itself (instead of managing bookings only through the raw Firebase Console) — with filtering, search, and export-to-CSV.
- Add authentication UI (Firebase Auth) so the admin logs in through the app rather than relying solely on backend rules.
4. AI Feature Expansion
- Clarify and expand the Gemini AI integration — e.g., an AI chatbot for visitor FAQs, AI-assisted booking-message summarization for the admin, or AI-generated personalized responses.
- Add AI-powered content suggestions (e.g., auto-drafting workshop descriptions or testimonials).
5. Performance & Scalability
- Add Firestore indexes and pagination if booking volume grows.
- Introduce caching (e.g., for static portfolio content) to reduce Firestore reads.
- Consider Firebase Cloud Functions for any logic that shouldn't live purely client-side (e.g., sending notifications, validating bookings server-side beyond security rules).
6. UX/UI Enhancements
- Add multi-language support (i18n) if targeting a global mentee/client base, consistent with the "Global Mentor" positioning.
- Add testimonials/reviews section, a blog or resources section, and SEO optimization (meta tags, sitemap) to improve discoverability.
- Improve accessibility (ARIA labels, keyboard navigation, color-contrast audit).
7. DevOps & Reliability
- Set up CI/CD (GitHub Actions) for automated linting, testing, and deployment on push.
- Add error monitoring (Sentry or similar) and analytics (Plausible/GA4) to understand visitor behavior and booking conversion rates.
- Add rate limiting on the public booking-creation endpoint to prevent spam/abuse, since
allow create: if trueis currently fully open.
Known Issues
Installation
# 1. Clone the repository
git clone https://github.com/Kartik-coder753/Bhautika-_Portfolio-application-.git
cd Bhautika-_Portfolio-application-
# 2. Install dependencies
npm install
# 3. Configure environment variables
# Copy .env.example to .env.local, then open it and set:
GEMINI_API_KEY=your_gemini_api_key_here
# 4. (If using your own Firebase project) add your Firebase config
# Typically as additional values in .env.local, e.g.:
# FIREBASE_API_KEY=...
# FIREBASE_PROJECT_ID=...
# FIREBASE_APP_ID=...
# (Check firebase-applet-config.json / firebase-blueprint.json for the exact fields expected)
# 5. Run the development server
npm run dev
Usage
For visitors / clients (using the live app)
- Open the deployed site:
bhautika-portfolio-application.vercel.app - Browse the portfolio sections to learn about Nirupama Bhatt's credentials, services (1:1 Career Guidance, Workshops, etc.), and background.
- Fill out the booking form with: name, email, phone (optional), service requested, and an optional message.
- Submit — the request is written directly to Firestore with a timestamp. No account or login is required to book.
For the site admin (managing bookings)
- Sign in to the Firebase Console using the authorized admin email (the one defined in
firestore.rules). - Open the Firestore Database →
bookingscollection to view, update, or delete incoming requests. - Because Firestore rules restrict read/update/delete to this admin account only, no other user — authenticated or not — can view booking data.
For developers running it locally
- After
npm run dev, openhttp://localhost:3000in a browser. - Edits to files in
src/hot-reload automatically via Vite. - Use
npm run lintto type-check the project (tsc --noEmit) before committing changes. - Use
npm run cleanto remove thedist/build folder if you need a fresh build.
System Requirements
RequirementMinimum VersionNotesNode.js18.x or later (LTS recommended, e.g. 20.x)Required for Vite 6, TypeScript 5.8, and all dependenciesnpm9.x or laterShips with Node.js; used for installing packages and running scriptsGitAny recent versionNeeded to clone the repository
ResourceMinimumRecommendedRAM4 GB8 GB+ (Vite, TypeScript, and the dev server are reasonably light, but more headroom helps with hot-reload speed)Disk Space~500 MB freeFor node_modules, build output (dist/), and cached dependenciesProcessorAny dual-core CPU from the last ~10 yearsNo GPU or special hardware required — this is a standard web app, not an ML workloadInternet ConnectionRequiredNeeded for npm installs, Firebase/Firestore calls, and Gemini API requests (the app is not fully offline-capable since it depends on cloud services)
Slides Open in New Tab
For better readability, slides are opened directly. Documents remain preview-only with secure backend rendering.
Showing preview pages only. Purchase for full access to all pages and complete source package.
Login for Full AccessNo Q&A available yet
Be the first to ask a question!
Ask a Question
Customer Reviews
Write Your Review
No reviews yet
Be the first to review this project!
Similar Projects
You might also be interested in these projects
website Development
WEB DEVELOPMENT
Vadhuvara Wedding Films is a modern, fully responsive wedding photography website built using HTML, CSS, and JavaScript.
website Development
Task Manager App – MERN Stack
A full-stack Task Manager app built with MERN stack featuring priority levels, due dates, dark mode, and live deployment.
website Development
Paste Snippet
Developed a secure full-stack application for managing code snippets in real-time.
website Development
StayNext - Pg Discovery Platform
Built a full-stack PG platform where users discover PGs and owners manage listings, rooms, and tenant details.