OLA 4: React Blog Website

Course: CSCI 4410/5410 Web Technologies

Instructor: Dr. Xin Yang

Due date: 11:59 pm Mar 29th, 2026 (Sunday)

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.

Workflow Steps (3 Stages)

You must submit all three stages:
  1. Stage 1: Plan the Outline of Structure
  2. Stage 2: React Blog Website Implementation
  3. Stage 3: Reflection: what changed and why

Stage 1: Plan the Outline of Structure (5 Points)

Before writing code, plan the structure of your React blog website.

What to submit

  1. • Option A: A clear photo of a hand-drawn outline, OR
  2. • Option B: A text file named outline4.txt

Outline requirements

Your outline must show the order/structure of your React application and include:
  1. • A page title area (H1)
  2. • A navigation bar with links
  3. • A Home page layout
  4. • A Blog page layout for displaying posts
  5. • A New Post page layout with form fields
  6. • Buttons/actions area (such as Submit and Delete)
  7. • A display area for blog post details
  8. • A footer or bottom section

Example outline (text)

Top
- H1: React Blog Website

Section 1: Navigation
- Home link
- Blog link
- New Post link

Page 1: Home
- Welcome message
- Short description

Page 2: Blog
- Heading
- List of blog posts
- Each post shows title, author, content, timestamp
- Delete button for each post

Page 3: New Post
- Form with title input
- Form with author input
- Form with content textarea
- Submit button
- Validation/error message area

Bottom
- Footer
- Reflection (Stage 3) in outline4.txt

Stage 2: Implementation (90 Points)

Step 1: Install Dependencies

First, initialize a React app and install react-router-dom: 
npm create vite@latest 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 (16 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. (10 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 (18 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. (4 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. (4 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 (16 Points)

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

(1) Create Blog.js to display full blog post details. (3 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. (3 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.

Stage 3: Reflection (5 Points)

At the bottom of your Stage 1 outline, include a section titled Reflection. Answer each question in 2–3 sentences:
  1. What changed between your Stage 1 outline and your final implementation? Why did you change it?
  2. What was the hardest part to implement correctly, and why?
  3. Describe one mistake you made and how you fixed it.

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.

Please include:
Stage 1: outline4.txt or a clear photo of your hand-drawn outline
Stage 2: your React blog project files
Stage 3: reflection written at the bottom of outline4.txt

Grading:

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

Part Points
Stage 1: Outline of Structure 5 Points
React Component Development 30 Points
Implementing React Router 16 Points
Form Handling & Event Management 18 Points
Post Viewing & Deletion 16 Points
Styling & UI Enhancement 10 Points
Stage 3: Reflection 5 Points
Total 100 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.


⇧