📝 Fullstack Blog App

A modern, responsive fullstack blog application where users can browse, create, and manage blog posts. Built with the MERN stack and featuring a clean, intuitive interface.

✨ Features

• 📖 Browse Posts - View all blog posts with pagination
• ✍️ Create & Edit & Delete - Write and edit blog posts with rich text
• 🗂️ Categories - Organize posts by Cinema, Design, Science, Technology
• 🔍 Search & Filter - Find posts by title, category, or content
• 📱 Responsive Design - Works seamlessly on desktop and mobile
• 🔒 Secure Backend - Environment variables for database credentials
• ⚡ Fast Performance - Optimized for speed and user experience

🛠️ Tech Stack

Frontend

• React - Component-based UI library
• Axios - HTTP client for API calls
• SCSS - Modern styling and responsive design
• React Router - Client-side routing

Backend

• Node.js - JavaScript runtime
• Express.js - Web application framework
• MySQL - Relational database
• dotenv - Environment variable management

🚀 Getting Started

Prerequisites

• Node.js (v14 or higher)
• npm or yarn
• MySQL database

Installation

1. Clone the repository

   git clone https://github.com/ChakerChourouk/Fullstack-Blog-App.git
   cd Fullstack-Blog-App

2. Set up the Backend

   cd api
   npm install

3. Configure Environment Variables

   Create a .env file in the /api directory:

   DB_HOST=localhost
   DB_USER=root
   DB_PASSWORD=your_password
   DB_NAME=blog
   PORT=8800

4. Set up the Database

   CREATE DATABASE blog;
   -- Import your SQL schema here

5. Start the Backend Server

   npm start

6. Set up the Frontend

   cd ../client
   npm install
   npm start

🌐 Access the Application

• Frontend: http://localhost:3000
• Backend API: http://localhost:8800

📁 Project Structure

Fullstack-Blog-App/
├── client/                 # React frontend
│   ├── src/
│   │   ├── components/
│   │   ├── pages/
│   │   └── ...
│   └── package.json
├── api/                    # Express backend
│   ├── routes/
│   ├── models/
│   ├── .env.example
│   └── package.json
├── README.md
└── .gitignore

🔧 Available Scripts

Backend (/api)

• npm start - Start the production server
• npm run dev - Start development server with nodemon

Frontend (/client)

• npm start - Start development server
• npm run build - Build for production
• npm test - Run tests

🌟 Key Features Showcase

📝 Post Management

• Create new blog posts with rich text editor
• Edit existing posts seamlessly
• Delete posts

🎨 Categories

• Cinema - Movie reviews and film discussions
• Design - UI/UX insights and design trends
• Science - Latest scientific discoveries
• Technology - Tech tutorials and industry news

🔒 Security Features

• Environment variables for sensitive data
• Input validation and sanitization
• Secure database connections

🤝 Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

1. Fork the project
2. Create your feature branch (git checkout -b feature/AmazingFeature)
3. Commit your changes (git commit -m 'Add some AmazingFeature')
4. Push to the branch (git push origin feature/AmazingFeature)
5. Open a Pull Request

📝 License

This project is licensed under the MIT License - see the LICENSE file for details.

👨‍💻 Author

Chaker Chourouk

• GitHub: @ChakerChourouk
• LinkedIn: Your LinkedIn Profile

📞 Support

If you have any questions or need help with setup, please open an issue or reach out!

---

⭐ If you found this project helpful, please give it a star! ⭐