README.md
Harsh Singh's UI Gallery
🎨 A collection of colours, gradients, typography, UI components and fun games to give you ideas and inspirations for building your own applications, UI libraries, and design systems.
🚀 Quickstart
Run the website locally
git clone https://github.com/harshhhdev/ui-gallery.gitSetting up the development environment
cd ui-gallery
# Install deps
yarnSetting up the database
NOTE: This project uses MongoDB Atlas with the Prisma connector to store data.
To start with this project, go ahead and setup your MongoDB Atlas cluster, and input your connection string under DATABASE_URL in .env. Next, generate types for your project and seed your database using the file at prisma/seed.ts
# Generate the Prisma client
yarn prisma generate
# Seed our database
yarn prisma db seedStarting server
# Start the server
yarn devServer should now be running on localhost
🔧 Tools Used
- party.js (shoutout to Ian 🎉)
- TypeScript
- MongoDB Atlas
- Prisma
- Astro
- React (with Astro)
- TailwindCSS
- Framer Motion
- react-hot-toast
- Feather Icons
- Prettier (Astro plugin)
- ESLint
- Figma
🤞 Contributing
After setting up the project, and making changes:
git add .
git commit -m "commit message"
git push YOUR_REPO_URL YOUR_BRANCHDescription
WHEW. This project was a HUGE learning experience for me, speaking in terms of Astro. Not only did I experiment with Astro’s experimental server-side rendering and new Vercel integration, but I also built the first application that uses Prisma ORM (https://prisma.io/) and is deployed to Vercel (https://vercel.com/). MAN, I just don’t have enough words to thank the people who helped me deploy my application. It was a pretty tedious process which took over 10 hours, and I’m thankful to everyone who helped me helped me it ❤️. Now enough of the Sirius (pun intended :p) talk, let’s get into what the app is, and how it functions!
Basically, the app is a small gallery of things that I’ve always kept in Figma (you can find a link on the GitHub repo), but I wanted to make it public so others can learn off of my design work, and my approach around designing components. BUT - any good application needs at least some sprinkle of gamification, which is where Astro’s server-side rendering comes in. I have a few fun eyeballing games at the end of this whole library, where you have to try and toggle some inputs to properly estimate certain CSS values in a particular HTML element. I’ve even built a leaderboard for all of this using Astro’s server side rendering feature with Prisma and MongoDB!