https://github.com/halas77/gucha_blog_posts
Blog post website to showcase full stack web development.
https://github.com/halas77/gucha_blog_posts
mern-stack web zod-validation
Last synced: 3 months ago
JSON representation
Blog post website to showcase full stack web development.
- Host: GitHub
- URL: https://github.com/halas77/gucha_blog_posts
- Owner: halas77
- Created: 2024-03-26T05:43:50.000Z (about 1 year ago)
- Default Branch: master
- Last Pushed: 2024-03-26T18:32:52.000Z (about 1 year ago)
- Last Synced: 2025-01-14T07:49:56.520Z (4 months ago)
- Topics: mern-stack, web, zod-validation
- Language: JavaScript
- Homepage:
- Size: 3.09 MB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Blog Post Project
## Overview
This is a full-stack blog post project built using MongoDB, Express.js, React with Vite, and Tailwind CSS. The project allows users to write, edit, read, and delete their own blogs. Users can also search for blogs by keywords in titles and they can also filter their own blogs. The application features an awesome design crafted using Tailwind CSS. Additionally, the project utilizes various libraries and tools such as Multer for image upload, JSON Web Token (JWT) for authentication, Bcrypt for message encryption and decryption, Input validation with Zod and Dotenv for managing environment variables.
## Features
- **User Authentication:** Utilizes JSON Web Tokens for user authentication and authorization.
- **Blog Management:** Users can write, edit, read, and delete their own blogs.
- **Search and Filter:** Users can search for blogs by keywords in their titles and filter for their own blogs only.
- **Image Upload:** Integrated Multer for uploading images to the server.
- **Input Validation:** Integrated input validation with zod.
- **Secure Data Storage:** Employs Bcrypt for secure message encryption and decryption.
- **Responsive Design:** Utilizes Tailwind CSS for creating responsive and visually appealing user interfaces.
- **Environment Variables:** Dotenv is used for managing environment variables, ensuring secure configuration management.
## Tech Stack
- **Frontend:** React (with Vite)
- **Backend:** Express.js
- **Database:** MongoDB
- **CSS Framework:** Tailwind CSS
## Installation
1. Clone the repository: https://github.com/halas77/gucha_blog_posts.git
2. Install dependencies for both frontend and backend:
```bash
cd gucha-blog-posts
cd frontend
npm install
cd ../backend
npm install
```
## Set up environment variables
1. Create a `.env` file in the backend directory.
2. Define your environment variables in the `.env` file. Example:
```bash
PORT=5000
MONGODB_URL=YOUR_MONGODB_URI
SECRET=your_secret_key
```
## Usage
1. Start the backend server:
```bash
cd backend
nodemon app.js
```
2. Start the frontend development server:
```bash
cd frontend
npm run dev
```