React Image Uploader

Project Overview

React_Image_Uploader is a full-stack application that allows users to add student details along with an image to MongoDB and display a list of students with their images. The project consists of two sub-projects:

1. Image_Uploader_Node (Backend) – A Node.js and Express server that handles API requests, stores student details and images in MongoDB.
2. Image_Uploader_React (Frontend) – A React-based UI that provides a form to add students and displays the uploaded student list.

🛠️ Tech Stack

• Frontend: React.js
• Backend: Node.js, Express.js
• Database: MongoDB
• Image Storage: Stored in MongoDB as base64 or using a file storage system
• API Requests: Axios

🎯 Features

✅ Upload student details with an image
✅ Store data in MongoDB
✅ Fetch and display student list with images
✅ Responsive and user-friendly interface

🚀 How to Run

Backend (Image_Uploader_Node)

1. Navigate to the backend folder : cd Image_Uploader_Node
2. Install dependencies: npm install
3. Start the server: npm start

Frontend (Image_Uploader_React)

1. Navigate to the frontend folder: cd Image_Uploader_React
2. Install dependencies: npm install
3. Start the React app: npm start

📷 Screenshots

Display List

Edit Student