RO
RobynAwesome/5s-Arena-Blog
A modern MERN stack blog application built with **MongoDB, Express.js, React, and Node.js**, designed to provide a dynamic and responsive blogging platform featuring secure user authentication, role-based access control, CRUD functionality for posts, image uploads, infinite scroll with filters, and social media integration.
5s Arena Blog
A modern football blog built with React, Vite, and TailwindCSS, celebrating football culture, 5-a-side stories, legends, and the beautiful game.
Tech Stack
- Frontend: React 18, React Router v6
- Build Tool: Vite 8
- Styling: TailwindCSS 3, Montserrat font
- Images: ImageKit CDN integration
- Deployment: Vercel / Netlify
Features
- Responsive design (mobile-first)
- Hero section with video highlights
- Featured & recent posts grid
- Category filtering on post list
- Author profiles
- Login & registration pages
- Write/publish post interface
- SEO meta tags (Open Graph, Twitter Cards)
Getting Started
# Clone the repository
git clone https://github.com/RobynAwesome/5s-Arena-Blog-v2.git
# Install dependencies
npm install
# Start development server
npm run dev
# Build for production
npm run buildProject Structure
src/
components/ # Reusable components (Navbar, Footer, Image)
layouts/ # Page layouts (MainLayout)
routes/ # Page components (Homepage, PostListPage, etc.)
public/
authors/ # Author profile images
backgrounds/ # Hero & section backgrounds
posts/ # Blog post cover images
sidebar-backgrounds/
video-posts/ # Video content
youtube-images/ # Social icons & favicon
Contributing
- Fork the repository
- Create your feature branch (
git checkout -b feature/AmazingFeature) - Commit your changes (
git commit -m 'Add some AmazingFeature') - Push to the branch (
git push origin feature/AmazingFeature) - Open a Pull Request