A modern blog platform built with React, TypeScript, and Tailwind CSS. This platform allows users to create, read, edit, and manage blog posts with a comprehensive admin dashboard.
URL: https://ink-flow-share.vercel.app/
- User Authentication: Login and registration system
- Blog Management: Create, edit, delete, and share blog posts
- Admin Dashboard: Complete administrative control over all content and users
- Responsive Design: Mobile-friendly interface
- Real-time Updates: Dynamic content management
- Node.js & npm installed - install with nvm
# Step 1: Clone the repository
git clone https://github.com/Ahmadjamil888/ink-flow-share.git
# Step 2: Navigate to the project directory
cd ink-flow-share
# Step 3: Install dependencies
npm install
# Step 4: Start the development server
npm run devThe application will be available at http://localhost:5173
- Sign Up/Login: Create an account or login to existing account
- Navigate to Home: Click on the "Write" button in the header
- Fill the Form:
- Enter a compelling title
- Add an optional featured image URL
- Write your content in the text area
- Publish: Click "Publish Post" to make it live
- Navigate to "My Blogs" in the sidebar to see all your posts
- Use the "Recent" section to see latest posts across the platform
- Go to "My Blogs" or find your post on the homepage
- Click the Edit button (pencil icon) on your post
- Modify the content in the modal that appears
- Click "Update Post" to save changes
- Locate your post in "My Blogs" or on the homepage
- Click the Delete button (trash icon) on your post
- Confirm the deletion
Note: You can only edit or delete posts that you have created.
The sidebar includes:
- Home: Main feed with all blog posts
- History: Chronological view of all posts (oldest first)
- My Blogs: Your personal posts only
- Recent: Latest posts across the platform
- Navigate to
/adminin your browser URL - Login with admin credentials:
- Email:
admin@gmail.com - Password:
PASSWORD
- Email:
- View All Posts: See every blog post on the platform
- Edit Any Post: Click the edit icon next to any post
- Delete Any Post: Click the delete icon next to any post
- View All Users: See all registered users with their details
- User Information Display:
- Name and email address
- Hashed password
- Registration date
- Unique user ID
- Delete Users: Remove users from the platform (except currently logged-in admin)
- Back to Site: Return to the main blog platform
- Real-time Data: All changes reflect immediately
- Live User Tracking: New user registrations appear automatically
- Post Statistics: Total count of posts and users
- Secure Access: Protected by admin-only credentials
- Comprehensive Management: Full CRUD operations on all content
- React 18 - Frontend framework
- TypeScript - Type safety
- Vite - Build tool and development server
- Tailwind CSS - Styling framework
- Shadcn/ui - UI component library
- React Router - Client-side routing
- Lucide React - Icon library
src/
├── components/ # Reusable UI components
├── contexts/ # React contexts for state management
├── hooks/ # Custom React hooks
├── pages/ # Page components
├── lib/ # Utility functions
└── types/ # TypeScript type definitions
- BlogContext: Manages all blog posts and related operations
- AuthContext: Handles user authentication and user data
- Local Storage: Persists user data and authentication state
- Passwords are simulated as "hashed" for demonstration
- Admin credentials are hardcoded for demo purposes
- In production, implement proper authentication and password hashing
vercel Navigate to Project > Settings > Domains and click Connect Domain. Read more: Setting up a custom domain
npm run dev- Start development servernpm run build- Build for productionnpm run preview- Preview production build
- Fork the repository
- Create a feature branch
- Make your changes
- Submit a pull request
For support and questions:
- Visit the Aurion softwares
The Daily Herald - Your trusted source for quality journalism and user-generated content.