Demo: https://ph-database-art.vercel.app/
Unlike previous workshops, we’re not going to use an online editor like Replit. Make sure you have the following installed on your computer:
Please reach out if you need help installing any of these things.
We’re going to spend the next 30 minutes making a web app that fetches data from a database and converts the data to a grid of colors. It’s going to look something like this:
This workshop is going to throw together a bunch of pieces of tech: React, Next.js, SWR, TailwindCSS, Prisma, TypeScript. Each one of these tools is its own universe that you can spend years mastering. In this Session, we’re going to barely use each one to contribute its own small piece to our website. This means that you probably won’t walk away from this session feeling like you deeply understand what you built, and throughout you may feel like you’re in “monkey see monkey do” mode, just following the instructions without actually understanding what’s going on. That’s okay, and by design.
I think this Session is valuable because by the end of it you’ll have made something cool, and you’ll have lots of time throughout Hack Night to explore what you wrote, learn how it works, and hack stuff on top of it. It’s a way to get started with all these pieces of tech, and getting started is the hardest part.
With that in mind, I hope you have fun :D
git clone <https://github.com/MatthewStanciu/database-art-starter.git>npm i to install all of the packagesnpm run dev, then opening localhost:3000 in your browser. You should see this: