https://github.com/ibrsec/capsblog-fullstack
Fullstack CapsBlog App
https://github.com/ibrsec/capsblog-fullstack
express jwt mongodb react redux tailwind
Last synced: 2 months ago
JSON representation
Fullstack CapsBlog App
- Host: GitHub
- URL: https://github.com/ibrsec/capsblog-fullstack
- Owner: ibrsec
- Created: 2024-08-29T06:04:57.000Z (almost 2 years ago)
- Default Branch: master
- Last Pushed: 2024-10-13T06:55:59.000Z (over 1 year ago)
- Last Synced: 2025-01-08T21:36:28.567Z (over 1 year ago)
- Topics: express, jwt, mongodb, react, redux, tailwind
- Language: JavaScript
- Homepage: https://capsblog-fs-express-react.onrender.com/
- Size: 21 MB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
Full stack Caps Blog App
An awesome Full stack Caps Blog App
View Demo
·
Frontend Repo
·
Backend Swagger
·
Backend Redoc
·
Report Bug
·
Request Feature
📎 Table of Contents 📎
---
## ℹ️ About The Project
[](https://capsblog-fs-express-react.onrender.com/)
---
ERD:
[](https://capsblog-fs-express-react.onrender.com/)
---
📦 A Fullstack CapsBlog App Project
🏀 [Frontend Live](https://capsblog-fs-express-react.onrender.com/) || [Backend Swagger](https://capsblog-fs-express-react.onrender.com/api/documents/swagger) || [Backend Redoc](https://capsblog-fs-express-react.onrender.com/api/documents/redoc)
FRONTEND:
🎯 React Development: Built a responsive and interactive blog interface using React.js to deliver a seamless user experience.
🛠 State Management: Utilized Redux Toolkit and Persist for managing state and maintaining user sessions efficiently.
🚀 React Router: Integrated React Router for smooth navigation between blog posts, categories, and user profiles.
🔔 User Notifications: Implemented real-time notifications using React Toastify to inform users of actions like post creation or comments.
🔍 Search Functionality: Enabled efficient search functionality for finding posts and filtering by category.
📷 Image Upload: Supported profile picture and blog post image uploads for enhanced user profiles and content creation.
🎨 UI Design: Designed a clean and modern UI using Tailwind CSS for responsive and consistent styling.
BACKEND:
🎯 Express.js API: Developed a robust RESTful API with Express.js to handle blog content management, user authentication, and comments.
🔒 Authentication: Implemented JWT and simple token for secure user authentication and authorization throughout the application.
📄 API Documentation: Used Swagger and Redoc for comprehensive API documentation to facilitate testing and development.
📊 Database Management: Utilized MongoDB and Mongoose for data modeling, storing user data, blog posts, comments, categories and emails.
🛠 Middleware & Error Handling: Added custom middleware for validation, error handling, and file upload management using Multer.
🖼️ File Uploads: Integrated Multer for secure handling of image uploads related to blog posts and user profiles.
----------------------------------------------------------------
```sh
# clone the project
git clone https://github.com/ibrsec/Capsblog-fullstack.git
# enter the project directory
cd Capsblog-fullstack
# install dependency
# linux
npm run setup-production
# windows
npm run setup-production-windows
# run
node index.js
```
```diff
+ Capsblog-fullstack (folder)
|---client (folder)
| |
| |---public (folder)
| |
+ | |---src (folder)
| | |---pages (folder)
| | |
| | |---components (folder)
| | |
| | |---app (folder) ---store.jsx
| | └---features (folder)(slices)
| | |
| | |---router (folder)
| | |
| | |---services (folder)
| | |
| | |---helper (folder)
| | |
| | |---App.js
| | |---Index.js
| | └---Index.css
| |
| |----package.json
| |----tailwind.config.js
| └----readme.md
|
+ |---src (folder)
| |---configs (folder)
| |
| |---controllers (folder)
| |
| |---errors (folder)
| |
| |---helpers (folder)
| |
| |---middlewares (folder)
| |
| |---models (folder)
| |
| └---routes (folder)
|
|----uploads (folder)
|----.env
|----.gitignore
|----index.js
|----package.json
|----swaggerAutogen.js
└----readme.md
```
---
---
Backend
