https://github.com/studytrigger/react_header_with_node
This project is a simple React-based web application with a dynamic navbar menu, where the menu items are fetched from a Node.js backend that retrieves them from a MongoDB database. Axios is used for API calls between the frontend and backend.
https://github.com/studytrigger/react_header_with_node
api axios dynaminc-header mongodb moongoose node react
Last synced: about 1 month ago
JSON representation
This project is a simple React-based web application with a dynamic navbar menu, where the menu items are fetched from a Node.js backend that retrieves them from a MongoDB database. Axios is used for API calls between the frontend and backend.
- Host: GitHub
- URL: https://github.com/studytrigger/react_header_with_node
- Owner: StudyTrigger
- Created: 2025-02-28T03:59:22.000Z (3 months ago)
- Default Branch: main
- Last Pushed: 2025-04-23T10:56:02.000Z (about 2 months ago)
- Last Synced: 2025-05-07T20:17:36.231Z (about 1 month ago)
- Topics: api, axios, dynaminc-header, mongodb, moongoose, node, react
- Language: JavaScript
- Homepage:
- Size: 58.6 KB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# React Navbar with Dynamic Menu (MongoDB, Node.js, Express, Axios)
This project is a simple React-based web application with a **dynamic navbar menu**, where the menu items are fetched from a **Node.js backend** that retrieves them from a **MongoDB database**. Axios is used for API calls between the frontend and backend.
## Features
- **React Frontend**: Displays a responsive navbar.
- **Node.js & Express Backend**: Handles API requests.
- **MongoDB Database**: Stores menu items dynamically.
- **Axios for API Calls**: Fetches menu data from the backend.
## Installation
### **1. Clone the Repository**
### There are 2 folders in project :
### 1. Node Project named menu_node : install dependencies with "npm install".
### 2. React Project name menu_react : install dependencies with "npm install".
**To run this project :**
1. Create a database "MenuDB", and inside it, create a collection called "Menu", then Add data using "Import JSON and CSV file.
2. Then select "mock_data.json" file from menu_node project.
3. Now for running node project, run "node index" and for running react project, run "npm run dev".
Some Screenshot for your referneces :
1. Mongo DB Screenshot
2. React Project
