Skip to content

🌐 A modern fullstack web app with a Flask backend (5 text/number APIs) and a Next.js 15 frontend. Features include a responsive UI, dark/light mode, API playground, and an AI chatbot powered by OpenRouter ( Claude, GPT). Easily deployable and ready for use.

Notifications You must be signed in to change notification settings

AnasInaam/api-call

Folders and files

NameName
Last commit message
Last commit date

Latest commit

Β 

History

22 Commits
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 

Repository files navigation

FlexAPI Studio – Modern API Playground & AI Platform

FlexAPI Studio is a fullstack, production-ready platform for API testing, learning, and AI exploration. It features a beautiful Next.js frontend, multiple backend APIs (Flask and FastAPI), and a professional, accessible UI. Built for developers, students, and tech enthusiasts.


🌟 What is FlexAPI Studio?

FlexAPI Studio unifies interactive API playgrounds, machine learning demos, and AI chat in one seamless, responsive web application. Instantly test classic text/number utilities, predict house prices with ML, or chat with advanced AI modelsβ€”all in a single, elegant interface.


πŸš€ Key Features

  • Text & Number Utilities:
    • Try 5 Flask-powered endpoints: word count, number addition, string reversal, temperature conversion, and palindrome check.
  • House Price Prediction:
    • Enter house features and get instant price predictions from a trained ML model (Random Forest Regressor) via FastAPI.
  • AI Chatbot Playground:
    • Chat with GPT-3.5 Turbo, Mistral 7B, or Claude 3 Haiku (OpenRouter). Supports markdown/code, chat history, model selection, and more.
  • Modern UI:
    • Responsive, accessible, and mobile-friendly. Built with Next.js 15, Tailwind CSS, shadcn/ui, lucide-react, framer-motion.
  • Sidebar Navigation:
    • Consistent, accessible sidebar with hamburger menu on mobile.
  • Theming:
    • Light/dark mode toggle, beautiful gradients, and professional design.
  • Docs & About:
    • Comprehensive documentation and About page with team, mission, contact, and tech stack info.

πŸ› οΈ How It Works

  • Frontend: Next.js 15 (TypeScript), Tailwind CSS, shadcn/ui, lucide-react, framer-motion, @headlessui/react.
  • Backend:
    • Flask API: 5 endpoints for text/number operations, CORS enabled for frontend integration.
    • FastAPI: House price prediction with ML model and Pydantic validation.
  • API Flow: Next.js frontend communicates with Flask and FastAPI backends via HTTP. Chatbot uses a Next.js API route as a secure proxy to OpenRouter.ai.

🧭 User Flow

  1. Navigation: Access all features via the sidebar (responsive, accessible).
  2. API Playgrounds: Each playground (Text & Number Utilities, House Price, Chatbot) provides forms and docs for easy input and instant results.
  3. Docs & About: Find detailed documentation and team/company info.

πŸ’» Tech Stack

  • Frontend: Next.js 15, TypeScript, Tailwind CSS, shadcn/ui, lucide-react, framer-motion, @headlessui/react
  • Backend: FastAPI (Python), Flask (Python), scikit-learn, pandas, joblib, pydantic
  • Deployment: Vercel/Netlify (frontend), Render (Flask API), custom server (FastAPI)

πŸ“¦ Project Structure

  • src/pages/index.tsx β€” Landing page
  • src/pages/flask-api.tsx β€” Text & Number Utilities playground
  • src/pages/house-price.tsx β€” House Price Prediction playground
  • src/pages/chatbot.tsx β€” AI Chatbot playground
  • src/pages/about.tsx β€” About page (team, mission, contact)
  • src/pages/docs.tsx β€” API documentation
  • src/components/Sidebar.tsx β€” Sidebar navigation
  • src/components/Layout.tsx β€” Shared layout
  • src/components/Header.tsx / Footer.tsx β€” Branding and layout
  • src/components/ApiForm.tsx, HousePriceForm.tsx, PredictionDocs.tsx, etc. β€” UI and forms
  • public/favicon.ico β€” Favicon (replace to customize)

⚑ Getting Started

cd nextjs-frontend
npm install
npm run dev

Visit: http://localhost:3000/

Environment Variables

Create a .env.local file (not committed) with:

OPENROUTER_API_KEY=your-openrouter-key-here

Or use .env.example as a template.


🌐 Deployment

  • Deploy to Vercel or Netlify
  • Set OPENROUTER_API_KEY in your deployment environment variables (never commit your real key!)

πŸ‘₯ Team & Contact


πŸ“ License

MIT


πŸ™Œ Why Use FlexAPI Studio?

  • Unified, elegant interface for API testing, ML demos, and AI chat
  • Professional, accessible, and mobile-first design
  • Open source, extensible, and easy to deploy or customize

Explore, learn, and build with FlexAPI Studio!

About

🌐 A modern fullstack web app with a Flask backend (5 text/number APIs) and a Next.js 15 frontend. Features include a responsive UI, dark/light mode, API playground, and an AI chatbot powered by OpenRouter ( Claude, GPT). Easily deployable and ready for use.

Topics

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published