freedesign.fyi

Seleneo helps you easily create all types of visuals for free.

Note

This application was developed for the ColorStack Hackathon.

Getting Started

Prerequisites

• The Bun runtime
• npm (v10.0.0 or higher recommended)
• Docker or PostgreSQL
• Cloudflare Images API key
• GitHub OAuth credentials
• Google Fonts API key
• Unsplash API key

Installation 🐳

Get started by cloning this repository and installing Seleneo's dependencies:

git clone https://github.com/dotcomnerd/seleneo.git
cd seleneo
bun install

Next, create a .env.local file in the root of the project and add the following environment variables:

AUTH_SECRET="your_auth_secret"
NEXT_PUBLIC_UNSPLASH_ACCESS_KEY="your_unsplash_access_key"
NEXT_PUBLIC_GOOGLE_FONTS_API_KEY="your_google_fonts_api_key"
AUTH_GITHUB_ID="your_github_id"
AUTH_GITHUB_SECRET="your_github_secret"
DATABASE_URL="your_database_url"
CLOUDFLARE_ACCOUNT_ID="your_cloudflare_account_id"
CLOUDFLARE_BEARER_TOKEN="your_cloudflare_bearer_token"

Before running the server 🏗

Make sure your docker daemon is running then run the following command to start the database:

docker-compose up -d

Next, push the database schema to the database:

bunx dotenv-cli -e .env.local -- bun db:push

Note

We use dotenv-cli to load the environment variables from the .env.local file since Prisma does not natively support custom filenames.

You're all set! 🎉

Run the server 🏃🏾‍♂️💨

You can start the development server with:

bun dev

Then, open http://localhost:3000 with your browser to see the result.

Going to Prod 👷🏿🏛️

To build the app for production:

bun build

Then, start the production server:

bun start

The Project

Features 🚀

🏗️📱🎨🖼️🌫️📸🔐🧮📏🤩	🗣️💬🙂‍↔️🙅🏿‍♂️🫨🙊🔊🗣️💬🙂‍↔️🙅🏿‍♂️🫨🙊🔊🗣️💬🙂‍↔️🙅🏿‍♂️🫨🙊🔊🗣️💬
Advanced Color Tools	Create stunning color palettes and gradients with ease.
Image Manipulation	Edit and enhance images directly within the app.
Account Management	Create an account to save your designs and settings.
Responsive Layouts	Design layouts that look great on any device.
Background Patterns	Choose from a variety of patterns for your background.
Typography Control	Fine-tune your typography with advanced controls.
3D Elements	Add depth to your designs with 3D elements and effects.
Device Frames	Showcase your product in a realistic device frame.
Browse Other Designs	Submit & view visuals created by other users of Selenero.
Share Your Designs	Export your visuals in multiple formats or share online.
Cloud Storage	Save your designs to the cloud for easy access.

How It Works

1. Upload Your Screenshot: Drag and drop your product screenshot into the editor. Crop and resize the image to fit your design. Or, start from scratch with a blank canvas.
2. Style Your Background: Choose from the unsplash curated collection of gradients, patterns, and solid backgrounds. Customize colors to match your brand.
3. Add Effects & Frames: Enhance your screenshot with shadows, multi-dimensional transformations, and device frames. It's perfect for showcasing your product.
4. Export & Share: Export your designs in multiple formats or share directly to social media. Get your visuals ready for the world to see.
5. Save Your Designs: Create an account to save your designs and settings. Access your visuals from anywhere and share them with your team and or community.
6. Browse Other Designs: View and submit visuals created by other users of Seleneo. Get inspired by the community and share your creations.

Extra Scripts

Important

We recommend using dotenv-cli to load the env variables if you're not using .env

In the directory, you can run the following scripts to help you with development:

bun lint

Runs the Next.js linter to check for code quality issues.

bun format

Formats the code using Prettier.

bun db:push

Pushes the database schema to the database.

bun db:studio

Opens the Prisma Studio to view and manage the database.

Note

If you plan on contributing to Seleneo, please make sure to run these scripts before opening a pull request.

Credits

Seleneo was built by nyumat 🫨 with contributions from flanderzz.

Other:

• shadcn for the design system
• FontAwesome / Lucide for the icons
• Magic UI for making design eng ez
• CoolShap.es for the logos/icons
• Unsplash for the images API
• Cloudflare for the images API
• Google Fonts for the fonts
• Prisma for the database
• Next.js for the frontend
• TailwindCSS for the styling
• Bun for the runtime
• Vercel for the hosting
• Umami for the analytics
• Neon for the serverless postgres
• Jimp for the image processing
• ColorThief for the color extraction
• React Colorful for the color picker
• React Dropzone for the file upload
• Sonner for the toast notifications
• and so many more...