Skip to content

carlxaeron/MERN-Stack-sample-app

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

11 Commits
 
 
 
 
 
 
 
 

Repository files navigation

mern-app

Setup Instructions

Prerequisites

  • Node.js (v14 or higher)
  • npm (v6 or higher)

Backend Setup

  1. Navigate to the server directory:
    cd server
  2. Install the dependencies:
    npm install
  3. Start the server:
    npm start
    The server will be running on http://localhost:5000.

Frontend Setup

  1. Navigate to the client directory:

    cd client
  2. Install the dependencies:

    npm install
  3. Start the Next.js app:

    npm run dev

    The Next.js app will be running on http://localhost:3000.

  4. Build the Next.js app:

    npm run build
  5. Start the Next.js app in production mode:

    npm start

Admin Setup

  1. Navigate to the admin directory:
    cd admin
  2. Install the dependencies:
    npm install
  3. Start the admin React app:
    npm start
    The admin React app will be running on http://localhost:3001.

Directory Structure

mern-app/
├── admin/
│   ├── public/
│   │   └── index.html
│   ├── src/
│   │   ├── App.js
│   │   └── index.js
│   └── package.json
├── client/
│   ├── pages/
│   │   └── index.js
│   ├── src/
│   │   ├── components/
│   │   │   ├── Header.js
│   │   │   ├── Footer.js
│   │   │   └── PostList.js
│   └── package.json
├── server/
│   ├── routes/
│   │   ├── adminRoutes.js
│   │   ├── homeRoutes.js
│   │   ├── postRoutes.js
│   │   └── sampleRoute.js
│   ├── server.js
│   └── package.json
└── README.md

Sample API Route

  • You can test the sample API route by navigating to http://localhost:5000/api/sample in your browser or using a tool like Postman.

CMS Client Instructions

  • To create a new post, fill out the form and click "Create".
  • To edit a post, click the "Edit" button next to the post, update the form, and click "Update".
  • To delete a post, click the "Delete" button next to the post.

Updated API Routes

  • POST /api/posts: Create a new post.
  • GET /api/posts: Retrieve all posts.
  • PUT /api/posts/:id: Update a post by ID.
  • DELETE /api/posts/:id: Delete a post by ID.

Updating the Home Page

  • The home page can be updated through the server side by modifying the homeRoutes.js file in the server/routes directory.
  • The homeRoutes.js file sends HTML content including the header, footer, and posts from the database.
  • To update the header, footer, or the content of the home page, edit the HTML content in the homeRoutes.js file.

Using Bootstrap in the Client Side

  • Bootstrap is used in the client side for styling.
  • The Bootstrap CSS file is imported in the index.js file in the client/src directory.
  • You can use Bootstrap classes in your React components to style them.

About

No description, website, or topics provided.

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published