{"componentChunkName":"component---src-templates-project-details-js","path":"/portfolio/chatui-app","result":{"data":{"markdownRemark":{"html":"<p><a href=\"https://chatui-show.netlify.app\" target=\"_blank\">Demo URL: <code>https://chatui-show.netlify.app</code> </a></p>\n<ul>\n<li>Developed a single-page chat application UI including 30+ components using React + Hooks</li>\n</ul>\n<ul>\n<li>Built a three-column layout including navbar, message list and chat list by CSS-in-JS Grid, Flexbox</li>\n<li>Used React Spring to create animation and React Router to navigate</li>\n<li>Designed App UI with Storybook</li>\n</ul>","frontmatter":{"stack":"React & Styled Components & Storybook","title":"ChatUI","featuredImg":{"childImageSharp":{"fluid":{"base64":"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAKCAIAAAA7N+mxAAAACXBIWXMAAAsTAAALEwEAmpwYAAABx0lEQVQoz22RzWsTYRDG9w/x5F3EViESPJQKUo8avShaEQQVFC+Cp4K9eBWMBD/wZAXxVAQPVUuV1pA0EpOm2TaCpgh2s2l2N+/uzuzMuzuyXQ0W/R3mMMwzM8+McXxqutPpiggzi4gCMs31nrUNiFrrZC9xHIsIMUdESZIYJ05eqlY+Ozs2cVq67YaWZYVhqLWWf8jEpVLx/r1ZETHyk9O11XqgPGQmZ4C27QOGAFprisUB7YF2/0SFacd6bbX8cSkVH86fXW9/FRHASBOFfoCI2ZwfbvRo2XpWtp+s9J6u9Ioffs43BzETIAIiERnjuUKz0SYMkVgrRa7T7aueYluRraivKADMts0goiAIfN9nZmMsd7rV2oyZASP2A3DdnWEQAIcRB5hGZu4O0LSwbeGWE4lICOANh+nBxo+eadRbCUfJbmNEAIDRnCz5bsObq/WfV+0F0xklU89jucLb95+aa2al+qVSbWx2vmnN8j+SJFV9X6s9Lj18Of/G9YbGsckLhfO3DhyaOnjk1L79E1dv3BURreNkj0ziRHjX+dZG6/WrF4vL5dRzfuLc7ZkHV67NXL85e/HynWJpLhP/faQMoN+vGvELacwP4JP6VTwAAAAASUVORK5CYII=","aspectRatio":2.0408163265306123,"src":"/static/e49bdbb8cab465590e51924e969bfe1f/ee604/chatui-banner.png","srcSet":"/static/e49bdbb8cab465590e51924e969bfe1f/69585/chatui-banner.png 200w,\n/static/e49bdbb8cab465590e51924e969bfe1f/497c6/chatui-banner.png 400w,\n/static/e49bdbb8cab465590e51924e969bfe1f/ee604/chatui-banner.png 800w,\n/static/e49bdbb8cab465590e51924e969bfe1f/f3583/chatui-banner.png 1200w,\n/static/e49bdbb8cab465590e51924e969bfe1f/5707d/chatui-banner.png 1600w,\n/static/e49bdbb8cab465590e51924e969bfe1f/eeb1b/chatui-banner.png 1920w","sizes":"(max-width: 800px) 100vw, 800px"}}}}}},"pageContext":{"slug":"chatui-app"}},"staticQueryHashes":["362580002","426988268"]}