Team White : Blogging steps

[yogeshtakeo]

Implementing Blog Page with Filtering, Searching, and Temporary Posting in React Application

Team Leader : Namkhang Tsamchoe

Objective

The objective of this task is to extend the existing React application with a blog page that includes filtering, searching, and temporary posting features. The students will integrate this page into the application's routing system and ensure seamless navigation from the login page.

Task Description

Use your own data to display the posts in the application. Later on you can use any third party app to integrate the data into your blog.

Note : Use of Context API could be implemented over on adding , updating and deleting the data. Following the actions over the

1. Create Blog Components:

   • Design and implement React components for displaying blog posts.
   • Include relevant information such as title, author, date, and content.
   • Structure the components to allow for easy styling and reusability.

2. Implement Filtering Functionality:

   • Create filtering options for the blog posts (e.g., by category, date, author).
   • Allow users to select filters and update the displayed blog posts accordingly.
   • Ensure the filtering is performed efficiently and updates the UI in real-time.

3. Implement Search Functionality:

   • Add a search bar where users can enter keywords to search for specific blog posts.
   • Implement search logic to filter blog posts based on the entered keywords.
   • Update the UI to display search results dynamically.

4. Temporary Blog Posting:

   • Implement a temporary posting feature that allows users to compose and preview blog posts without submitting them permanently.
   • Create a form for users to enter the blog post title, content, and other necessary details.
   • Store the temporary blog post data in the application's state or context for previewing.

5. Integration with Login and Routing:

   • Modify the routing system in App.tsx to include the blog page as a protected route accessible only after successful login.
   • Ensure that the login state is properly managed and propagated to allow access to the blog page.
   • Update the navigation components to reflect the availability of the blog page.

6. Testing and Debugging:

   • Perform comprehensive testing of the blog page and its features.
   • Test the filtering, searching, and temporary posting functionalities under various scenarios.
   • Use debugging tools and error handling techniques to identify and fix any issues or bugs encountered.

7. Documentation and Presentation:

   • Document the implementation process, including the integration with the login and routing system.
   • Prepare a presentation to showcase the completed blog page and its features.
   • Discuss the technologies used, code structure, and any challenges faced during the implementation.

Collaboration from the team.

Team leader should encourage collaboration and regular communication between team members. Use version control (e.g., Git) to manage codebase changes. Divide the implementation tasks among team members based on their expertise and provide opportunities for code reviews and feedback.

[KabinaThapa]

Team-White https://github.com/yogeshtakeo/team-white

[Namsla]

Team-White: Namkhang. Kabhina, Deena, Junu git URL: https://github.com/yogeshtakeo/team-white.git

[junuthapa011]

Name: Junu Thapa Team White Github Url: https://github.com/yogeshtakeo/team-white