Using RecoilJs, React and Mathjs to build Google Sheets clone
🙋 Book a mentorship call: https://book.abdu.dev
✉️ Join my newsletter: https://newsletter.abdu.dev
Side project using Recoil, React and Mathjs to build a Google Sheets clone. This is a long tutorial video where we would see different challenges and how we solve them to build our clone application.
Video table of content:
00:00:00 : Project demo
00:00:42 : Recoil walkthrough
00:04:14 : Project planning
00:06:46 : Preparing the project
00:07:26 : Creating editable sheet cells
00:22:02 : Use Recoil for cell value state
00:28:45 : Building grid - row, column, sheet components
00:41:50 : Use Recoil for sheet size
00:49:48 : Separate state for each cell and memoize it
00:56:58 : Grid CSS styling
01:05:25 : Grid Resizer component
01:18:14 : Sheet Axis component
01:24:48 : Sheet Axis name conversion from numbers to letters
01:35:36 : Expressions calculation using Mathjs
01:47:30 : Extend sheet calculations to include cells ids
02:04:51 : Bonus improvements
============================================
Links:
Github Repository
https://github.com/abduvik/xlsheets
Project live demo on Netlify
https://xlsheets.netlify.app/
Egghead course on Recoil
https://egghead.io/courses/getting-st...
============================================
Connect on social media:
Twitter: / abduvik
Medium: / abduvik
LinkedIn: / abduvik
Instagram: / abduvik
Github: https://github.com/abduvik
Freelancing:
Portfolio: https://www.flexnebula.com/portfolio/
Upwork: https://www.upwork.com/freelancers/~0...
Newsletters:
https://abduvik.substack.com/p/newsle...
Background Music
https://www.epidemicsound.com/referra...
#sideproject #recoil #livecoding