Food Blogging Site

This blog is built for local blogging purposes, focused on sharing content related to food. Users can log in, write, and publish posts about food, creating a community-driven platform for food enthusiasts.

Team Members

1. Shadil Am: GitHub Profile
2. Adhitya Km: GitHub Profile

Team ID

Team ID: cs-108

How It Works

Overview:

The Food Blogging Site allows users to log in, create, and publish their own posts. When a user logs into the platform, no posts will be shown until they write and publish their own posts. Here’s an overview of how the system is built and how it works.

Backend (Node.js with Express):

• Server Setup:
  The backend is powered by Node.js and Express, which handle the server-side operations such as routing, middleware, and API requests.

• Middleware:
  The server is set up with middleware to parse incoming JSON data and handle cookies, making communication smooth between the client and server.

• File Uploads:
  The /api/upload API endpoint is used for handling file uploads. When a file is uploaded, it responds with the filename in JSON format.

Frontend (React.js):

• Components:
  The frontend is built using React.js, with components like Menu, Single, and Write, ensuring a modular and maintainable codebase.

• Routing:
  React Router is used for client-side navigation between pages. Features like useNavigate and Link from "react-router-dom" are employed for seamless transitions.

• State Management:
  React’s useState and useEffect hooks are used to manage component state and handle side effects, such as fetching data from the server.

• Axios:
  Axios is integrated for making HTTP requests from the frontend to the backend API, allowing smooth communication between the two.

Database (MongoDB and MySQL):

• The application uses MySQL to store user and post data. The backend interacts with the database to perform CRUD operations (Create, Read, Update, Delete) on posts and user information.

Styling (CSS):

• CSS is used to style the frontend, creating a visually appealing, responsive, and user-friendly design. It ensures that the blog looks good on different devices and screen sizes.

Authentication (Auth Routes):

• The application has authentication routes (authRoutes) that handle user registration, login, and potentially logout functionalities. This ensures secure access to the blogging platform.

Client-Server Communication:

• The app communicates with the backend through various API endpoints (/api/auth, /api/users, /api/posts). These handle user and post-related operations.

---

Libraries Used

Client-Side Libraries:

• React: A JavaScript library for building user interfaces.
• Axios: A promise-based HTTP client for making requests to the backend.
• React Router: Used for managing routes and navigating between pages on the frontend.
• React Hooks (useState, useEffect): To manage state and handle lifecycle methods in function components.
• @testing-library/jest-dom: For testing DOM elements.
• @testing-library/react: A testing framework for React components.

Backend Libraries:

• Node.js: A JavaScript runtime for the backend.
• Express: A minimal and flexible Node.js web application framework.
• MongoDB: A NoSQL database used for storage and querying of blog posts.
• MySQL: A relational database used to manage user and post data.

---

Known Issues

• The code database is currently not working due to an error. This may impact certain features related to post management and user authentication.

---

How to Run the Project Locally

Prerequisites:

• Node.js and npm installed on your local machine.
• MySQL database setup (or MongoDB if you're using it).

Steps:

1. Clone the repository:
   git clone https://github.com/<your-username>/food-blogging-site.git

2. Navigate to the project folder:
   cd food-blogging-site

3. Install dependencies for the backend:
   npm install

4. Install dependencies for the frontend:
   Navigate to the client directory and run:
   npm install

5. Set up your MySQL or MongoDB database and configure it in the backend.

6. Run the backend server:
   npm start (from the root directory)

7. Run the frontend:
   npm start (from the client directory)

8. Open the application in your browser at http://localhost:3000.

---

License

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

---

This updated README file organizes the content better, adds clear instructions, and improves SEO for better discoverability.