ReactBlog is a single-page application built with React.
It provides a clean and responsive user interface that allows users to:
- 🔐 Sign up, log in, and manage authentication status
- ✍️ Create, edit, and delete blog posts
- 🖼️ Upload images with posts using a user-friendly form
- 🔎 Explore blog posts from other users
- 🔄 Navigate smoothly using client-side routing with React Router
⚠️ Display user-friendly error messages and loading indicators
Check out the live project here:
👉 https://react-blog-seven-rho.vercel.app
- React
- React Router
- Axios
- Context API
- Tailwind CSS
- User login and register (client-side validation).
- Secure with JWT tokens stored in httpOnly cookies.
- Create, edit, and delete blog posts.
- Upload images using imgbb API.
- Posts are linked to the authenticated user.
- Responsive and dark-mode friendly.
- Only the creator of a post can edit/delete it.
- Routes are protected both on client and server.
| Layer | Technologies |
|---|---|
| Frontend | React, React Router, Tailwind CSS |
| Backend | Express.js, MongoDB, Mongoose |
| Auth | JWT, Cookies (httpOnly) |
| Image Upload | imgbb API |
| Validation | Zod |
.
├── Components/ # Reusable UI components
├── Contexts/ # Auth & Loading providers
├── Layouts/ # Pages Layouts
├── Pages/ # Page views (Home, Login, Post, etc.)
└── utils/ # Helpers like API instance, alerts, etc.
git clone https://github.com/mvicsa/ReactBlog.git
cd ReactBlognpm install
npm run dev- Frontend: Vercel
- Backend: Railway
- Ensure cookies are sent with
credentials: include - Use
sameSite: "Lax"or"None"with secure cookies
VITE_API_URL=http://localhost:3000
VITE_IMGBB_KEY=your_imgbb_api_key- Add categories/tags
- Rich-text editor for posts
- Commenting system
- Profile pages
Pull requests are welcome!
For major changes, please open an issue first to discuss what you would like to change.
MIT © mvicsa