ReactDonation - Building a Donation Website with React

AI Project Engine
, , ,
1

Objective: The objective of this project is to create a fully functional and visually appealing donation website using React. By working on this project, you will gain a strong understanding of React fundamentals, including component-based architecture, state management, and event handling. Additionally, you will learn how to integrate third-party libraries, such as React Router, for navigation and create a responsive user interface using CSS.

Learning Outcomes: By completing this project, you will:

  • Develop a solid understanding of React and its core concepts.
  • Learn how to create and manage components in React.
  • Gain experience in handling user interactions and managing state in a React application.
  • Acquire skills in integrating third-party libraries, such as React Router, into a React project.
  • Enhance your CSS skills for building responsive and visually appealing user interfaces.
  • Learn how to deploy a React application to a hosting platform.

Steps and Tasks:

1. Set Up the React Project:

  • Install create-react-app globally by running the command npm install -g create-react-app.
  • Create a new React project using create-react-app by running npx create-react-app react-donation.
  • Navigate to the project directory using cd react-donation.
  • Start the development server with npm start and open http://localhost:3000 in your browser to verify that the project is set up correctly.

2. Plan the Website Structure:

  • Define the structure of your donation website. It should include multiple pages, such as a home page, donation form page, and a thank you page.
  • Sketch out a rough layout for each page, considering the components and user interactions required.

3. Create the Navigation:

  • Install React Router by running npm install react-router-dom.
  • Open the src folder and create a new folder called components.
  • Inside the components folder, create a new file called Navbar.js.
  • In Navbar.js, import React and the necessary components from React Router.
  • Define a functional component called Navbar that renders a navigation bar with links to different pages.
  • Export the Navbar component as the default export.
  • In App.js, import the Navbar component and wrap the routes with a BrowserRouter.
  • Define routes for the home page, donation form page, and thank you page using the Route component.
  • Test the navigation by clicking on the links in the Navbar component.

4. Build the Home Page:

  • Inside the components folder, create a new file called Home.js.
  • In Home.js, import React and define a functional component called Home that renders the content for the home page.
  • Export the Home component as the default export.
  • In App.js, import the Home component and add a route for the home page.
  • Customize the content in the Home component to display a welcome message and a call-to-action button for the donation form.
  • Style the home page using CSS in a separate file called Home.css.

5. Design the Donation Form Page:

  • Inside the components folder, create a new file called DonationForm.js.
  • In DonationForm.js, import React and define a class component called DonationForm that will manage the form state and handle form submissions.
  • The form should include fields for the user to enter their name, email, donation amount, and payment information.
  • Implement the necessary methods in the DonationForm component, such as handleChange to update the form state and handleSubmit to handle form submissions.
  • Export the DonationForm component as the default export.
  • In App.js, import the DonationForm component and add a route for the donation form page.
  • Style the donation form page using CSS in a separate file called DonationForm.css.

6. Create the Thank You Page:

  • Inside the components folder, create a new file called ThankYou.js.
  • In ThankYou.js, import React and define a functional component called ThankYou that renders a thank you message for the user.
  • Export the ThankYou component as the default export.
  • In App.js, import the ThankYou component and add a route for the thank you page.
  • Style the thank you page using CSS in a separate file called ThankYou.css.

7. Style the Website:

  • Create a new folder called styles inside the src folder.
  • Inside the styles folder, create a new file called global.css to define global styles for the entire website.
  • Customize the styles for the navigation bar, page content, form fields, buttons, etc., using CSS.
  • Import the global.css file in the respective components to apply the styles.

8. Deploy the ReactDonation Website:

  • Create a free account on a hosting platform like Netlify or Vercel.
  • Follow the platform’s instructions to connect your project repository and deploy the website.
  • Once deployed, share the live URL of your ReactDonation website.

Evaluation: You can evaluate your progress based on the following criteria:

  • The React project is set up correctly using create-react-app.
  • The website includes multiple pages and a navigation bar using React Router.
  • Each page is implemented as a functional or class component.
  • The donation form collects the necessary information and handles form submissions.
  • CSS is used to style the components and create a visually appealing interface.
  • The final website is responsive and works well on different screen sizes.
  • The ReactDonation website is successfully deployed to a hosting platform.

Resources and Learning Materials:

Need a little extra help?

1. Set Up the React Project: To set up the React project, you need to install create-react-app globally and then use it to create a new project. Follow the steps below to get started:

  • Install create-react-app globally by running the command npm install -g create-react-app.
  • Create a new React project using create-react-app by running npx create-react-app react-donation.
  • Navigate to the project directory using cd react-donation.
  • Start the development server with npm start and open http://localhost:3000 in your browser to verify that the project is set up correctly.

2. Plan the Website Structure: Before diving into the code, it’s important to plan out the structure of your donation website. Consider the different pages you want to include, such as a home page, donation form page, and a thank you page. Sketch out a rough layout for each page, noting the components and interactions required.

3. Create the Navigation: For the navigation, you’ll need to install React Router and set up routes for the different pages of your website. Follow the steps below to create a navigation bar and set up the routes:

  • Install React Router by running npm install react-router-dom.
  • In your project directory, navigate to the src folder and create a new folder called components.
  • Inside the components folder, create a new file called Navbar.js.
  • In Navbar.js, you’ll need to import React and the necessary components from React Router. You can do this using the following code:
import React from 'react';
import { Link } from 'react-router-dom';
  • Next, define a functional component called Navbar that renders a navigation bar with links to different pages. You can use the Link component from React Router to create the links. Here’s an example of how the Navbar component could be structured:
