Modern Web Development Lecture Notes – M Blogging Website (Part 3)

Introduction

• Continuation: Part 3 of building an M Blogging website.
• Previous Parts Recap:
  • Part 1: Login flow creation, including Google authentication via Firebase.
  • Part 2: Development of a modern editor using Editor.js, publish form for blog details, tags, and descriptions.
• Objective: Work on the homepage, search page, and profile page functionalities.

Developing the Homepage

Overview

• Sections:
  • Latest blogs from the database.
  • Filters for blog categories.
  • Trending blogs section showcasing most viewed blogs.

Implementation

1. Homepage Setup:
   • Setup Routing in app.jsx for the homepage component.
2. Component Creation:
   • Create home.page.jsx component.
3. UI Setup:
   • Use animation wrapper for fade effects.
   • Divide the page into sections for latest blogs and filters/trending blogs, using Flexbox for layout.
4. In-Page Navigation:
   • Introduce in-page navigation component for smooth navigation between sections.
5. Fetching Blogs:
   • Create a state for blogs and function fetchLatestBlogs to retrieve blogs from the backend.
   • Utilize Axios for HTTP requests.
6. Rendering Blogs:
   • Handle loading state with visual loader.
   • Map through the blog data to render blog cards.
   • Setup pagination with a 'Load More' button for continuous data fetching.

Developing the Search Page

Overview

• Implementing a search functionality to find blogs and users based on query.

Implementation

1. Search Input Handling:
   • Capture query from the search bar and navigate to search results page.
2. Search Results Routing:
   • Setup routing for /search/:query in app.jsx.
   • Create search results component search.page.jsx.
3. Fetching Search Results:
   • Make backend requests to fetch blog and user data based on the search query.
4. User Search Results:
   • Display user accounts matching the search query.
   • Handle cases with no matching search results.

Developing the Profile Page

Overview

• Dynamic routes and components to display user profile details and their blogs.

Implementation

1. Routing Setup:
   • Setup routing for user profiles in app.jsx targeting /user/:id.
   • Create and render profile.page.jsx.
2. Fetching Profile Data:
   • Fetch the user profile data based on the dynamic parameter (user ID).
   • Handle loading and error states appropriately.
3. Profile UI Setup:
   • Display user profile image, name, bio, social links, and other details.
   • Create 'Edit Profile' button, visible only to the profile owner.
4. Fetching User Blogs:
   • Fetch blogs authored by the user and display them with pagination.

404 Page Setup

Overview

• Create a fallback page for non-existent routes.

Implementation

1. Routing Setup:
   • Setup a fallback route in app.jsx to catch all undefined paths.
2. 404 Component:
   • Create page-not-found.jsx to render friendly error messages and navigation options.

Conclusion

• Summarized the development process of major pages: Homepage, Search Page, Profile Page, and 404 Page.
• Addressed dynamic routing, data fetching, state management, and UI rendering effectively.
• Upcoming Parts: Implementing blog interaction features, like mechanisms, comments, dashboards for managing blogs, and setting pages for profile updates.