<h1>Features</h1>
<ul>
<li>CRUD operations</li>
<li>Responsiveness</li>
<li>Beautiful animations</li>
<li>Image slider</li>
</ul>
<h1>Built with</h1>
<ul>
<li>Programming language - <a href="https://www.typescriptlang.org/">Typescript</a></li>
<li>Front-end library - <a href="https://reactjs.org/">Reactjs</a></li>
<li>UI components - <a href="https://chakra-ui.com">Chakra UI</a></li>
<li>Animation library - <a href="https://www.framer.com/motion/">Framer Motion</a></li>
<li>Notes display - <a href="https://github.com/tsuyoshiwada/react-stack-grid">react-stack-grid</a></li>
<li>Forms Validation - <a href="https://react-hook-form.com/">React hook form</a></li>
<li>Images placeholder - <a href="https://www.framer.com/motion/">blurhash</a></li>
<li>Progressive image loading - <a href="https://github.com/FormidableLabs/react-progressive-image">react-progressive-image</a></li>
<li>Icons - <a href="https://react-icons.github.io/react-icons/">react icons</a></li>
</ul>
<p><strong>Demo Link:</strong> <a href="https://ma-ahmad.github.io/notebook">Notebook</a>
<strong>GitHub Repo:</strong> <a href="https://github.com/MA-Ahmad/notebook">Repo</a></p>


<h1>
  <a name="features" href="#features">
  </a>
  Features
</h1>

<ul>
<li>CRUD operations</li>
<li>Responsiveness</li>
<li>Beautiful animations</li>
<li>Image slider</li>
</ul>

<h1>
  <a name="built-with" href="#built-with">
  </a>
  Built with
</h1>

<ul>
<li>Programming language - <a href="https://www.typescriptlang.org/">Typescript</a>
</li>
<li>Front-end library - <a href="https://reactjs.org/">Reactjs</a>
</li>
<li>UI components - <a href="https://chakra-ui.com">Chakra UI</a>
</li>
<li>Animation library - <a href="https://www.framer.com/motion/">Framer Motion</a>
</li>
<li>Notes display - <a href="https://github.com/tsuyoshiwada/react-stack-grid">react-stack-grid</a>
</li>
<li>Forms Validation - <a href="https://react-hook-form.com/">React hook form</a>
</li>
<li>Images placeholder - <a href="https://www.framer.com/motion/">blurhash</a>
</li>
<li>Progressive image loading - <a href="https://github.com/FormidableLabs/react-progressive-image">react-progressive-image</a>
</li>
<li>Icons - <a href="https://react-icons.github.io/react-icons/">react icons</a>
</li>
</ul>

<p><strong>Demo Link:</strong> <a href="https://ma-ahmad.github.io/notebook">Notebook</a><br>
<strong>GitHub Repo:</strong> <a href="https://github.com/MA-Ahmad/notebook">Repo</a></p>



# Features
- CRUD operations
- Responsiveness
- Beautiful animations
- Image slider

# Built with
- Programming language - [Typescript](https://www.typescriptlang.org/)
- Front-end library - [Reactjs](https://reactjs.org/)
- UI components - [Chakra UI](https://chakra-ui.com)
- Animation library - [Framer Motion](https://www.framer.com/motion/)
- Notes display - [react-stack-grid](https://github.com/tsuyoshiwada/react-stack-grid)
- Forms Validation - [React hook form](https://react-hook-form.com/)
- Images placeholder - [blurhash](https://www.framer.com/motion/)
- Progressive image loading - [react-progressive-image](https://github.com/FormidableLabs/react-progressive-image)
- Icons - [react icons](https://react-icons.github.io/react-icons/)

**Demo Link:** [Notebook](https://ma-ahmad.github.io/notebook)
**GitHub Repo:** [Repo](https://github.com/MA-Ahmad/notebook)

Features    CRUD operations Responsiveness Beautiful animations Image slider           ...

Create a Notebook app with React, ChakraUi, and framerMotion

Features

Built with