Skip to content

Latest commit

 

History

History
62 lines (49 loc) · 2.81 KB

README.md

File metadata and controls

62 lines (49 loc) · 2.81 KB

Project Name: React Blog App

Description

This is a full-featured blog application built using React, Bootstrap, and an Express.js/Node.js backend. It allows users to create, read, update, and delete blog posts (CRUD operations). The Express.js backend, implemented with routers and controllers for improved organization and maintainability, handles data persistence and business logic, while the JSON Server simulates the data model during development.

Features

  • Create, Read, Update, Delete (CRUD) Operations: Manage blog posts efficiently.
  • React: Leverage the power of React for a dynamic and user-friendly experience.
  • Bootstrap: Utilize Bootstrap for responsive and visually appealing design.
  • JSON Server: Simulate a backend API for data persistence.
  • Modern Development Environment: Enjoy a streamlined development experience with npm scripts.
  • Express.js Backend with Routers and Controllers: Well-structured backend for easier maintenance and scalability.

Getting Started

  1. Prerequisites: Ensure you have Node.js (version 14 or later) and npm (or yarn) installed on your system. You can verify this by running node -v and npm -v (or yarn -v) in your terminal.
  2. Clone the Repository: Use Git to clone this repository to your local machine: 
    git clone https://github.com/your-username/react-blog-app.git
    Replace your-username with your actual GitHub username.
  3. Install Dependencies: Install the required dependencies by running: 
    cd react-blog-app
npm install

Running the Application

  1. Start the Backend:

    • Navigate to the backend directory: 
      cd backend
    • Run the backend development server: 
      npm run dev
    • This starts the Express server, typically on port 8000.

  2. Start JSON Server (Optional):

    • If you wish to use JSON Server for local data simulation during development, open a separate terminal window and run: 
      npm json-server --watch data/db.json --port 8000

  3. Run the React Development Server:

    • In the main project directory, start the React development server: 
      npm start
    • This opens your blog app in the browser, typically at http://localhost:3000/.

Architecture:

  • The application is structured with a separate backend (Express.js/Node.js) and frontend (React).
  • The frontend communicates with the backend using API calls to fetch and manage data.
  • During development, JSON Server can be used to mock a backend API, but it's not required for production.
  • The backend leverages Express routers and controllers for better organization. Routers group related API endpoints, while controllers handle the logic associated with each endpoint. This separation promotes maintainability and scalability.