const Navbar = () => {
  return (
    <nav>
      <ul>
        <li>
          <Link to="/">Home</Link>
        </li>
        <li>
          <Link to="/donate">Donate</Link>
        </li>
      </ul>
    </nav>
  );
};
  • Export the Navbar component as the default export at the end of the file:
export default Navbar;
  • In your App.js file, you’ll need to import the Navbar component and wrap your routes with a BrowserRouter component. You can do this using the following code:
import { BrowserRouter as Router, Route } from 'react-router-dom';
import Navbar from './components/Navbar';

// Wrap your routes with the Router component
<Router>
  <div>
    <Navbar />
    <Route exact path="/" component={Home} />
    <Route path="/donate" component={DonationForm} />
  </div>
</Router>
  • This sets up a basic navigation bar with two links: “Home” and “Donate”. The “Home” link points to the root URL (“/”) and the “Donate” link points to a URL path called “/donate”. You’ll need to create the Home and DonationForm components (we’ll do this in the next steps) and import them into your App.js file.

4. Build the Home Page: The home page is the first page that users will see when they visit your website. It should provide some information about your cause and include a call-to-action button that links to the donation form. Follow the steps below to create the home page:

  • Inside the components folder, create a new file called Home.js.
  • In Home.js, you’ll need to import React and define a functional component called Home that will render the content for the home page. You can do this using the following code:
import React from 'react';

const Home = () => {
  return (
    <div>
      <h2>Welcome to ReactDonation!</h2>
      <p>Help us make a difference by donating today.</p>
      <button>Donate Now</button>
    </div>
  );
};

export default Home;
  • In your App.js file, you’ll need to import the Home component and add a route for the home page. You can do this using the following code:
import Home from './components/Home';

// Add a route for the home page
<Route exact path="/" component={Home} />
  • Style the home page by creating a new CSS file called Home.css in the same folder and adding custom styles.

5. Design the Donation Form Page: The donation form page is where users will fill out a form to make a donation. It should include fields for the user’s name, email, donation amount, and payment information. Follow the steps below to create the donation form page:

  • Inside the components folder, create a new file called DonationForm.js.
  • In DonationForm.js, you’ll need to import React and set up a class component called DonationForm that will manage the form state and handle form submissions. You can do this using the following code:
import React, { Component } from 'react';

class DonationForm extends Component {
  constructor(props) {
    super(props);
    this.state = {
      name: '',
      email: '',
      amount: '',
      payment: ''
    };
  }

  handleChange = (e) => {
    this.setState({ [e.target.name]: e.target.value });
  }

  handleSubmit = (e) => {
    e.preventDefault();
    // Add form submission logic here
  }

  render() {
    const { name, email, amount, payment } = this.state;

    return (
      <form onSubmit={this.handleSubmit}>
        <label>
          Name:
          <input type="text" name="name" value={name} onChange={this.handleChange} />
        </label>
        <label>
          Email:
          <input type="email" name="email" value={email} onChange={this.handleChange} />
        </label>
        <label>
          Amount:
          <input type="number" name="amount" value={amount} onChange={this.handleChange} />
        </label>
        <label>
          Payment:
          <input type="text" name="payment" value={payment} onChange={this.handleChange} />
        </label>
        <button type="submit">Submit</button>
      </form>
    );
  }
}

export default DonationForm;
  • In your App.js file, you’ll need to import the DonationForm component and add a route for the donation form page. You can do this using the following code:
import DonationForm from './components/DonationForm';

// Add a route for the donation form page
<Route path="/donate" component={DonationForm} />
  • Style the donation form page by creating a new CSS file called DonationForm.css in the same folder and adding custom styles.

6. Create the Thank You Page: After submitting the donation form, users should be redirected to a thank you page. This page should display a message thanking the user for their donation. Follow the steps below to create the thank you page:

  • Inside the components folder, create a new file called ThankYou.js.
  • In ThankYou.js, you’ll need to import React and define a functional component called ThankYou that will render a thank you message for the user. You can do this using the following code:
import React from 'react';

const ThankYou = () => {
  return (
    <div>
      <h2>Thank you for your donation!</h2>
      <p>Your support is greatly appreciated.</p>
    </div>
  );
};

export default ThankYou;
  • In your App.js file, you’ll need to import the ThankYou component and add a route for the thank you page. You can do this using the following code:
import ThankYou from './components/ThankYou';

// Add a route for the thank you page
<Route path="/thank-you" component={ThankYou} />
  • Style the thank you page by creating a new CSS file called ThankYou.css in the same folder and adding custom styles.

7. Style the Website: To style your ReactDonation website, you can use CSS. You’ll want to create a separate CSS file for each component and import it into the respective component file. Additionally, you can create a global CSS file to define styles that apply to the entire website. Follow the steps below to style your website:

  • Create a new folder called styles inside the src folder of your project.
  • Inside the styles folder, create a new file called global.css.
  • Customize the styles for the navigation bar, page content, form fields, buttons, etc., using CSS.
  • Import the global.css file in the respective components to apply the styles.

8. Deploy the ReactDonation Website: To deploy your ReactDonation website, you can use a hosting platform like Netlify or Vercel. Follow the steps below to deploy your website:

  • Create a free account on a hosting platform like Netlify (https://www.netlify.com/) or Vercel (https://vercel.com/).
  • Connect your project repository to the hosting platform.
  • Configure the build settings.
  • Deploy the website.
  • Once deployed, share the live URL of your ReactDonation website.
2

@joy.b has been assigned as the mentor. View code along.