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.

Branding/Design Board · Demo

🚀 Quickstart

Run the website locally

git clone https://github.com/harshhhdev/ui-gallery.git

Setting up the development environment

cd ui-gallery

# Install deps
yarn

Setting 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 seed

Starting server

# Start the server
yarn dev

Server 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_BRANCH