{"id":24277237,"url":"https://github.com/indiecodermm/signup-form","last_synced_at":"2025-03-14T10:22:57.568Z","repository":{"id":137078362,"uuid":"600490374","full_name":"IndieCoderMM/signup-form","owner":"IndieCoderMM","description":"Registration form component with React and Firestore","archived":false,"fork":false,"pushed_at":"2023-02-16T16:21:16.000Z","size":4094,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-01-16T00:10:08.277Z","etag":null,"topics":["firebase","firestore","mobile-first","react","signup-page"],"latest_commit_sha":null,"homepage":"https://indiecodermm.github.io/signup-form","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/IndieCoderMM.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","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":"2023-02-11T16:53:15.000Z","updated_at":"2023-07-25T01:25:58.000Z","dependencies_parsed_at":null,"dependency_job_id":"bea9b690-b012-465c-916f-bf89fc93f665","html_url":"https://github.com/IndieCoderMM/signup-form","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/IndieCoderMM%2Fsignup-form","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/IndieCoderMM%2Fsignup-form/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/IndieCoderMM%2Fsignup-form/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/IndieCoderMM%2Fsignup-form/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/IndieCoderMM","download_url":"https://codeload.github.com/IndieCoderMM/signup-form/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":243559076,"owners_count":20310688,"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":["firebase","firestore","mobile-first","react","signup-page"],"created_at":"2025-01-15T23:34:51.373Z","updated_at":"2025-03-14T10:22:57.522Z","avatar_url":"https://github.com/IndieCoderMM.png","language":"JavaScript","readme":"## 📋 Table of contents\n\n- [🎫 Sign Up Form Component](#-sign-up-form-component)\n  - [🔍 Overview](#-overview)\n    - [🎯 Challenge](#-challenge)\n    - [📸 Screenshot](#-screenshot)\n    - [🔗 Links](#-links)\n  - [🚂 My process](#-my-process)\n    - [🧰 Built With](#-built-with)\n    - [💡 What I learned](#-what-i-learned)\n    - [🔭 Future features](#-future-features)\n    - [💎 Useful resources](#-useful-resources)\n  - [📧 Connect wit me](#-connect-wit-me)\n  - [🤝 Contributing](#-contributing)\n  - [💖 Show your support](#-show-your-support)\n  - [📜 License ](#-license-)\n\n# 🎫 Sign Up Form Component\n\nThis is a solution to the [Intro component with sign up form challenge on Frontend Mentor](https://www.frontendmentor.io/challenges/intro-component-with-signup-form-5cf91bd49edda32581d28fd1).\n\n## 🔍 Overview\n\n### 🎯 Challenge\n\nUsers should be able to:\n\n- View the optimal layout for the site depending on their device's screen size\n- See hover states for all interactive elements on the page\n- Receive an error message when the `form` is submitted if:\n  - Any `input` field is empty. The message for this error should say *\"[Field Name] cannot be empty\"*\n  - The email address is not formatted correctly (i.e. a correct email address should have this structure: `name@host.tld`). The message for this error should say *\"Looks like this is not an email\"*\n\n### 📸 Screenshot\n\n![Screenshot](./app_screenshot.png)\n\n### 🔗 Links\n\n- Solution URL: [My Solution](#)\n- Live Site URL: [Demo Website](https://indiecodermm.github.io/signup-form)\n\n## 🚂 My process\n\n### 🧰 Built With\n\n- [React.js](https://reactjs.org/) - to create UI and dynamic components\n- [Firebase](https://console.firebase.google.com/) - to store registration data\n\n### 💡 What I learned\n\nIn this project, I learned:\n- How to add Firebase to a React app\n- How to use Firestore as a database for storing docs\n- Using Regex to validate input values\n- Improving UX with conditional class and components\n\n\n### 🔭 Future features\n\n- [x] Display list of registered users\n- [ ] Loading and popup message\n- [ ] Use this component in a real app\n\n### 💎 Useful resources\n\n- [React Chat App in 7 min](https://youtu.be/zQyrwxMPm88) - Using Firestore in React\n- [React Firebase Hooks](https://github.com/CSFrequency/react-firebase-hooks/blob/master/firestore/README.md) - Documentation on firebase hooks\n- [CSS Buttons Examples](https://getcssscan.com/css-buttons-examples) - Beautiful button styles\n- [Password Validation](https://www.w3resource.com/javascript/form/password-validation.php) - Regex for password validation\n\n\n## 📧 Connect wit me\n\nI am always looking for ways to improve my project. If you have any suggestions or ideas, I would love to hear from you.\n- GitHub - [IndieCoderMM](https://www.your-site.com)\n- Frontend Mentor - [@IndieCoderMM](https://www.frontendmentor.io/profile/IndieCoderMM)\n- Linkedin - [@hthantoo](https://www.linkedin.com/in/hthantoo/)\n- Gmail - [hthant00chk@gmail.com](mailto:hthant00chk@gmail.com)\n\n## 🤝 Contributing\n\nI welcome any and all contributions to my website! If you have an idea for a new feature or have found a bug, please open an issue or submit a pull request.\n\nFeel free to check the [issues page](../../issues/).\n\n\n## 💖 Show your support\nIf you like this project, please consider giving it a ⭐.\n\n## 📜 License \u003ca name=\"license\"\u003e\u003c/a\u003e\n\nThis project is [MIT](./LICENSE) licensed.","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Findiecodermm%2Fsignup-form","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Findiecodermm%2Fsignup-form","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Findiecodermm%2Fsignup-form/lists"}