{"id":18301049,"url":"https://github.com/j11tendra/laughing-form","last_synced_at":"2026-04-29T17:08:36.223Z","repository":{"id":215463602,"uuid":"738857432","full_name":"J11tendra/Laughing-Form","owner":"J11tendra","description":"This is multi-step  form built with React.","archived":false,"fork":false,"pushed_at":"2024-07-25T13:04:43.000Z","size":1546,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-04-09T09:48:53.128Z","etag":null,"topics":["form-validation","frontend","frontend-mentor","react","react-router-dom","web","webdevelopment"],"latest_commit_sha":null,"homepage":"https://laughing-form.vercel.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/J11tendra.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}},"created_at":"2024-01-04T07:53:56.000Z","updated_at":"2024-07-25T13:04:46.000Z","dependencies_parsed_at":"2024-01-04T15:49:41.800Z","dependency_job_id":"ea0aea44-09f1-46e5-bbb8-8092a43d670d","html_url":"https://github.com/J11tendra/Laughing-Form","commit_stats":null,"previous_names":["j11tendra/laughing-form"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/J11tendra/Laughing-Form","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/J11tendra%2FLaughing-Form","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/J11tendra%2FLaughing-Form/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/J11tendra%2FLaughing-Form/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/J11tendra%2FLaughing-Form/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/J11tendra","download_url":"https://codeload.github.com/J11tendra/Laughing-Form/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/J11tendra%2FLaughing-Form/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":32435225,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-04-29T13:34:34.882Z","status":"ssl_error","status_checked_at":"2026-04-29T13:34:29.830Z","response_time":110,"last_error":"SSL_read: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"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":["form-validation","frontend","frontend-mentor","react","react-router-dom","web","webdevelopment"],"created_at":"2024-11-05T15:14:16.796Z","updated_at":"2026-04-29T17:08:36.189Z","avatar_url":"https://github.com/J11tendra.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# laughingForm: A Multi-Step Form in React\n\nThis project is a multi-step form built with React, SCSS, and the Context API. It serves as a learning ground for building complex forms with features like progress tracking, validation, and responsiveness.\n\n## Table of Contents\n\n- [Overview](#overview)\n- [Project Goals](#goals)\n- [Technologies](#technologies)\n- [Features](#features)\n- [My Process](#my-process)\n- [Additional Details](#additional-details)\n- [Author](#author)\n- [License](#license)\n\n## Overview\n\n![HomePage-1](https://github.com/J11tendra/Laughing-Form/blob/main/public/active-states-step-1.jpg?raw=true)\n\n\u003cp align=\"center\"\u003e\u003ci\u003ePersonal Info (step-1) Desktop\u003c/i\u003e\u003c/p\u003e\n\n![HomePage-2](https://github.com/J11tendra/Laughing-Form/blob/main/public/active-states-step-2.jpg?raw=true)\n\n\u003cp align=\"center\"\u003e\u003ci\u003eSelect Your Plan (step-2) Desktop\u003c/i\u003e\u003c/p\u003e\n\n![HomePage-3](https://github.com/J11tendra/Laughing-Form/blob/main/public/active-states-step-3.jpg?raw=true)\n\n\u003cp align=\"center\"\u003e\u003ci\u003ePick add-ons (step-3) Desktop\u003c/i\u003e\u003c/p\u003e\n\n![HomePage-4](https://github.com/J11tendra/Laughing-Form/blob/main/public/active-states-step-4.jpg?raw=true)\n\n\u003cp align=\"center\"\u003e\u003ci\u003eFinishing up (step-4) Desktop\u003c/i\u003e\u003c/p\u003e\n\n## Project Goals\n\nThis project aimed to:\n\n- Demonstrate the use of React, SCSS, and the Context API for creating a multi-step form.\n- Implement responsive design for a seamless user experience across devices.\n- Develop a clean and maintainable codebase using modular components and global styles.\n\n## Technologies\n\n- Frontend: React, SCSS\n- State Management: Context API\n- Styling: Global CSS classes, media queries for responsiveness (350px - 1980px)\n- Validation: Plain JavaScript (no external libraries)\n\n## Features\n\n- Multi-Step Progress: Users navigate through a series of steps, completing each one before moving forward.\n- Backtracking: Users can revisit previous steps to modify their selections.\n- Summary and Confirmation: The final step presents a summary of selections and allows confirmation.\n- Responsive Layout: The interface adapts to various screen sizes for optimal viewing.\n- Form Validation: Built-in validation checks for missing fields, incorrect email format, and empty selections.\n\n## My Process\n\nFor your laughingForm project, I used a component-based approach, creating functional components for each page or route, which helps with maintainability. Here's what I did:\n\n- Created global SCSS styles, mixins, and variables for consistent styling throughout the application.\n- Separated each page or route into functional components for modularity.\n- Used a separate Context API to manage application data and logic related to form validation.\n\n## Additional Details\n\n- This project is named laughingForm.\n- TypeScript conversion is planned for future improvements.\n- User data is currently stored in variables, not a database.\n- The design inspiration is from FrontendMentor.io\n\n## Author\n\n    Development: Jitendra Choudhary\n\n## License\n\nThis project is licensed under the MIT License. See the LICENSE file for details.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fj11tendra%2Flaughing-form","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fj11tendra%2Flaughing-form","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fj11tendra%2Flaughing-form/lists"}