DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’»

Cover image for Create a Notebook app with React, ChakraUi, and framerMotion
Muhammad  Ahmad
Muhammad Ahmad

Posted on • Updated on

Create a Notebook app with React, ChakraUi, and framerMotion

Features

  • CRUD operations
  • Responsiveness
  • Beautiful animations
  • Image slider

Built with

Demo Link: Notebook
GitHub Repo: Repo

Top comments (9)

Collapse
 
crimsonmed profile image
MΓ©dΓ©ric Burlet

Very clan but I would defo add a + button so you dont have to click three dots and then create not every time.

Collapse
 
m_ahmad profile image
Muhammad Ahmad

Yes, you are right. Thanks for your suggestion.
I added button.

Collapse
 
daviddalbusco profile image
David Dal Busco

Nice, I like the color gradient in the "Notebook App" title, that's a nice touch πŸ‘

P.S.: In your article title, there is a small type "CharaUi" instead of "ChakraUi" I think, just in case.

Collapse
 
m_ahmad profile image
Muhammad Ahmad • Edited on

Thank you David for your compliment and pointing out the mistake πŸ™‚

Collapse
 
abdalshafiealmajdoup profile image
abdalshafiealmajdoup

Add the size of the height and add a scroll when the list is filled in addition to a specific number with the addition of pagination, then the invoice for the page will be tabbed and always visible to the user

Collapse
 
leokaze profile image
leokaze • Edited on

Some problem in overflow

Collapse
 
m_ahmad profile image
Muhammad Ahmad • Edited on

Please describe the issue in detail.

Collapse
 
prnvbirajdar profile image
Pranav Birajdar

Clean design! The website freezes when I reload though.

Collapse
 
m_ahmad profile image
Muhammad Ahmad

Thanks.
Actually, it is issue with BrowserRouter while deploying on Github pages. I fixed the issue by using HashRouter. Now on reload it'll work smoothly.

Build Anything...


Use any Linode offering to create something for the DEV x Linode Hackathon 2022. A variety of prizes are up for grabs, inculding $1,000 USD. πŸ‘€

β†’ Join the Hackathon <-