{"componentChunkName":"component---src-templates-project-js","path":"/project/events-reminder-and-days-tracking/","result":{"data":{"sampleProject":{"id":"-0a449645-ffc1-5085-8e22-adaaa046e3b9","publishedAt":"2021-01-25T22:45:00.000Z","categories":[],"relatedProjects":[],"mainImage":{"crop":null,"hotspot":null,"asset":{"_id":"image-45eaab6ce427adcd82d8d46bfc4ad2e4af051a11-1200x800-png"},"alt":"dark and light mode events reminder reactjs "},"title":"Events Reminder and Days Tracking","slug":{"current":"events-reminder-and-days-tracking"},"_rawBody":[{"_key":"5a5b92555f9c","_type":"block","children":[{"_key":"821c745b61e5","_type":"span","marks":[],"text":"Schedule all your events and keep track of them and never miss one again! With this events reminder web application, it will help you keep everything orgnaised in one place and with the addition feature of tracking the number of days until the events takes place will provide better overview of all the upcoming events."}],"markDefs":[],"style":"normal"},{"_key":"3518f9137885","_type":"block","children":[{"_key":"bcadf47f8b4a0","_type":"span","marks":[],"text":"This web application comes in two themes - dark and light. You can enable either ones  easily. "}],"markDefs":[],"style":"normal"},{"_key":"04e87a982fc3","_type":"block","children":[{"_key":"89ff72e58f4b","_type":"span","marks":[],"text":"Checkout the live site"},{"_key":"d8b733967976","_type":"span","marks":["strong","3a4266cfc6fe"],"text":" here"}],"markDefs":[{"_key":"3a4266cfc6fe","_type":"link","href":" https://events-reminder-83889.web.app"}],"style":"normal"},{"_key":"52f50258e4f5","_type":"figure","alt":"events-reminder-light-mode-reactjs","asset":{"_ref":"image-316a111bce90342d0a9004853ff45bff6cb3ea29-1200x800-png","_type":"reference"},"caption":"events-reminder-light-mode-screenshot"},{"_key":"a7a99ab52adb","_type":"block","children":[{"_key":"43a92bef3a72","_type":"span","marks":[],"text":""}],"markDefs":[],"style":"normal"},{"_key":"e5693b9493af","_type":"figure","alt":"events reminder reactjs dark mode","asset":{"_ref":"image-2fd427a41643fc017d8bb1f17b4124ef5ccab0e0-1200x800-png","_type":"reference"},"caption":"events reminder reactjs dark mode screenshot"},{"_key":"c91241b4a3f4","_type":"block","children":[{"_key":"ea4b0cc62b58","_type":"span","marks":[],"text":"Having to work with many scheduled tasks weekly, sometimes it become overwhelming to remember the date of every event or task. I decided to use ReactJs to build something simple that only does one thing - track days of different events and tasks. "}],"markDefs":[],"style":"normal"},{"_key":"437144b0c622","_type":"block","children":[{"_key":"1d7e053d2a72","_type":"span","marks":[],"text":"I used the Context API to organise the code and avoid prop drilling. I also utilised Material UI for faster development. "}],"markDefs":[],"style":"normal"},{"_key":"5345b888a910","_type":"block","children":[{"_key":"540991f3d13c","_type":"span","marks":[],"text":"Firebase Cloud is used to store the data and provide user authentication. "}],"markDefs":[],"style":"normal"},{"_key":"c3df262cf68b","_type":"block","children":[{"_key":"c4bb6028c2a9","_type":"span","marks":[],"text":""}],"markDefs":[],"style":"normal"},{"_key":"1a491325dbd7","_type":"figure","alt":"Google Firebase user authentication","asset":{"_ref":"image-d78963b0b0540680088c2d6c9572efc66b145f6b-1200x800-png","_type":"reference"},"caption":"Google Firebase user authentication screenshot"}],"members":[{"_key":"d98824e8b2ff","person":{"image":{"crop":{"_key":null,"_type":"sanity.imageCrop","top":0,"bottom":0,"left":0,"right":0},"hotspot":{"_key":null,"_type":"sanity.imageHotspot","x":0.4850543478260869,"y":0.4809782608695656,"height":0.8858695652173917,"width":0.8831521739130435},"asset":{"_id":"image-921142275f56ba6eb38730e93828c775c00e7d38-1080x1080-png"}},"name":"Ayman AlDherasi"},"roles":["designer","developer"]}]}},"pageContext":{"id":"-0a449645-ffc1-5085-8e22-adaaa046e3b9"}},"staticQueryHashes":["2817707602","4207246219"]}