https://github.com/anmol-baranwal/designlyfe
🎨 Best Project for designers
https://github.com/anmol-baranwal/designlyfe
dashboard design designers icons illustrations ui
Last synced: 4 months ago
JSON representation
🎨 Best Project for designers
- Host: GitHub
- URL: https://github.com/anmol-baranwal/designlyfe
- Owner: Anmol-Baranwal
- License: mit
- Created: 2023-08-01T11:54:02.000Z (about 2 years ago)
- Default Branch: main
- Last Pushed: 2024-04-23T18:50:34.000Z (over 1 year ago)
- Last Synced: 2025-06-26T16:07:53.661Z (4 months ago)
- Topics: dashboard, design, designers, icons, illustrations, ui
- Language: TypeScript
- Homepage: https://designlyfe.vercel.app/
- Size: 2.28 MB
- Stars: 2
- Watchers: 1
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
- Code of conduct: CODE_OF_CONDUCT.md
Awesome Lists containing this project
README
# Designlyfe
> :information_source: This web application is constructed with Next.js, a framework you can find at [Next.js](https://nextjs.org/) which is bootstrapped with [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app).
🎨 Hub for Designers. Watch the [complete demo](https://buildspace.so/s4/demoday/designlyfe).
I built this under six weeks during Nights & Weekends Season 4 (Buildspace).
## :fire: Deployed Link ##
This project is hosted on [Vercel Platform](https://vercel.com/). Visit the following link to view the web application.
```
https://designlyfe.tech/
```
## What is the problem?
- Finding the right set of icons
- Searching multiple websites
- Limited slots due to branding
- No way to know which is the best one
> Solution:
With designlyfe:
- A user can upvote, bookmark, and discover design assets, including illustrations, icons, and mockups from various websites in one centralized location.
- Each resource is accompanied by essential information such as previews, pricing details, brand, URL, available formats, and sharing options.
- A user can submit the feedback from the dashboard itself.
- There are filters and a search bar that improves UX.
- The user has a settings panel where they can switch themes and do more.
- Integrated Simple Analytics and Pageclip so that users can subscribe to emails.
I've properly and appropriately arranged the User Interface. You can view this to see labeled [snapshots](./SNAPSHOTS.md) of various parts of designlyfe.
Please note that the website is not responsive since I reached out to users, and companies while sharing what I built every couple of days across all social platforms. I got around 22 beta users for the waitlist.
## 🗄️ Database Structure
We have three collections and the structure of asset collection is as shown:
```
.
└── assets (collection)
└── Icons (document)
└── Craftwork (companies)
└── craftworkIcon1 (document)
├── name
├── companyLogoUrl
├── formats
├── assetUrl
├── imageUrl
├── category
├── author
├── upvotes (subcollection)
│ ├── userId1 (document)
│ ├── userId2
│ └── ...
└── bookmarks (subcollection)
├── userId1 (document)
├── userId2
└── ...
└── craftworkIcon2
└── ...
└── Getillustrations
└── getillustrationsIcon1
└── ...
└── getillustrationsIcon2
└── ...
└── Illustrations (document)
└── Craftwork (companies)
└── craftworkIllustration1 (document)
├── name
├── companyLogoUrl
├── formats
├── assetUrl
├── imageUrl
├── category
├── author
├── upvotes (subcollection)
│ ├── userId1 (document)
│ ├── userId2
│ └── ...
└── bookmarks (subcollection)
├── userId1 (document)
├── userId2
└── ...
└── craftworkIllustration2
└── ...
└── Getillustrations
└── getillustrationsIllustration1
└── ...
└── getillustrationsIllustration2
└── ...
└── mockups (document)
└── ...
└── ...
```
## 🌐 Setup Local Environment
You need to setup a few API keys for this project to be setup correctly otherwise you won't be able to properly work on this project
- [Firebase Services Key](https://firebase.google.com/)
For that, you need to create a `.env.local` file in your project, as shown in the [docs](https://nextjs.org/docs/basic-features/environment-variables#loading-environment-variables). The file should look like this:
```
NEXT_PUBLIC_FIREBASE_API_KEY=
NEXT_PUBLIC_FIREBASE_PROJECT_ID=
NEXT_PUBLIC_FIREBASE_STORAGE_BUCKET=
NEXT_PUBLIC_FIREBASE_MESSAGING_SENDER_ID=
NEXT_PUBLIC_FIREBASE_APP_ID=
NEXT_PUBLIC_FIREBASE_MEASUREMENT_ID=
```
You can retrieve the above environment values by referring to their documentation linked above. Once retrieved, paste them accordingly as mentioned above.
## ✅ Guidelines to run web app locally
- For this app to work, Use these commands to run the application
```bash
# to install dependencies
npm install
OR
pnpm install
# to run the development server
npm run dev
OR
pnpm run dev
```
- Open `http://localhost:3000` with your browser to see the application.
## 
Frameworks & Tools
