{"componentChunkName":"component---src-templates-project-js","path":"/projects/studio-planner/","result":{"data":{"markdownRemark":{"html":"<p><a href=\"https://studio-planner.vercel.app/\">A website</a> created to showcase a simple authenticated app that allows users to sign up/log in, and then access an instrument dashboard. This dashboard allows a user to view, create and delete instruments. It uses <a href=\"https://nextjs.org/\">Next.js</a> to power the front end, with the backend and database layers handled by <a href=\"https://supabase.io/\">Supbase.io</a>.</p>\n<p>I usually do styling from the ground up using SCSS, but as the purpose of this project was to display my fullstack abilities, I opted to use <a href=\"https://chakra-ui.com/\">Chakra UI</a> to rapidly build out the front end (and because I've been dying to play around with it). The dashboard allows drag and drop functionality, which is powered by <a href=\"https://docs.dndkit.com/\">dnd kit</a>.</p>","frontmatter":{"title":"Studio Planner","tags":"Next.js,Supabase,React,Chakra UI,dnd-kit","image":{"childImageSharp":{"fluid":{"base64":"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAKCAYAAAC0VX7mAAAACXBIWXMAABJ0AAASdAHeZh94AAACJElEQVQoz22Sy08TURSH+RNMDemDPih9MNOZPgU6A33Q2k5pKZZSSEHKwzQCgqhxIS9hI4nGRONCEzduTFypexM1YWH8tz7uVKmNsPjl3nNz7nd/55zbNzCoYsrhUfAG4shhDUlNEorqDAUTWJ3DHdndMjaXzGAghl8awRuMd/L88igD4u4Fp8/xNzCTpcgEycwMo6kKWqZKOJ4lliyKsyoxzSA+VkCJpskY86RuzgrVGdMN8ZjSNdV3Qba7Q4RiKRxOL9cs/dhsDlQBNMo1KkaekCyhqFEyhTnOfp3x5etH3r97QfN2C6sr9M9hLzCoatidbiZzeQI+H3JknJFkmkG3k832Gpl0hvFCg9/fv/Hh5BGn+21KReHQExYM5TJwOKwz4Pbi8QWFUw9qIkt0JIvPL3N0cEC93kQrNvj06g37isrJwQMa84tXO7Q5JaJjRYzaGqXaKqXZdUbTM6SKC8wubTPdaJOfbomzKgutXZqLW2zsPqVcX+/0/z9guDPJhF5mqb3Hw73nrGwdoufmyFVa3Nk55t7jZ8w0d7gxMU1VrJsiXr67T3ZqGUfvlHtLDig6Eb1CVJsSpRbF1NMoiUniIo5ppU4FZk5c7GNJQxiYEm3JXQY6vWH6HUHh6BYnT07ZuH/I0cu3lKtLWKw+7KIkq2iJ2RbzYXP/R8OiXKn7ZbrfxgReF0AjV+NnYZXPWoMfx69ZWd3GYvPjGop0HVylXofnnSZMYkmtUAsAAAAASUVORK5CYII=","aspectRatio":2.0288770053475935,"src":"/static/bc1b8f2d7a10901d45ff41620ee085a2/a2cf9/studio-planner.png","srcSet":"/static/bc1b8f2d7a10901d45ff41620ee085a2/8f8d9/studio-planner.png 250w,\n/static/bc1b8f2d7a10901d45ff41620ee085a2/ddb9e/studio-planner.png 500w,\n/static/bc1b8f2d7a10901d45ff41620ee085a2/a2cf9/studio-planner.png 1000w,\n/static/bc1b8f2d7a10901d45ff41620ee085a2/52e98/studio-planner.png 1500w,\n/static/bc1b8f2d7a10901d45ff41620ee085a2/05843/studio-planner.png 1897w","sizes":"(max-width: 1000px) 100vw, 1000px"}}}}}},"pageContext":{"isCreatedByStatefulCreatePages":false,"slug":"/projects/studio-planner/"}}}