199 lines
6.9 KiB
Plaintext
199 lines
6.9 KiB
Plaintext
I’m **liquid sky**, building a Laravel application (like ProductHunt/Uneed.best) and need help with **frontend development**. Here’s what I need for a modern, responsive, and dynamic UI:
|
||
|
||
---
|
||
|
||
### **1. Tech Stack & Setup**
|
||
- **Frontend Framework**: Use **Blade templates** with **Tailwind CSS** for styling.
|
||
- **Dynamic Features**: Use **Alpine.js** for lightweight interactivity (e.g., toggles, modals).
|
||
- **Real-Time Updates**: Use **Laravel Echo** (if real-time features are needed).
|
||
- **Build Tool**: Use **Laravel Mix** or **Vite** for asset compilation.
|
||
|
||
---
|
||
|
||
### **2. UI/UX Design**
|
||
#### **A. Core Pages**
|
||
Design and implement the following pages with a clean, intuitive UI:
|
||
1. **Homepage (`products.index`)**
|
||
- Hero section with a search bar and trending products.
|
||
- Grid/list view of products (filterable/sortable).
|
||
- Sidebar for filters (categories, status, date range).
|
||
- Pagination at the bottom.
|
||
|
||
2. **Product Show Page (`products.show`)**
|
||
- Product title, description, website link, and thumbnail.
|
||
- Upvote button (with count), bookmark button, and share options.
|
||
- Comments section (nested, with user avatars and timestamps).
|
||
- Related products (based on category or tags).
|
||
|
||
3. **Product Submission Form (`products.create`)**
|
||
- Form fields: title, description, website URL, category dropdown, thumbnail upload.
|
||
- Real-time validation feedback (e.g., URL format, required fields).
|
||
- Preview section for the thumbnail.
|
||
|
||
4. **User Profile Page (`profile.show`)**
|
||
- User avatar, bio, and social links.
|
||
- Tabs for: submitted products, upvoted products, bookmarked products.
|
||
- Edit profile button (links to `profile.edit`).
|
||
|
||
5. **Admin Dashboard (`products.manage`)**
|
||
- Table of all products with filters for status (pending/approved/rejected).
|
||
- Actions: approve, reject, edit, delete.
|
||
- Search bar to find products by title/description.
|
||
|
||
6. **Authentication Pages**
|
||
- Login, registration, and password reset forms (use Laravel Breeze/Fortify scaffolding).
|
||
|
||
---
|
||
|
||
#### **B. UI Components**
|
||
Create reusable Blade components for:
|
||
1. **Navigation Bar**
|
||
- Logo, search bar, user avatar dropdown (login/logout/profile).
|
||
- Responsive design (collapses to hamburger menu on mobile).
|
||
|
||
2. **Product Card**
|
||
- Thumbnail, title, description (truncated), upvote count, category tag.
|
||
- Hover effects and responsive layout (grid on desktop, list on mobile).
|
||
|
||
3. **Upvote/Bookmark Buttons**
|
||
- Interactive buttons with visual feedback (e.g., color change on click).
|
||
- AJAX-powered to avoid page reloads.
|
||
|
||
4. **Comment Section**
|
||
- Form to add a comment (authenticated users only).
|
||
- Nested comments with user avatars, usernames, and timestamps.
|
||
- Delete button for comment owners/admins.
|
||
|
||
5. **Modals**
|
||
- Confirmation modals for actions like deleting a product/comment.
|
||
- Image preview modal for thumbnails.
|
||
|
||
6. **Notifications**
|
||
- Toast notifications for success/error messages (e.g., "Product submitted!").
|
||
- Dropdown for in-app notifications (e.g., "Your product was approved").
|
||
|
||
---
|
||
|
||
### **3. Responsive Layouts**
|
||
- Use **Tailwind CSS** for responsive design:
|
||
- Mobile-first approach.
|
||
- Breakpoints: `sm` (640px), `md` (768px), `lg` (1024px), `xl` (1280px).
|
||
- Example:
|
||
```html
|
||
<div class="grid grid-cols-1 sm\:grid-cols-2 lg\:grid-cols-3 gap-4">
|
||
<!-- Product cards -->
|
||
</div>
|
||
```
|
||
- Test layouts on:
|
||
- Mobile (iPhone SE, Galaxy S20).
|
||
- Tablet (iPad, Surface).
|
||
- Desktop (1024px and above).
|
||
|
||
---
|
||
|
||
### **4. Dynamic Features**
|
||
#### **A. Upvoting & Bookmarking**
|
||
- Use **Alpine.js** for client-side interactivity:
|
||
```html
|
||
<button
|
||
x-data="{ upvoted: {{ \$product->isUpvotedBy(auth()->user()) ? 'true' : 'false' }} }"
|
||
x-on\:click="
|
||
fetch('{{ route('products.upvote', \$product) }}', {
|
||
method: 'POST',
|
||
headers: {
|
||
'X-CSRF-TOKEN': '{{ csrf_token() }}',
|
||
'Content-Type': 'application/json',
|
||
},
|
||
})
|
||
.then(response => response.json())
|
||
.then(data => {
|
||
upvoted = !upvoted;
|
||
document.querySelector('.upvote-count').textContent = data.upvotesCount;
|
||
});
|
||
"
|
||
\:class="{ 'text-green-500': upvoted, 'text-gray-500': !upvoted }"
|
||
>
|
||
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 15l7-7 7 7" />
|
||
</svg>
|
||
<span class="upvote-count">{{ \$product->upvotes->count() }}</span>
|
||
</button>
|
||
```
|
||
#### **B. Real-Time Updates**
|
||
|
||
Use Laravel Echo to listen for events (e.g., ProductUpvoted, CommentCreated):
|
||
|
||
```
|
||
Echo.channel('product.' + productId)
|
||
.listen('ProductUpvoted', (e) => {
|
||
document.querySelector('.upvote-count').textContent = e.upvotesCount;
|
||
})
|
||
.listen('CommentCreated', (e) => {
|
||
// Append new comment to the DOM
|
||
const commentsContainer = document.querySelector('.comments-container');
|
||
commentsContainer.innerHTML += `
|
||
<div class="comment">
|
||
<img src="\${e.comment.user.avatar}" class="w-8 h-8 rounded-full">
|
||
<div>
|
||
<p class="font-bold">${e.comment.user.name}</p>
|
||
<p>${e.comment.body}</p>
|
||
</div>
|
||
</div>
|
||
`;
|
||
});
|
||
```
|
||
|
||
#### **C. Infinite Scroll**
|
||
|
||
Replace pagination with infinite scroll for the product grid:
|
||
|
||
```
|
||
window.addEventListener('scroll', () => {
|
||
const { scrollTop, scrollHeight, clientHeight } = document.documentElement;
|
||
if (scrollTop + clientHeight >= scrollHeight - 5) {
|
||
// Fetch next page of products
|
||
fetch(`/products?page=${currentPage + 1}`)
|
||
.then(response => response.text())
|
||
.then(html => {
|
||
document.querySelector('.products-grid').innerHTML += html;
|
||
currentPage++;
|
||
});
|
||
}
|
||
});
|
||
```
|
||
|
||
### **5. Accessibility & Performance**
|
||
|
||
Accessibility:
|
||
|
||
Use semantic HTML (<button>, <nav>, <article>).
|
||
Add ARIA attributes for dynamic elements (e.g., aria-live for notifications).
|
||
Ensure keyboard navigability (e.g., tab index for modals).
|
||
|
||
Performance:
|
||
|
||
Lazy-load images (use loading="lazy" for thumbnails).
|
||
Minify CSS/JS with Laravel Mix/Vite.
|
||
Use defer for non-critical JS.
|
||
|
||
|
||
### **6. Example Code Snippets**
|
||
Include the following in your response:
|
||
|
||
Blade layout (layouts.app) with navigation bar and footer.
|
||
Product card component (reusable Blade component).
|
||
Product show page with upvote/comment sections.
|
||
Alpine.js examples for interactive elements (e.g., modals, toggles).
|
||
Laravel Echo setup for real-time updates.
|
||
Responsive grid for product listings.
|
||
Tailwind CSS configuration (if customizing themes/colors).
|
||
|
||
### **7. Testing**
|
||
|
||
Test the frontend for:
|
||
|
||
Cross-browser compatibility (Chrome, Firefox, Safari, Edge).
|
||
Responsive breakpoints (use Chrome DevTools).
|
||
Accessibility (use Lighthouse or axe).
|
||
Performance (Lighthouse score > 90).
|