OLA 4: React Blog Website

Course: CSCI 4410/5410 Web Technologies

Instructor: Dr. Xin Yang

Due date: 11:59 pm Mar 25th, 2025 (Tuesday)

Objective:

In this assignment, you will develop a dynamic personal blog application using React. Your task is to create an interactive interface where users can add, view, and delete blog posts while navigating between different pages using React Router. You will implement state management to handle blog data, use event handling for form submissions, and structure your application using reusable components. By completing this project, you will enhance your ability to build and manage a multi-page React application while applying best practices in component organization, routing, and user input handling.

Step 1: Install Dependencies

First, initialize a React app and install react-router-dom:

		npx create-react-app my-react-blog
		cd my-react-blog
		npm install react-router-dom
	

Project Structure

	/my-react-blog
	│── /src
	│   │── /pages
	│   │   ├── Home.js
	│   │   ├── Blog.js
	│   │   ├── NewPost.js
	│   │── App.js
	│   │── Navbar.js
	│   │── Navbar.css
	

Step 2: React Component Development (30 Points)

In this step, you will build and structure key React components that form the foundation of your blog application.

(1) ♣ Create React components for different pages (Home.js, Blog.js, NewPost.js). (15 points)
Implement four main page components:

		a. Home.js --> Displays a welcome message.
		b. Blog.js --> Shows a list of blog posts.
		c. NewPost.js --> Contains a form for creating new posts.
	

(2) ♣ Implement state management (useState) for handling blog posts dynamically. (10 points)

		a. Use useState to store and manage blog posts.
		b. Ensure state updates when new posts are added or deleted.
	

(3) ♣ Ensure each component is well-structured and functional. (5 points)

		a. Components should be modular and reusable where applicable.
		b. Follow React best practices (clean syntax, meaningful function/component names).
		c. Ensure smooth communication between components through props.
	

Step 3: Implementing React Router (18 Points)

This step involves setting up React Router to enable navigation between different pages without reloading the application.

(1) ♣ Set up routes in App.js for different pages (4 points)

		/ --> Home
		/blog --> Blog page
		/new-post --> New post form
	

(2) ♣ Use the <Link> component for navigation in Navbar.js. (12 points)

		a. Use <Link to="/"> instead of <a href="/"> for navigation.
		b. Ensure the Navbar.js contains links to all pages.
	

(3) ♣ Handle 404 (Not Found) pages correctly. (2 points)
Implement a wildcard route (*) in App.js that displays a "404 - Page Not Found" message for unknown URLs.

Step 4: Form Handling & Event Management (20 Points)

This step focuses on implementing the New Post form, handling user input, and updating the blog dynamically.

(1) Implement a form in NewPost.js to allow users to add blog posts. (5 Points)

		a. Title (text input)
		b. Author (text input)
		c. Content (textarea)
	

(2) Use controlled components (useState) for form input management. (5 Points)

		a. Manage form input values using useState.
		b. Update state when the user types in the form fields.
	

(3) Ensure form validation (e.g., title, author, and content fields cannot be empty). (5 Points)

		a. Prevent submission if title, author, or content fields are empty.
		b. Display an error message if validation fails.
	

(4) After submission, update the blog post list dynamically. (5 Points)

		a. When a post is added, it should appear in Blog page.
		b. Use state (manage blog posts in App.js and pass as props).
	

Step 5: Post Viewing & Deletion (18 Points)

This step involves displaying full post details and allowing users to delete posts.

(1) Create Blog.js to display full blog post details. (4 Points)

		a. When clicking Blog, users should be navigated to the Blog page.
		b. The blog page will display all post details: Title, Author, Content, and timestamp.
	    

(2) Implement Delete functionality to remove posts from the list. (10 Points)

		a. Add a "Delete" button for each post in Blog.js.
		b. Clicking it should remove the post from the blog list.
		c. Use state updates (setPosts()) to ensure the post is deleted.
	

(3) Use React state updates to dynamically reflect deletions.(4 Points)

		a. Ensure the UI updates immediately after a post is deleted.
	    

Step 6: Styling & UI Enhancement (10 Points)

Please create your own unique layout and styling instead of replicating the example we covered in class.

(1) Apply CSS to enhance the appearance of the blog. (4 Points)

	        a. Create a consistent layout for all pages.
	        b. Use CSS classes for styling form elements, buttons, and text.
	    

(2) Style navigation links, form inputs, buttons, and blog post lists. (3 Points)

		a. Ensure the Navbar is visually distinct.
		b. Buttons should have hover effects and smooth styling.
		c. Blog posts should be clearly structured and readable.
	    

(3) Ensure a responsive layout for better user experience. (3 Points)

		a. The app should work well on both desktop and mobile.
		

Step 7: Submission Instructions

Please compress your my-react-blog folder into a single ZIP archive and submit it through D2L. Since the entire folder is quite large, you may delete the node_modules folder before creating the ZIP archive.

Grading:

The assignment is worth a total of 100 points, distributed as follows:

Part	Points
React Component Development	30 Points
Implementing React Router	18 Points
Form Handling & Event Management	20 Points
Post Viewing & Deletion	18 points
Styling & UI Enhancement	10 points
AI Disclaimer	4 Points

If you have any questions, please feel free to reach out to me at Xin.Yang@mtsu.edu or stop by my office in ROTC annex 113E.


⇧