feat: portal-mini-store-template with PDPA consent logging
- Payload CMS 3.49.1 + MongoDB - ConsentLogs collection for PDPA compliance - CookieBanner component with Accept/Reject/Preferences - /api/consent endpoint for logging - Cart, checkout, orders functionality - Docker compose with MongoDB
This commit is contained in:
Ami
202
src/README.md
Normal file
202
src/README.md
Normal file
@@ -0,0 +1,202 @@
|
||||
# 🍿 Dyad Snacks
|
||||
|
||||
This template comes configured with the bare minimum to get started on anything you need.
|
||||
|
||||
## Features
|
||||
|
||||
### 🌟 Public Features (No Authentication Required)
|
||||
- **Browse Snacks**: View all available snack items with images, descriptions, prices, and categories
|
||||
- **Responsive Design**: Fully responsive interface that works on desktop, tablet, and mobile devices
|
||||
|
||||
### 👤 Authenticated User Features
|
||||
- **User Registration & Login**: Secure authentication system
|
||||
- **Place Orders**: Add snacks to cart and place orders
|
||||
- **Order History**: View personal order history with status tracking
|
||||
- **Order Tracking**: See order status (Pending, Completed, Cancelled)
|
||||
|
||||
### 🔧 Admin Features
|
||||
- **Admin Dashboard**: Comprehensive order management interface
|
||||
- **Order Management**: Review all orders from all customers
|
||||
- **Status Updates**: Update order status (Pending → Completed/Cancelled)
|
||||
- **Order Statistics**: View summary statistics of all orders
|
||||
- **Snack Management**: Add, edit, and manage snack inventory through Payload CMS admin panel
|
||||
|
||||
## Tech Stack
|
||||
|
||||
- **Frontend**: Next.js 15, React 19, TypeScript
|
||||
- **Backend**: Payload CMS 3.0
|
||||
- **Database**: Vercel Postgres
|
||||
- **Authentication**: Built-in Payload authentication with role-based access
|
||||
- **Styling**: Custom CSS with modern responsive design
|
||||
- **Media**: Sharp for image processing
|
||||
|
||||
## User Roles
|
||||
|
||||
### Regular Users (`role: 'user'`)
|
||||
- Can view all available snacks
|
||||
- Can place orders for snacks
|
||||
- Can view their own order history
|
||||
- Cannot modify or cancel orders once placed
|
||||
|
||||
### Admin Users (`role: 'admin'`)
|
||||
- All regular user permissions
|
||||
- Can access admin dashboard
|
||||
- Can view all orders from all customers
|
||||
- Can update order status
|
||||
- Can manage snack inventory through CMS admin panel
|
||||
|
||||
## Collections
|
||||
|
||||
### Users
|
||||
- Email, first name, last name
|
||||
- Role-based authentication (user/admin)
|
||||
- Default role: 'user'
|
||||
|
||||
### Snacks
|
||||
- Name, description, price, category
|
||||
- Image upload with media relation
|
||||
- Availability toggle
|
||||
- Categories: Chips, Candy, Cookies, Nuts, Crackers, Drinks
|
||||
|
||||
### Orders
|
||||
- User relationship
|
||||
- Array of items (snack + quantity)
|
||||
- Total amount calculation
|
||||
- Status tracking (pending/completed/cancelled)
|
||||
- Order date tracking
|
||||
|
||||
### Media
|
||||
- Image upload and management
|
||||
- Alt text for accessibility
|
||||
|
||||
## Getting Started
|
||||
|
||||
### Prerequisites
|
||||
- Node.js 18+ or 20+
|
||||
- pnpm 9+ or 10+
|
||||
- PostgreSQL database (Vercel Postgres recommended)
|
||||
|
||||
### Installation
|
||||
|
||||
1. **Clone the repository**
|
||||
```bash
|
||||
git clone <repository-url>
|
||||
cd dyad-snacks
|
||||
```
|
||||
|
||||
2. **Install dependencies**
|
||||
```bash
|
||||
pnpm install
|
||||
```
|
||||
|
||||
3. **Environment Setup**
|
||||
```bash
|
||||
cp .env.example .env
|
||||
```
|
||||
|
||||
Configure your environment variables:
|
||||
```env
|
||||
PAYLOAD_SECRET=your-secret-key
|
||||
POSTGRES_URL=your-postgres-connection-string
|
||||
```
|
||||
|
||||
4. **Start the development server**
|
||||
```bash
|
||||
pnpm dev
|
||||
```
|
||||
|
||||
5. **Open your browser**
|
||||
Navigate to `http://localhost:3000`
|
||||
|
||||
### First Time Setup
|
||||
|
||||
1. **Create Admin User**: Visit `/admin` to create your first admin user
|
||||
2. **Add Snacks**: Use the admin panel to add snack items with images
|
||||
3. **Test Ordering**: Create a regular user account to test the ordering flow
|
||||
|
||||
## API Endpoints
|
||||
|
||||
### Orders
|
||||
- `POST /api/orders` - Create a new order (authenticated users)
|
||||
- `PATCH /api/orders/update-status` - Update order status (admin only)
|
||||
|
||||
### Built-in Payload Endpoints
|
||||
- `/api/users` - User management
|
||||
- `/api/snacks` - Snack management
|
||||
- `/api/media` - Media upload/management
|
||||
- `/admin` - Admin panel access
|
||||
|
||||
## Application Flow
|
||||
|
||||
### For Visitors (Unauthenticated)
|
||||
1. **Homepage**: Browse all available snacks
|
||||
2. **Login Required**: Click "Login to Order" to authenticate
|
||||
3. **Registration**: Create account with first name, last name, email, password
|
||||
|
||||
### For Regular Users
|
||||
1. **Browse & Order**: View snacks and click "Order Now"
|
||||
2. **Order Form**: Select quantity and place order
|
||||
3. **Order Confirmation**: Redirected to "My Orders" with success message
|
||||
4. **Order History**: View all personal orders with status
|
||||
|
||||
### For Admin Users
|
||||
1. **Admin Dashboard**: Access via navigation or direct link
|
||||
2. **Order Overview**: See statistics and all orders
|
||||
3. **Status Management**: Update order status with real-time buttons
|
||||
4. **Inventory Management**: Access full CMS admin panel
|
||||
|
||||
## Responsive Design
|
||||
|
||||
The application is fully responsive with breakpoints:
|
||||
- **Desktop**: 1200px+ (full grid layout, side-by-side forms)
|
||||
- **Tablet**: 768px-1199px (adapted grid, stacked layouts)
|
||||
- **Mobile**: <768px (single column, touch-friendly buttons)
|
||||
|
||||
## Security Features
|
||||
|
||||
- **Role-based Access Control**: Proper separation of user and admin permissions
|
||||
- **Authentication Required**: Protected routes for ordering and admin functions
|
||||
- **Data Validation**: Server-side validation for all order data
|
||||
- **Price Verification**: Server validates prices to prevent manipulation
|
||||
|
||||
## Deployment
|
||||
|
||||
### Using Payload Cloud
|
||||
1. Connect your repository to Payload Cloud
|
||||
2. Configure environment variables
|
||||
3. Deploy automatically with MongoDB and S3 storage
|
||||
|
||||
### Using Vercel
|
||||
1. Connect repository to Vercel
|
||||
2. Configure Vercel Postgres database
|
||||
3. Set environment variables
|
||||
4. Deploy
|
||||
|
||||
## Development Commands
|
||||
|
||||
```bash
|
||||
pnpm dev # Start development server
|
||||
pnpm build # Build for production
|
||||
pnpm start # Start production server
|
||||
pnpm generate:types # Generate TypeScript types
|
||||
pnpm lint # Run ESLint
|
||||
```
|
||||
|
||||
## Contributing
|
||||
|
||||
1. Fork the repository
|
||||
2. Create a feature branch
|
||||
3. Make your changes
|
||||
4. Test thoroughly
|
||||
5. Submit a pull request
|
||||
|
||||
## Support
|
||||
|
||||
For questions or issues:
|
||||
- Check the [Payload CMS documentation](https://payloadcms.com/docs)
|
||||
- Review the Next.js documentation
|
||||
- Open an issue in the repository
|
||||
|
||||
---
|
||||
|
||||
**Built with ❤️ using Payload CMS and Next.js**
|
||||
Reference in New Issue
Block a user