abshir112/skyconnect

Developing a comprehensive web application showcasing posts, user profiles, comments, and a navigation system. The application dynamically fetch data, incorporate a responsive flexbox design, and provide an engaging user experience.

Web Application for Posts Display

Overview

This project involves developing a comprehensive web application that showcases posts, user profiles, comments, and includes a navigation system. The application will dynamically fetch data and use a responsive flexbox design to provide an engaging user experience.

Features and Requirements

Posts Display

• Dynamically load and display posts with details such as ID, title, body, userId, tags, and reaction count.
• Implement either pagination or infinite scrolling to manage the loading of posts.

Navigation Bar

• Develop a responsive navigation bar with links to various sections like Home, Posts, etc., which will be visible at the top of all pages.

Home Page

• The Home page should succinctly describe the application's purpose and offer user instructions.

Posts Page

• Display a list of posts, with each post featuring:
  • A title
  • Body text
  • Username (hint: consider how to derive the username from the userId)
• Attach associated comments to their respective posts.

Error Handling and Feedback

• Implement error handling for network request failures.
• Provide feedback for empty states or errors to improve user experience.

Technical Requirements

1. HTML

• Use structured markup for creating posts, user profiles, comments, navigation elements, and a contact form.
  • The contact form must include fields for "Name," "Email," a "Send" button, and a checkmark for "confirm to send."
• Employ semantic HTML tags throughout the application.

2. CSS

• Utilize flexbox or grid layouts for responsive design.
• Apply styling to enhance the visual appeal and usability across different devices.

3. JavaScript

• Fetch Post Data: Use fetch to retrieve posts from https://dummyjson.com/posts.
• Fetching Comments: Use fetch to obtain comments from https://dummyjson.com/comments.
• Displaying Comments: Develop functionality to append comments to the respective post.
• Fetching User Data: Use fetch to get user profiles from https://dummyjson.com/users.
• Linking Posts to User Profiles: Integrate functionality where clicking a username in a post displays a modal with the user's profile information from the "users" endpoint.
• User Objects: Post-fetching, re-organize users into either an object or a class for better management.
• Validate the Contact Form: Ensure the contact form is validated upon submission:
  • The name field must not contain numbers.
  • The email must include "@" and ".".
  • The checkmark must be checked for the form submission button to be clickable.

Conclusion

This project aims to build a dynamic and responsive web application that enhances user engagement through effective display and management of posts, user profiles, and comments. By adhering to the specified technical requirements, I created a user-friendly and aesthetically pleasing application.

skyconnect's Issues

Fetching data from Api (Post, User, Comment)

Posts page

More elegant styling

Error handling and FeedBack

Configure the links to all pages

Post display