Steps to Create the Frontend React App
Step 1: Create a new React App
npx create-react-app <name of project>
Step 2: Navigate to the Project folder using:
cd <name of project>
The updated dependencies in package.json file of frontend will look like:
"dependencies": {
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-scripts": "5.0.1",
"web-vitals": "^2.1.4"
},
Example: Below is the code for the frontend client in reactjs
Javascript
// src/App.js import React, {useState,useEffect} from 'react' ; import './App.css' ; function App() { const [donations, setDonations] = useState([]); const [amount, setAmount] = useState( '' ); const [description, setDescription] = useState( '' ); useEffect(() => { // Fetch donations when the component mounts fetchDonations(); }, []); const fetchDonations = async () => { try { // Make a GET request to your server's API endpoint const response = await fetch('http: //localhost:5000/api/donations'); const data = await response.json(); setDonations(data); } catch (error) { console.error('Error fetching donations: ', error); } }; const handleDonate = async () => { try { // Make a POST request to your server' s API endpoint const response = await fetch( 'http://localhost:5000/api/donations' , { method: 'POST' , headers: { 'Content-Type' : 'application/json' , }, body: JSON.stringify( { amount: parseFloat(amount), description }), }); if (response.ok) { // Update the local state with the new donation setDonations( [...donations, await response.json()]); setAmount( '' ); setDescription( '' ); } else { console.error( 'Error donating:' , response.statusText); } } catch (error) { console.error( 'Error donating:' , error); } }; return ( <div className= "App" > <h1>MERN Fundraising App</h1> <div> <label> Amount: <input type= "number" value={amount} onChange={ (e) => setAmount(e.target.value) } /> </label> <br /> <label> Description: <input type= "text" value={description} onChange={ (e) => setDescription(e.target.value) } /> </label> <br /> <button onClick={handleDonate}>Donate</button> </div> <div> <h2>Donations:</h2> <ul> {donations.map((donation) => ( <li key={donation._id}> Amount: {donation.amount}, Description: {donation.description} </li> ))} </ul> </div> </div> ); } export default App; |
CSS
body { font-family : Arial , sans-serif ; margin : 0 ; padding : 0 ; background-color : #f4f4f4 ; } header { background-color : #333 ; color : #fff ; text-align : center ; padding : 1em 0 ; } section { max-width : 600px ; margin : 2em auto ; background-color : #fff ; padding : 20px ; border-radius: 8px ; box-shadow: 0 0 10px rgba( 0 , 0 , 0 , 0.1 ); } #totalAmount { font-size : 24px ; margin-bottom : 20px ; } form { display : flex; flex- direction : column; } label { margin-bottom : 8px ; } input { padding : 10px ; margin-bottom : 16px ; border : 1px solid #ccc ; border-radius: 4px ; } button { background-color : #4caf50 ; color : #fff ; padding : 10px ; border : none ; border-radius: 4px ; cursor : pointer ; } |
Starting the React App.
npm start
Output of data saved in the Database:
Output: Visit http://localhost:3000 in your browser to see the MERN fundraising app in action.
Fundraiser Platform using MERN
A fundraising application, often referred to as a “fundraiser application” or “crowdfunding platform,” is a software or web-based platform designed to facilitate the collection of funds for a specific cause, project, or campaign. These applications provide a digital space where individuals, organizations, or businesses can create fundraising campaigns and seek financial support from a wider audience, typically through online donations.
Preview of final output: Let us have a look at how the final application will look like.