feat: create main page

[Matdweb]

About the Pull Request

This pull request represents a pivotal stride towards delivering an exceptional user experience on our Twitter clone project. The focal point is the creation of a functional main page that seamlessly integrates a Side Menu, a Popular Trends Section, and a Posts Section, aligning precisely with the specifications outlined in our Figma Design Solution.

Details

Objective

The primary objective of this pull request is to establish a dynamic and visually appealing main page that not only serves as the central hub for user interactions but also showcases posts extracted from the JSONPlaceholder API. For further context, refer to issue #8 for additional details.

Changes Made

1. /home Route:

   • Created the /home route, setting the stage for the main page's core functionality. It's worth noting that user authentication safeguards for this page will be addressed in subsequent pull requests.

2. Responsive SideMenu Component:

   • Crafted a fully responsive SideMenu component, presenting users with various options and routes for seamless navigation. The actual functionality of these routes will be detailed in upcoming pull requests.

3. Responsive PopularTrendsSection:

   • Implemented a fully responsive PopularTrendsSection component, enriching the main page with static information. Future pull requests will delve into introducing exciting features for this section.

4. Responsive PostsSection:

   • Developed a dynamic PostsSection component that intelligently loads posts—starting with an initial 12 and incrementally fetching more until reaching a total of 100. Additionally, introduced the CreatePost component, with its functionality slated for coverage in subsequent pull requests.

5. Layout Component:

   • Integrated both the PopularTrendsSection and SideMenu seamlessly into the Layout component, ensuring their cohesive display on the /home route.

6. Login and Auth Pages Enhancements:

   • Applied minor enhancements to the login and auth pages, ensuring a consistent and polished user experience.

Redux Configuration

Redux Window Width Slice:

• Introduced a windowWidth slice in Redux to dynamically manage the display of the main page based on the window's width. This is crucial, especially in scenarios where Tailwind breakpoints alone fall short.

ResponsiveMenu Slice:

• Implemented a dedicated responsiveMenu slice in Redux, equipped with a boolean value for tracking the status of the responsive menu across the entire application. The toggleResponsiveMenu function facilitates convenient opening and closing of the menu.

API Endpoint: /api/posts

About this Endpoint

You can learn more about the api/posts endpoint in the #8 pull request.

Response

The api/posts endpoint response has undergone enhancements to include additional data for each post. Now, in addition to the existing content, each post response includes details on likes, comments, and retweets. This data is dynamically generated for realism, with the following structure:

likes: Math.floor(Math.random() * 201),
comments: [],
retweets: Math.floor(Math.random() * 201),

This modification enriches the post data, providing valuable insights into user engagement with each post. The likes and retweets values are randomly generated to simulate user interactions, contributing to a more dynamic and realistic representation of the social media experience.

Configuration Changes

Tailwind Config Changes:

• Updated our Tailwind config document to incorporate the primary dark-gray color (#6E767D) and introduced the animate-bounce Tailwind rule for menu options, adding a touch of interactivity.

Impact

Creating a compelling UI for the main page significantly enhances the user experience in our social media application. Focusing on excellent UX ensures users have a positive and enjoyable interaction within our app.

Screenshots

Demo Layout Structure

Caption: Overview of the main page layout structure.

Live Demo Main Page Responsiveness

Caption: Demonstrating the responsiveness of the main page.

Live Demo Main Page

Caption: Live preview of the main page.

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
twitter-clone	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Nov 28, 2023 4:06am