{"id":32733723,"url":"https://github.com/premshaw23/formcraft","last_synced_at":"2026-06-30T19:32:34.633Z","repository":{"id":319817017,"uuid":"1072504868","full_name":"Premshaw23/FormCraft","owner":"Premshaw23","description":"A modern form builder with drag-and-drop editor, real-time analytics, and authentication. Built with Next.js, React, Firebase \u0026 Tailwind CSS.","archived":false,"fork":false,"pushed_at":"2026-01-26T08:40:49.000Z","size":503,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"master","last_synced_at":"2026-01-26T22:41:05.535Z","etag":null,"topics":["analytics","authentication","claudinary","dashboard","drag-and-drop","firebase","firestore","form-builder","nextjs15","react","real-time","responsive-design","survey-tool","tailwind-css"],"latest_commit_sha":null,"homepage":"https://form-craft.netlify.app","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/Premshaw23.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2025-10-08T20:13:18.000Z","updated_at":"2026-01-26T08:40:53.000Z","dependencies_parsed_at":null,"dependency_job_id":"d5dd7154-e3e8-4c66-b631-18f1c781cfda","html_url":"https://github.com/Premshaw23/FormCraft","commit_stats":null,"previous_names":["premshaw23/formcraft"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/Premshaw23/FormCraft","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Premshaw23%2FFormCraft","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Premshaw23%2FFormCraft/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Premshaw23%2FFormCraft/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Premshaw23%2FFormCraft/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Premshaw23","download_url":"https://codeload.github.com/Premshaw23/FormCraft/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Premshaw23%2FFormCraft/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":34981390,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-05-26T15:22:16.424Z","status":"online","status_checked_at":"2026-06-30T02:00:05.919Z","response_time":92,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["analytics","authentication","claudinary","dashboard","drag-and-drop","firebase","firestore","form-builder","nextjs15","react","real-time","responsive-design","survey-tool","tailwind-css"],"created_at":"2025-11-03T06:06:45.934Z","updated_at":"2026-06-30T19:32:34.624Z","avatar_url":"https://github.com/Premshaw23.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# FormCraft - Modern Form Platform\n\nFormCraft is a full-featured, modern web application for creating, sharing, and analyzing forms. Built with **Next.js**, **React**, **Tailwind CSS**, and **Firebase**, FormCraft combines a sleek UI with powerful form-building and analytics features.\n\n---\n\n## Table of Contents\n\n1. [Project Overview](#project-overview)\n2. [Features](#features)\n\n   * Landing Page \u0026 Auth System\n   * Dashboard \u0026 Form Management\n   * Form Builder\n   * Response Analytics \u0026 Viewer\n   * Settings \u0026 Profile\n   * Form Fill Experience\n   * Premium UI Features\n   * Security \u0026 Auth Features\n   * Export \u0026 Additional Features\n3. [Tech Stack](#tech-stack)\n4. [File Structure](#file-structure)\n5. [Build Priority / MVP Phases](#build-priority--mvp-phases)\n6. [Deployment](#deployment)\n7. [Getting Started](#getting-started)\n8. [License](#license)\n\n---\n\n## Project Overview\n\nFormCraft is designed to empower users to build, share, and analyze forms with ease. It includes an intuitive drag-and-drop form builder, user authentication, real-time analytics, conditional logic, access controls, and a modern UI with glassmorphism and gradient animations.\n\n---\n\n## Features\n\n### Landing Page \u0026 Auth System\n\n**Landing Page (`/`)**\n\n* Hero intro with animated gradient background and floating form icons\n* Headline \u0026 subheadline with CTA buttons: \"Get Started Free\" \u0026 \"View Demo\"\n* Features showcase (3 cards: Lightning-fast autosave, Secure user authentication, Real-time analytics)\n* Top navigation bar with sticky blur effect on scroll\n* Features grid with 6 feature cards, hover lift \u0026 glow effects\n* Footer: Privacy, Terms, Contact, Social links\n\n**Auth Pages (`/auth/signin` \u0026 `/auth/signup`)**\n\n* Split screen design: animated testimonial carousel + auth form\n* Email/password and Google OAuth login\n* Password strength indicator\n* Email verification and password reset flow\n* Smooth loading states, error toasts, auto-redirect after signup\n* Firebase Auth integration \u0026 protected routes\n\n### Dashboard \u0026 Form Management\n\n**Dashboard (`/dashboard`)**\n\n* Top bar: logo, search, profile dropdown\n* Stats cards: Total Forms, Published, Total Responses, Draft\n* Filter tabs: All | Draft | Published | Archived\n* Forms grid (3 columns) with \"Create New Form\" card\n* Form cards: thumbnail preview, status badge, stats, last edited, action buttons (Edit, Preview, Responses, Share, Duplicate, Archive, Delete)\n* Empty state illustration with CTA button\n* Pagination: load more \u0026 infinite scroll\n* Form List features: sortable columns, bulk actions, quick actions\n\n### Form Builder (`/forms/[id]/edit`)\n\n**Layout: 3-Column**\n\n* **Left Sidebar**: Field palette with 15+ field types (text, choice, number, rating, date/time, file/media, layout elements)\n* **Center Canvas**: Editable form preview with drag-and-drop, inline editing, duplicate/delete, required toggle, and settings panel per field\n* **Right Sidebar**: Form settings \u0026 theme editor (pre-made themes, custom theme editor, live preview, responsive toggle)\n\n**Form Settings \u0026 Share**\n\n* General: Draft/Published toggle, custom submit button, confirmation message, redirect URL\n* Access Control: public, specific users, password-protected, private testing\n* Submission limits: total \u0026 per user, expiry date\n* Notifications: email alerts, Slack webhook (future)\n* Advanced: progress bar, shuffle questions, multi-page draft responses, CAPTCHA, metadata collection\n* Share: unique link, QR code, embed options, social share, collaborators (future)\n\n### Response Analytics \u0026 Viewer (`/forms/[id]/responses`)\n\n**Summary Stats Cards**\n\n* Total responses, response rate, average completion time, last response\n\n**Filter Bar**\n\n* Date range picker, search, status filter\n\n**Visualization Tabs**\n\n* Summary: charts per question type\n* Individual: table view + modal per respondent\n* Charts: interactive dashboards, export as PNG, cross-filtering, date range comparison\n\n### Settings \u0026 Profile (`/settings`)\n\n**Sidebar Tabs**\n\n* Profile: avatar, display name, email (readonly), bio\n* Account: email preferences, language, timezone, delete account\n* Security: change password, 2FA, active sessions, login history\n* Billing \u0026 API Keys (future)\n\n### Form Fill Experience (`/f/[shortId]`)\n\n**Before Auth**\n\n* Redirect to signin with return URL\n* Show message to sign in\n\n**After Auth**\n\n* Access checks (password, whitelist, expiry)\n* Form UI: clean, focused, optional single-field mode\n* Autosave drafts, validation, character count\n* Submit section: custom button text, loading animation, disable multiple clicks\n* After submit: success page with confetti, redirect, or view responses\n* Error handling: network, validation, quota exceeded\n\n### Premium UI Features\n\n* Skeleton screens, shimmer effect for loading\n* Buttons: default, hover (glow + scale), active, loading, disabled\n* Page transitions, modal animations, drag \u0026 drop with spring physics\n* Micro-interactions: hover lift, toggle switches, animated checkboxes, progress bars\n* Glassmorphism, gradient borders, floating labels, contextual menus, dark mode toggle\n\n### Security \u0026 Auth Features\n\n* Firebase Auth (email/password, Google OAuth)\n* Protected routes \u0026 role-based access\n* Form-level security: owner-only edit/delete, server-side validation, rate limiting, XSS/CSRF protection\n* Data privacy: GDPR compliance, encrypted uploads\n\n### Export \u0026 Additional Features\n\n* CSV export per form\n* Sign out flow with confirmation modal\n* Form templates, duplicate forms, form versioning (future), webhooks, email integration, team collaboration (future)\n\n---\n\n## Tech Stack\n\n**Frontend**\n\n* Next.js 15 (App Router)\n* React 19\n* Tailwind CSS 4\n* Framer Motion\n* React Hook Form + Zod\n* TanStack Query\n* Zustand\n* @dnd-kit\n* Recharts\n* Lucide React Icons\n\n**Backend \u0026 Services**\n\n* Firebase Auth\n* Firebase Firestore\n* Firebase Storage\n* Firebase Cloud Functions (optional)\n\n**Deployment**\n\n* Vercel (primary)\n* Firebase Hosting (alternative)\n\n**Developer Tools**\n\n* ESLint + Prettier\n* Husky (pre-commit hooks)\n* TypeScript (optional)\n\n---\n\n## File Structure\n\n```\nformcraft/\n├── app/\n│   ├── (auth)/\n│   │   ├── signin/page.js\n│   │   └── signup/page.js\n│   ├── (dashboard)/\n│   │   ├── dashboard/page.js\n│   │   └── settings/page.js\n│   ├── forms/\n│   │   ├── [id]/\n│   │   │   ├── edit/page.js\n│   │   │   ├── responses/page.js\n│   │   │   └── preview/page.js\n│   │   └── new/page.js\n│   ├── f/[shortId]/page.js\n│   ├── layout.js\n│   └── page.js\n├── components/\n│   ├── ui/\n│   ├── form-builder/\n│   ├── auth/\n│   └── dashboard/\n├── lib/\n│   ├── firebase.js\n│   ├── hooks/\n│   └── utils/\n├── public/\n└── styles/\n```\n\n---\n\n// ...existing code...\n\n# FormCraft\n\nFormCraft is a modern form platform for building, sharing, and analyzing forms. Built with Next.js + React, Tailwind CSS and Firebase, it focuses on fast UX, privacy-first defaults, and an extensible form builder \u0026 analytics experience.\n\n---\n\n## Quick Links\n\n- App layout: [app/layout.js](app/layout.js)  \n- Firebase config: [lib/firebase.js](lib/firebase.js)  \n- Auth provider: [`AuthProvider`](context/AuthContext.js)  \n- Form builder layout: [components/form-builder/FormBuilderLayout.js](components/form-builder/FormBuilderLayout.js)  \n- Field types list: [lib/constants/fieldTypes.js](lib/constants/fieldTypes.js)  \n- Form fill page: [app/f/[id]/page.js](app/f/[id]/page.js)  \n- Success flow (confetti / redirect): [components/form-fill/SuccessScreen.js](components/form-fill/SuccessScreen.js)  \n- CSV export helper: [`exportResponsesToCSV`](lib/services/responseService.js)\n\n---\n\n## Features (high level)\n\n- Intuitive drag-and-drop form builder (3-column layout: palette, canvas, settings)\n- Rich field types (text, email, number, rating, scale, date/time, file uploads, choice fields)\n- Per-form settings (confirmation message, redirect URL, submission limits, access control)\n- Response viewer with individual response modal and CSV export\n- Firebase-based auth, storage, and Firestore backend\n- Theme customization \u0026 responsive UI with Tailwind CSS\n- GDPR/Privacy focused defaults and legal pages\n\nKey UI components live under `components/` (see [components](components/) folder).\n\n---\n\n## Tech Stack\n\n- Next.js (App Router)\n- React\n- Tailwind CSS\n- Firebase (Auth, Firestore, Storage)\n- Lucide icons, Recharts (analytics)\n- Optional: Framer Motion, @dnd-kit for drag \u0026 drop\n\n---\n\n## Project structure (important files)\n\n\n# FormCraft\n\nA modern, privacy-conscious form builder and analytics platform built with Next.js, React and Firebase. This README gives a quick setup guide, explains the project layout, and includes pointers for development and contribution.\n\n---\n\n## Quick links\n\n- App entry / providers: `app/layout.js`\n- Dashboard (protected): `app/(dashboard)`\n- Public form route: `app/f/[id]/page.js`\n- Firebase init: `lib/firebase.js`\n- Auth provider \u0026 hooks: `context/AuthContext.js`\n- Form builder UI: `components/form-builder/`\n\n---\n\n## Features (high level)\n\n- Visual form builder (drag \u0026 drop)\n- Publishable forms with share links and embed options\n- Response viewer, CSV export and basic analytics\n- Firebase Auth (email + Google), Firestore-backed data\n- Responsive UI with Tailwind CSS, skeletons and smooth micro-interactions\n\n---\n\n## Requirements\n\n- Node.js 18+ recommended\n- npm, yarn, or pnpm\n- A Firebase project (Auth, Firestore, Storage) for local testing\n\n---\n\n## Environment\n\nCreate a .env.local or populate `lib/firebase.js` with your Firebase configuration. Common env variables used in this project:\n\n- NEXT_PUBLIC_FIREBASE_API_KEY\n- NEXT_PUBLIC_FIREBASE_AUTH_DOMAIN\n- NEXT_PUBLIC_FIREBASE_PROJECT_ID\n- NEXT_PUBLIC_FIREBASE_STORAGE_BUCKET\n- NEXT_PUBLIC_FIREBASE_MESSAGING_SENDER_ID\n- NEXT_PUBLIC_FIREBASE_APP_ID\n\n---\n\n## Quick start (local)\n\n1. Clone and install\n\n```bash\ngit clone https://github.com/yourusername/formcraft.git\ncd formcraft\nnpm install\n```\n\n2. Add Firebase credentials to `.env.local` or update `lib/firebase.js`.\n\n3. Start dev server\n\n```bash\nnpm run dev\n```\n\nOpen http://localhost:3000\n\n---\n\n## Useful NPM scripts\n\n- `npm run dev` — start Next dev server\n- `npm run build` — production build\n- `npm run start` — run production build locally\n- `npm run lint` — run linters (if configured)\n\n---\n\n## Project layout (high level)\n\n```\n.\n├── app/                     # Next.js App Router routes \u0026 route groups\n├── components/              # UI components (form-builder, dashboard, responses)\n├── context/                 # Auth provider and other React context\n├── lib/                     # firebase init, services, hooks, constants\n├── public/                  # static assets\n└── README.md\n```\n\n---\n\n## Development notes\n\n- Protect dashboard routes with `AuthContext` (see `context/AuthContext.js`). The `components/ProtectedRoute.js` helper is used in the dashboard route group.\n- Field types and defaults are defined in `lib/constants/fieldTypes.js`.\n- Services (form and response logic) live in `lib/services/`.\n\nSmall, low-risk suggestions you might consider adding:\n\n- Add a minimal `.env.example` with required env var names.\n- Add an `init:firebase` script or instructions to set up Firestore indexes if needed.\n\n---\n\n## Contributing\n\n1. Fork or branch from `master` with `feat/\u003cname\u003e` or `fix/\u003cname\u003e`.\n2. Open a PR with a concise description and include screenshots for UI changes.\n3. Add tests for new business logic where applicable.\n\n---\n\n## License\n\nMIT\n\n---\n\nIf you'd like, I can also:\n\n- Add a `.env.example` file to the repo with the common Firebase keys shown above.\n- Wire a simple GitHub Actions workflow for linting and preview deployments.\n\nTell me which you'd like next and I will add it.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpremshaw23%2Fformcraft","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fpremshaw23%2Fformcraft","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpremshaw23%2Fformcraft/lists"}