Introducing Güllü, a clean and modern e-commerce web app design with a minimalist yet fashionable touch. This fully responsive design ensures a seamless shopping experience across all devices, from desktops to smartphones.
You can have a look at the live preview link:
Check out the complete UI design in Figma:
- Responsive Design: Seamless UI experience on all devices.
- Product Listing: Display products by category and gender.
- Details: Display the product details, and select the size and amount.
- Sort: Sort products by price in asc/desc order.
- Shopping Cart (Coming very soon): A user-friendly cart system to manage selected products.
- Animations: Nice animations using framer motion.
- UI Components: Built using reusable react components for efficiency.
- State Management: Atom-based state management with clear separation of concerns.
- Dark Mode Support: Integrated light and dark mode switcher.
- Supabase Integration: Handles backend storage and database operations.
- Custom Hooks: Optimized performance for features like shopping cart management.
- Enhance animations for a better user experience
- Implement search feature
- Implement filters feature
- Frontend: React, TypeScript, Tailwind CSS, Framer Motion, Custom Fonts, Figma
- State Management: Jotai (Atoms)
- Backend: Supabase (PostgreSQL Database and Authentication)
- Image Storage: Cloudinary
- Build Tool: Vite
This project uses Supabase as a backend for storing product information.
Below is the schema used for the products table:
| Column Name | Data Type | Description |
|---|---|---|
id |
integer |
Primary key, auto-incremented |
title |
string |
Name of the product (e.g., “Green Cotton T-Shirt”) |
description |
text |
Detailed description of the product |
category |
string |
Product category (e.g., “tshirt”, “hoodie”, “sweatpants”) |
price |
decimal |
Price of the product |
gender |
string |
Target gender for the product (e.g., “men”, “women”) |
image_url |
string |
URL of the product image |
Here’s a sample product JSON that can be used for seeding the database:
{
"id": 1,
"title": "Green Cotton T-Shirt",
"description": "High-quality, breathable cotton T-shirt in green.",
"category": "tshirt",
"price": 19.99,
"gender": "men",
"color": "#34A853",
"image_url": "https://example.com/images/tshirt-green.jpg"
}Below is a brief explanation of the project structure:
src/
├── atoms/ # Recoil atoms for state management
├── components/ # Reusable UI components
├── config/ # App-level configuration constants
├── containers/ # Main container components
├── hooks/ # Custom hooks
├── pages/ # Page components
├── supabase/ # Supabase-specific code (context, model, seed, utils)
└── utils/ # Utility functions
License
This project is open source and available under the MIT License.