{"id":22585668,"url":"https://github.com/vedhatech002/customer-labs-react-test","last_synced_at":"2025-03-28T17:18:36.343Z","repository":{"id":227206073,"uuid":"770727683","full_name":"vedhatech002/Customer-labs-react-test","owner":"vedhatech002","description":null,"archived":false,"fork":false,"pushed_at":"2024-03-12T18:14:50.000Z","size":908,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-02-02T17:53:03.878Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"https://segmant-page-customerlabs-test.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/vedhatech002.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}},"created_at":"2024-03-12T03:42:50.000Z","updated_at":"2024-03-12T16:55:07.000Z","dependencies_parsed_at":"2024-03-12T06:53:28.533Z","dependency_job_id":null,"html_url":"https://github.com/vedhatech002/Customer-labs-react-test","commit_stats":null,"previous_names":["vedhatech002/customer-labs-react-test"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vedhatech002%2FCustomer-labs-react-test","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vedhatech002%2FCustomer-labs-react-test/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vedhatech002%2FCustomer-labs-react-test/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vedhatech002%2FCustomer-labs-react-test/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/vedhatech002","download_url":"https://codeload.github.com/vedhatech002/Customer-labs-react-test/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":246068308,"owners_count":20718503,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","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":[],"created_at":"2024-12-08T07:09:14.772Z","updated_at":"2025-03-28T17:18:36.306Z","avatar_url":"https://github.com/vedhatech002.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Segmant page customer labs react test\n\nLevel 1 - Frontend Developer Skill Assessment from Customerlabs.Inc\n\n# Assessment\n\ndemo design:\n\n![demo design](./public/assesmentDemoDesign.png)\n\n## Assessment Instruction\n\n\u003e Create a simple react application using the screen-1.0\n\n1. Create a page with a button caption “Save segment”\n\n2. When a user click on “Save segment” button a popup should appear\n\n3. The popup should contain a text box to get the segment name\n\n4. And also it should have dropdown name as “Add schema to segment” with\n   below options\n\n   - **Label**: First Name **Value**: first_name\n   - **Label**: Last Name **Value**: last_name\n   - **Label**: Gender **Value**: gender\n   - **Label**: Age **Value**: age\n   - **Label**: Account Name **Value**: account_name\n   - **Label**: City **Value**: city\n   - **Label**: State **Value**: state\n\n5. Add a link and name as “+Add new schema”\n\n6. When a user select an option from the “Add schema to segment” dropdown and\n   click on “+Add new schema” a new dropdown should added to the Blue box\n\n7. The newly added dropdown should be able to change. And it should have\n   options which are not selected yet.\n\n8. Once the new dropdown added to the blue box “Add schema to segment” should\n   be reset and have unselected options\n\n9. When user click on “save the segment” send data to server in below format\n\n```js\n{\n\"segment_name\": \"last_10_days_blog_visits\",\n\"schema\": [\n{\"first_name\": \"First name\"},\n{\"last_name\": \"Last name\"}\n]\n}\n```\n\n10. To send data to server users https://webhook.site/ website. From this\n    website you will get a webhook URL, use that to send data.\n\n# My solution\n\nI have created a segment page application with the above Instruction\n\n### Tools and Technolgy used\n\n- React js\n- TailwindCss\n- vite Bundler\n- webhooksite URL\n- Netlify hosting\n\n### Features\n\n- modal popup\n- dynamic select option\n- simple alert validation\n- responsive design\n\n### Live Link\n\nyou can see the live site [here](https://segmant-page-customerlabs-test.netlify.app/).\n\n### Screenshots\n\n- home page :\n\n  ![home page](./public/homepage.png)\n\n- popup open :\n\n  ![popup open](./public/popup.png)\n\n- Add Data to the segment Form:\n\n  ![segmentpopup with data](./public/segmantformwithdata.png)\n\n- Add Schema to segment select box only have an unselected scheama option :\n\n  ![unselected](./public/unselectedoptions.png)\n\n- Selected Scheama also changble with remain options\n\n  ![selectedschemachangable](./public/selectedoptionchangable.png)\n\n- The segment saved\n\n  ![saved segmant](./public/successmsg.png)\n\n- Posted Data with webhooksite url\n\n  ![postedData](./public/postedData.png)\n  you can see the posted data with this [link](https://webhook.site/#!/view/0ef44baf-96aa-42e0-a404-a50328fec69a/dc3c8584-f170-4d75-9526-2c3c7c0a29e7/1)\n\n## To run this project locally\n\nclone this repositery and run below commands.\n\n\u003e npm install\n\n\u003e npm run dev\n\n## Contact Me\n\n- Connect with me on LinkedIn: [Vijayavedhasekaran K](www.linkedin.com/in/vijayavedhasekaran002)\n- Follow me on Instagram: [@vedha_since_2002](https://www.instagram.com/vedha_since_2002/)\n- Email: [vedhatech02@gmail.com](mailto:vedhatech02@gmail.com)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fvedhatech002%2Fcustomer-labs-react-test","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fvedhatech002%2Fcustomer-labs-react-test","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fvedhatech002%2Fcustomer-labs-react-test/lists"}