Dev ⚡ Hub - Full-Stack Blog Platform

Welcome to Dev ⚡ Hub, a modern, full-stack blogging platform designed for developers and tech enthusiasts. This application features a powerful Laravel API backend and a dynamic, beautifully designed React frontend built with HeroUI and Tailwind CSS.

Core Concepts & Features

This project is more than just a simple blog. It's a feature-rich platform with a focus on user experience and modern web technologies.

Frontend (React)

• Modern UI/UX: The frontend is built with React and Vite, providing a fast and responsive user experience. The UI is crafted with HeroUI, a component library based on Tailwind CSS, ensuring a consistent and modern design.
• Rich Text Editor: The post creator features a rich text editor with a live preview tab, allowing users to see exactly how their content will look before publishing.
• Auto-saving Drafts: Never lose your work! Drafts are automatically saved to the browser's local storage every 30 seconds and can also be saved manually.
• Interactive Profile Management: Users can manage their profiles, including updating their name, changing their profile picture (with a preview), and updating their password.
• User-Specific Content: The profile page includes a dedicated tab to view and manage all the posts created by the user.
• Animated Homepage: The homepage features an engaging and visually appealing animated header to welcome users.

Backend (Laravel)

• RESTful API: The backend is a robust RESTful API built with Laravel, providing a secure and scalable foundation for the application.
• Authentication: User authentication is handled by Laravel Sanctum, providing a simple and secure token-based authentication system.
• Data Validation: All incoming data is validated to ensure data integrity and provide clear error messages to the frontend.
• File Storage: The application handles file uploads for profile pictures, storing them efficiently and securely.
• Resource Management: The backend includes a utility for cleaning up orphaned images, ensuring that the storage is not cluttered with unused files.

Technologies Used

Area	Technology
Backend	Laravel, Laravel Sanctum, PHP 8.2+
Frontend	React, Vite, HeroUI, Tailwind CSS, Axios
Database	SQLite (for development)

Setup and Installation

To get the application running locally, follow these steps:

Backend

1. Navigate to the backend directory:

   cd "blogs app Backend+Frontend/backend"

2. Install dependencies:

   composer install

3. Set up your environment:

   • Copy the .env.example file to .env:

     cp .env.example .env

   • Generate an application key:

     php artisan key:generate

   • Create the database file:

     touch database/database.sqlite

   • Run database migrations:

     php artisan migrate

4. Start the development server:

   php artisan serve

   The backend will be running at http://127.0.0.1:8000.

Frontend

1. Navigate to the frontend directory:

   cd ../frontend

2. Install dependencies:

   npm install

3. Start the development server:

   npm run dev

   The frontend development server will start, typically at http://localhost:5173.

API Endpoints

All endpoints are prefixed with /api/v1.

Authentication

• POST /auth/register - Register a new user.
• POST /auth/login - Log in a user.
• POST /auth/logout - Log out the authenticated user (requires authentication).
• GET /auth/user - Get the authenticated user's information (requires authentication).
• POST /auth/delete-account - Delete the authenticated user's account (requires authentication).

Profile

Requires authentication.

• GET /profile - Get the user's profile.
• PUT /profile - Update the user's profile.
• POST /profile/image - Update the user's profile image.
• PUT /profile/password - Update the user's password.
• POST /profile/cleanup-images - Clean up orphaned profile images.

Posts

Requires authentication.

• GET /posts - Get all posts.
• POST /posts - Create a new post.
• GET /posts/user - Get all posts for the authenticated user.
• DELETE /posts/{post} - Delete a specific post.