{"id":18487856,"url":"https://github.com/gaurang-1402/loudxical","last_synced_at":"2026-02-09T23:32:18.379Z","repository":{"id":117535311,"uuid":"539737408","full_name":"Gaurang-1402/Loudxical","owner":"Gaurang-1402","description":"📄Text editor that reads itself out","archived":false,"fork":false,"pushed_at":"2022-09-26T21:25:30.000Z","size":1035,"stargazers_count":1,"open_issues_count":0,"forks_count":3,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-03-29T09:32:57.120Z","etag":null,"topics":["hackathon"],"latest_commit_sha":null,"homepage":"https://www.loudxical.netlify.app","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/Gaurang-1402.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE.md","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":"2022-09-22T00:41:29.000Z","updated_at":"2023-03-04T09:48:56.000Z","dependencies_parsed_at":null,"dependency_job_id":"74c3b294-0593-4509-857c-d66dd85b3596","html_url":"https://github.com/Gaurang-1402/Loudxical","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/Gaurang-1402%2FLoudxical","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Gaurang-1402%2FLoudxical/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Gaurang-1402%2FLoudxical/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Gaurang-1402%2FLoudxical/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Gaurang-1402","download_url":"https://codeload.github.com/Gaurang-1402/Loudxical/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":249728899,"owners_count":21316974,"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":["hackathon"],"created_at":"2024-11-06T12:50:52.299Z","updated_at":"2026-02-09T23:32:13.347Z","avatar_url":"https://github.com/Gaurang-1402.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\n## 💡Inspiration \nEver thought about building your own Google Docs? How about incorporating a Notion liked editor on your app? You can choose to build these things from scratch or do the wiser thing by using Lexical's text editor. Lexical is a extensible text editor framework that has 3 main qualities: reliability, accessibility, and speed.\n\nLexical is used by 100s of applications around the world. Some of its applications include a text editor that may be used by users to write long-form content (for example: blog, essays, research paper). For these users, features associated with spell-checking and proof-reading are very important, since more mistakes are made for long-form content.\n\nInspire by famoua children's book author Jim Trelease, who once said \"The more you read out loud your writing, the better you get it,\" we decided to build Text-to-Speech(TTS) functionality within Lexical. TTS allows users get to hear their writing before submission and this has a number of benefits:  \n1) Users can identify the tone of the piece and the transitions between ideas\n2) User can correct awkward sentences\n3) Users can find spelling mistakes\n\nWe decided to call our version of Lexical: Loudxical\n\n![x.png](https://i.postimg.cc/yNrGScTm/x.png)\n\n## 🤔What it does \nLoudxical is a web application and comprises of an extension of Lexical editor with TTS functionality within the editor. \n\nLoudxical has all the functionalities of the \"rich text editor\" Lexical along with several features associated TTS. \n\n\n![y.png](https://i.postimg.cc/MZtQ05BJ/y.png)\n\n\n\n## 🦾 How we built it\n* __Frontend:__ React.js, Tailwind\n* __Packages:__ Lexical\n* __Deployment:__ Vercel\n* __Tools:__ Vercel, Git\n\n[![z.png](https://i.postimg.cc/PxyP4fPQ/z.png)](https://postimg.cc/YG4r2HNv)\n\n\n\n## 🎨UI/UX\n\nOur [Figma file](https://www.figma.com/file/jyPpt1B6v6g8nSlUrXabuj/Loudsical-main?node-id=1%3A2) consists of Mockups and Design Documents we used to build our application.\n\nWe were heavily inspired by the revised version of **Iterative** design process, which not only includes visual design, but a full-fledged research cycle in which you must discover and define your problem before tackling your solution \u0026 then finally deploy it.\n\n![Double-Diamond](https://i.postimg.cc/bvQV3jHt/doublediamonddesignprocess.png)\n\n\u003e 1. **Discover**: a deep dive into the problem we are trying to solve.\n\u003e 2. **Define**: synthesizing the information from the discovery phase into a problem definition.\n\u003e 3. **Develop**: think up solutions to the problem.\n\u003e 4. **Deliver**: pick the best solution and build that.\n\nWe utilized design tools like Figma to prototype our designs before doing any coding. Through this, we are able to get iterative feedback so that we spend less time re-writing code.\n\n[![Screenshot-2022-09-25-193955.jpg](https://i.postimg.cc/yNQNgQ5L/Screenshot-2022-09-25-193955.jpg)](https://postimg.cc/06Svhf9S)\n\n## 📚Research \n\nResearch is the key to empathizing with users: we found our specific user group early and that paves the way for our whole project. Here are a few of the resources that were helpful to us —\n\n- https://lexical.dev/\n- https://playground.lexical.dev/\n- https://growingbookbybook.com/favorite-quotes-about-reading-and-writing/\n\n## 🤖 Top Software Engineering Project\n\nOur entire project is built on top of Lexical and this hackathon may potentially end up be our first contribution to the project!\n\n\n## 🌐 Check it out\n\n- https://loudxical.netlify.app/\n\n\n## 🏅 Accomplishments that we're proud of\nWe are proud of finishing the project on time which seemed like a tough task as we had so many features to implement. Moreover, we learned a lot about GitHub Projects, Assembly AI, new web technologies, and libraries that we could incorporate into our project to meet our unique needs. And as always, working overnight was pretty fun! :)\n\n\n\n## 🧠 Challenges we ran into\n\nThis project was especially an achievement for us because this time the experience was very different than what we have while building typical hackathon projects, which also includes heavy brainstorming, extensive research, and yes, hitting the final pin on the board.\n\nWe also had to learn Lexical very quickly and style our feature well in Lexical editor's design style.\n\n\n## 📖 What we learned\n**Proper sleep is very important! :p** Well, a lot of things, both summed up in technical \u0026 non-technical sides. \n**How Lexical works ** This project gave us a great way introduction to Lexical and let us understand how the project is structured. This will surely fast-track our progress in this fellowship and help us make more contributions! \n\n\n\n\n## 🚀 What's next for Loudxical\n\nWe hope to revisit Loudxical and make it a proper plugin and make a PR and contribute to Lexical\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgaurang-1402%2Floudxical","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fgaurang-1402%2Floudxical","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgaurang-1402%2Floudxical/lists"}