Modern WebComick

A modern, full-stack web comic platform built with Laravel (backend) and Nuxt.js (frontend) using Inertia.js for seamless integration.

🚀 Features

For Readers

• Browse Comics: Explore a vast library of comics across multiple categories
• Search & Filter: Find comics by title, description, or category
• Reading Experience: Clean, optimized reading interface
• Comments: Engage with the community through comments
• User Accounts: Register and login to personalize your experience

For Admins

• Comic Management: Full CRUD operations for comics
• User Management: Manage user accounts and permissions
• Category Management: Organize comics with categories
• Dashboard: Comprehensive admin dashboard with statistics
• Content Moderation: Manage comments and user-generated content

Technical Features

• Modern Stack: Laravel 11 + Nuxt 3 + Inertia.js
• Responsive Design: Mobile-first, responsive layout
• Authentication: Secure login/register system
• Database: MySQL with proper relationships
• File Uploads: Support for comic images
• Search: Fast, database-driven search functionality

📋 Prerequisites

Before you begin, ensure you have the following installed:

• PHP 8.1+ with extensions: mbstring, pdo_mysql, tokenizer, xml, ctype, json, bcmath
• Composer (PHP dependency manager)
• Node.js 18+ and npm (JavaScript runtime and package manager)
• MySQL 8.0+ or MariaDB 10.3+
• Web Server (Apache/Nginx) or use built-in PHP server for development

🛠️ Installation

Step 1: Clone the Repository

git clone https://github.com/DzCodeProgrammer/Modern-WebComick.git
cd Modern-WebComick

Step 2: Backend Setup (Laravel)

1. Navigate to backend directory:

   cd backend

2. Install PHP dependencies:

   composer install

3. Set up environment variables:

   cp .env.example .env

4. Configure your .env file:

   APP_NAME="Modern WebComick"
   APP_ENV=local
   APP_KEY=base64:7YvbUBabuIhU6P9fElRfT5H3N2J6P3fElRfT5H3N2J6=
   APP_DEBUG=true
   APP_URL=http://localhost:8000
   
   DB_CONNECTION=mysql
   DB_HOST=127.0.0.1
   DB_PORT=3306
   DB_DATABASE=modern_webcomick
   DB_USERNAME=root
   DB_PASSWORD=your_password

5. Generate application key:

   php artisan key:generate

6. Create database: Create a MySQL database named modern_webcomick

7. Run migrations:

   php artisan migrate

8. Seed the database (optional):

   php artisan db:seed

Step 3: Frontend Setup (Nuxt.js)

1. Navigate to frontend directory:

   cd ../frontend

2. Install Node.js dependencies:

   npm install

3. Configure environment (optional):

   cp .env.example .env

🚀 Running the Application

Development Mode

1. Start the Laravel backend:

   cd backend
   php artisan serve

   Backend will be available at: http://localhost:8000

2. Start the Nuxt.js frontend (new terminal):

   cd frontend
   npm run dev

   Frontend will be available at: http://localhost:3000

Production Mode

1. Build the frontend:

   cd frontend
   npm run build

2. Optimize Laravel:

   cd backend
   composer install --optimize-autoloader --no-dev
   php artisan config:cache
   php artisan route:cache
   php artisan view:cache

📁 Project Structure

Modern-WebComick/
├── backend/                 # Laravel Backend
│   ├── app/
│   │   ├── Http/
│   │   │   ├── Controllers/    # API Controllers
│   │   │   └── Middleware/     # Custom Middleware
│   │   └── Models/             # Eloquent Models
│   ├── database/
│   │   ├── migrations/         # Database Migrations
│   │   └── seeders/           # Database Seeders
│   ├── routes/                # API Routes
│   └── config/                # Configuration Files
├── frontend/                # Nuxt.js Frontend
│   ├── pages/                # Vue Pages
│   ├── components/           # Vue Components
│   ├── layouts/              # Layout Components
│   ├── assets/               # Static Assets
│   └── plugins/              # Nuxt Plugins
├── .env                     # Environment Variables
├── .env.example            # Environment Template
└── README.md               # This File

