Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/bamof25th/blogapp
MERN BLOG APP WITH DASHBORD FOR ADMIN
https://github.com/bamof25th/blogapp
express-js firebase-auth mern-stack mongodb mongoose react redux
Last synced: about 2 hours ago
JSON representation
MERN BLOG APP WITH DASHBORD FOR ADMIN
- Host: GitHub
- URL: https://github.com/bamof25th/blogapp
- Owner: Bamof25th
- Created: 2024-01-28T17:07:07.000Z (10 months ago)
- Default Branch: main
- Last Pushed: 2024-09-13T11:37:51.000Z (2 months ago)
- Last Synced: 2024-09-14T01:24:26.604Z (2 months ago)
- Topics: express-js, firebase-auth, mern-stack, mongodb, mongoose, react, redux
- Language: JavaScript
- Homepage: https://bam-blog-app.onrender.com/
- Size: 240 KB
- Stars: 2
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
---
# MERN Blog App
A full-stack blog application built with the MERN (MongoDB, Express, React, Node.js) stack, offering a robust platform for users to create, edit, and manage blog posts. The app includes a powerful admin dashboard with a Content Management System (CMS), allowing admins to have complete control over the content, users, and comments.
## Features
### User Features:
- **Authentication**: Secure login and registration using Firebase Auth.
- **Blog Management**: Users can create, read, update, and delete blog posts.
- **Commenting System**: Readers can comment on blog posts to engage with content.
- **Responsive UI**: Fully responsive design using Tailwind CSS, ensuring a smooth user experience on all devices.
### Admin Features:
- **Content Management System (CMS)**: Admins have access to a CMS for managing blog posts, users, and comments.
- **User Management**: Admins can view, block, or remove users.
- **Post Moderation**: Admins can approve, edit, or delete posts.
- **Comment Moderation**: Control over comment visibility and moderation tools for community management.
## Installation
### Step 1: Clone the repository
```bash
git clone https://github.com/Bamof25th/BlogApp.git
```
### Step 2: Install dependencies
Navigate to the `api` and `client` directories and install dependencies:
```bash
cd api && npm install
cd client && npm install
```
### Step 3: Set up environment variables
Add your configuration details to the `env.js` file for Firebase and MongoDB integration:
```bash
FIREBASE_API_KEY=yourFirebaseKey
MONGO_URI=yourMongoDBConnection
```
### Step 4: Start the app
To run the application in development mode:
```bash
npm run dev
```
## Demo
You can try out the live demo using the following credentials:
### Admin Account
- **Email**: `[email protected]`
- **Password**: `admin123`
### User Account
- **Email**: `[email protected]`
- **Password**: `user123`
[Live Demo Link](https://bam-blog-app.onrender.com)
## Technologies Used
- **Frontend**: React, Redux for state management, Tailwind CSS for responsive styling.
- **Backend**: Node.js and Express for the server-side logic and APIs.
- **Database**: MongoDB for storing blog data and user information.
- **Authentication**: Firebase Authentication for secure user login and registration.
- **Deployment**: Render for hosting both the frontend and backend.
## Future Improvements
- **Role-based Access Control**: Implement more granular permissions for different user roles.
- **Rich Text Editor**: Adding a WYSIWYG editor for more flexible content creation.
- **SEO Optimization**: Improve the app's visibility with search engine optimization techniques.
## Lessons Learned
- Strengthened understanding of full-stack development using the MERN stack.
- Enhanced knowledge of implementing CMS for real-world applications.
- Improved state management techniques using Redux.
## Contributing
Contributions, issues, and feature requests are welcome! Feel free to fork the repository and submit a pull request. For major changes, please open an issue first to discuss what you would like to change.
1. Fork the project.
2. Create your feature branch .
3. Commit your changes.
4. Push to the branch.
5. Open a pull request.
---
Let me know if you’d like to include more details or adjustments!
Insert gif or link to demo
https://drive.google.com/file/d/18iP15DXcK1sFibjuUncIuyucK6UMowg0/view?usp=sharing
## Lessons Learned
I have polished my MERN and redux skills while making this project and it was a great learning journy.