https://github.com/aliahadmd/templates-ai
AI driven development template
https://github.com/aliahadmd/templates-ai
cloudflare expressjs nodejs smtp vuejs
Last synced: 3 months ago
JSON representation
AI driven development template
- Host: GitHub
- URL: https://github.com/aliahadmd/templates-ai
- Owner: aliahadmd
- Created: 2025-03-03T23:19:26.000Z (3 months ago)
- Default Branch: main
- Last Pushed: 2025-03-04T00:19:34.000Z (3 months ago)
- Last Synced: 2025-03-04T00:24:45.396Z (3 months ago)
- Topics: cloudflare, expressjs, nodejs, smtp, vuejs
- Language: Vue
- Homepage:
- Size: 141 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
Awesome Lists containing this project
README
# Auth System with Cloudflare R2 Media Upload
A complete authentication and user management system with role-based access control and Cloudflare R2 media upload capabilities.
## Features
- **Authentication System**
- User registration with email verification
- Login with JWT authentication
- Password reset functionality
- Email verification
- **User Management**
- User profiles with update capabilities
- Profile picture upload and management
- Admin user management interface
- Role-based access control
- **Role & Permission System**
- Granular permission management
- Role assignment to users
- Permission assignment to roles
- **Media Upload System**
- Direct-to-R2 uploads using presigned URLs
- Support for multiple file types
- Drag-and-drop interface
- Progress tracking
- File preview capabilities
- CORS-compatible with fallback mechanism
- **Modern UI**
- Responsive design
- Dark/light theme support
- Tailwind CSS styling
## Tech Stack
### Backend
- Node.js with Express
- TypeScript
- Prisma ORM
- PostgreSQL database
- JWT authentication
- Cloudflare R2 for media storage (AWS S3 compatible)
### Frontend
- Vue.js 3 with Composition API
- Vite build tool
- TypeScript
- Tailwind CSS
- Pinia for state management
- Vue Router
## Getting Started
### Prerequisites
- Node.js (v16+)
- PostgreSQL database
- Cloudflare R2 bucket
### Environment Setup
1. Clone the repository:
```bash
git clone https://github.com/aliahadmd/templates-ai.git
cd templates-ai
```
2. Install dependencies:
```bash
npm install
cd frontend
npm install
cd ..
```
3. Create a `.env` file in the root directory with the following variables:
```
# Database
DATABASE_URL="postgresql://username:password@localhost:5432/auth_system"
# JWT
JWT_SECRET="your-jwt-secret"
JWT_EXPIRES_IN="1d"
JWT_REFRESH_SECRET="your-refresh-token-secret"
JWT_REFRESH_EXPIRES_IN="7d"
# Email
EMAIL_HOST="smtp.example.com"
EMAIL_PORT=587
EMAIL_USER="[email protected]"
EMAIL_PASSWORD="your-email-password"
EMAIL_FROM="[email protected]"
# Cloudflare R2
CLOUDFLARE_R2_ACCESS_KEY_ID="your-access-key"
CLOUDFLARE_R2_SECRET_ACCESS_KEY="your-secret-key"
CLOUDFLARE_R2_ENDPOINT="https://your-account-id.r2.cloudflarestorage.com"
CLOUDFLARE_R2_BUCKET="your-bucket-name"
CLOUDFLARE_R2_PUBLIC_URL="https://your-public-url.example.com"
# Server
PORT=3000
NODE_ENV="development"
```
4. Create a `.env` file in the `frontend` directory:
```
VITE_API_URL="http://localhost:3000"
```
5. Set up the database:
```bash
npx prisma migrate dev
```
6. Seed the database with initial data:
```bash
npm run seed
```
### Running the Application
1. Start the backend server:
```bash
npm run dev
```
2. In a separate terminal, start the frontend:
```bash
cd frontend
npm run dev
```
3. Access the application at `http://localhost:5173`
## Project Structure
```
├── prisma/ # Database schema and migrations
├── src/ # Backend source code
│ ├── config/ # Configuration files
│ ├── controllers/ # API controllers
│ ├── middlewares/ # Express middlewares
│ ├── routes/ # API routes
│ ├── services/ # Business logic services
│ ├── utils/ # Utility functions
│ └── index.ts # Entry point
├── frontend/ # Frontend source code
│ ├── public/ # Static assets
│ ├── src/ # Vue application
│ │ ├── assets/ # Frontend assets
│ │ ├── components/ # Vue components
│ │ ├── router/ # Vue Router configuration
│ │ ├── stores/ # Pinia stores
│ │ ├── utils/ # Utility functions
│ │ ├── views/ # Vue views/pages
│ │ ├── App.vue # Root component
│ │ └── main.ts # Entry point
│ ├── index.html # HTML template
│ └── vite.config.ts # Vite configuration
└── package.json # Project dependencies and scripts
```
## Media Upload System
The media upload system uses Cloudflare R2 (S3-compatible storage) with a direct-to-R2 upload approach using presigned URLs. This approach offers several benefits:
1. **Reduced server load**: Files are uploaded directly from the client to R2
2. **Better performance**: No need to proxy large files through the server
3. **Scalability**: Can handle many concurrent uploads
### How It Works
1. The client requests a presigned URL from the server
2. The server generates a presigned URL with the AWS SDK
3. The client uploads the file directly to R2 using the presigned URL
4. If direct upload fails due to CORS, a fallback mechanism uploads through the server
### CORS Configuration
The system automatically configures CORS for the R2 bucket on server startup to allow direct uploads from the frontend.
## Profile Picture Management
The system includes a complete profile picture management solution:
1. **User-friendly Interface**: Drag-and-drop or click-to-select interface for uploading profile pictures
2. **Image Validation**: Validates file types and sizes before upload
3. **Direct R2 Upload**: Uses the same presigned URL system as the media upload component
4. **Fallback Display**: Shows user initials when no profile picture is available
5. **Responsive Design**: Profile pictures are displayed appropriately across all device sizes
6. **Integration**: Profile pictures appear in the navigation bar and profile page
Profile pictures are stored in a dedicated "profile-pictures" folder in the R2 bucket and are automatically linked to user accounts in the database.
## UI Components and Styling
The application uses a consistent UI approach with reusable components and styling:
### Styling Approach
- **Tailwind CSS**: The primary styling tool, providing utility classes for rapid development
- **Global CSS Variables**: Theme colors and design tokens defined in CSS variables for easy theming
- **Component Classes**: Reusable component classes defined in `style.css` using Tailwind's `@apply` directive
- **Dark/Light Mode**: Full support for both dark and light themes
### Key UI Components
- **Modal**: Reusable modal component with customizable header, body, and footer
- **Button**: Flexible button component with various styles and states
- **Input**: Form input component with validation support
- **Card**: Container component with header, body, and footer sections
- **Layout**: Consistent page layout with responsive design
This approach ensures a consistent look and feel across the application while maintaining flexibility and reusability.
## License
This project is licensed under the MIT License - see the LICENSE file for details.