🗄️ Database Schema

Tables

• users: User accounts and authentication
• categories: Comic categories and genres
• comics: Comic posts with metadata
• comments: User comments on comics

Key Relationships

• Users can have many comments
• Comics belong to a category
• Comics can have many comments
• Comments belong to a user and a comic

🔧 Configuration

Environment Variables

Key environment variables to configure:

# Application
APP_NAME="Modern WebComick"
APP_URL=http://localhost:8000

# Database
DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=modern_webcomick
DB_USERNAME=root
DB_PASSWORD=

# Mail (for notifications)
MAIL_MAILER=smtp
MAIL_HOST=smtp.gmail.com
MAIL_PORT=587
MAIL_USERNAME=your_email@gmail.com
MAIL_PASSWORD=your_app_password

# File Storage
FILESYSTEM_DISK=local
UPLOAD_MAX_SIZE=5120

Admin Account

Create an admin account after installation:

1. Register a normal account through the web interface
2. Manually update the database to set is_admin = 1 for your user
3. Or use database seeder to create default admin account

🔒 Security Features

• Authentication: Laravel Sanctum for API authentication
• Authorization: Role-based access control (Admin/User)
• CSRF Protection: Built-in CSRF protection
• Input Validation: Server-side validation for all forms
• SQL Injection Protection: Eloquent ORM prevents SQL injection
• XSS Protection: Input sanitization and output escaping

🧪 Testing

Backend Testing

cd backend
php artisan test

Frontend Testing

cd frontend
npm run test

📝 API Documentation

Authentication Endpoints

• POST /login - User login
• POST /register - User registration
• POST /logout - User logout

Comic Endpoints

• GET /comics - List all comics (with pagination)
• GET /comics/{slug} - Get specific comic
• POST /comics - Create new comic (admin only)
• PUT /comics/{id} - Update comic (admin only)
• DELETE /comics/{id} - Delete comic (admin only)

Comment Endpoints

• GET /comics/{id}/comments - Get comments for a comic
• POST /comics/{id}/comments - Add comment (authenticated users)
• DELETE /comments/{id} - Delete comment (owner or admin)

🚀 Deployment

Using Laravel Forge (Recommended)

1. Create a new server on Laravel Forge
2. Deploy the backend to your server
3. Build and deploy the frontend
4. Configure your web server to serve both applications

Manual Deployment

1. Set up a web server (Apache/Nginx)
2. Configure PHP and MySQL
3. Deploy the Laravel backend
4. Build and deploy the Nuxt.js frontend
5. Configure reverse proxy for API requests

🤝 Contributing

1. Fork the repository
2. Create a feature branch: git checkout -b feature/new-feature
3. Commit your changes: git commit -am 'Add new feature'
4. Push to the branch: git push origin feature/new-feature
5. Create a Pull Request

📄 License

This project is licensed under the MIT License - see the LICENSE file for details.

🐛 Troubleshooting

Common Issues

1. Composer install fails

   • Ensure PHP version is 8.1+
   • Check PHP extensions are installed
   • Run with --ignore-platform-reqs if needed

2. Database connection errors

   • Verify MySQL is running
   • Check database credentials in .env
   • Ensure database exists

3. Frontend build errors

   • Clear node_modules: rm -rf node_modules && npm install
   • Check Node.js version (18+ required)
   • Verify all dependencies are installed

4. Permission errors

   • Set proper permissions on storage directories
   • Ensure web server has write access to storage/

Getting Help

• Create an issue on GitHub
• Check the documentation
• Review the error logs in storage/logs/

📞 Support

If you encounter any issues or have questions:

• Email: support@modernwebcomick.com
• GitHub Issues: Create an issue
• Documentation: Check this README and inline code comments

---

Modern WebComick - Built with ❤️ using Laravel, Nuxt.js, and Inertia.js