shangguanwang / antd-event-page

a responsive event page built using React, Redux, Ant Design and Ant Design Pro

Hi there 👋

🌱 Weclome to my Github page, I'm Shangguan

👀 I'm a self-taught Frontend Developer with a passion for building meaningful products, proficient in React and JavaScript.

Projects:

• BerryCart Shopping List 🍓
• NFT Marketplace 🖼️
• Little Joy 🌸
• TypeScript todo list 📝

💪 I'm currently working as a frontend engineer at a startup, continuing #100DaysofCode challenges, and contributing to open-source projects.

Tech Stack:

Connect With Me:

📫 Reach me at my [email protected]

📊 GitHub Stats:

antd-event-page's Issues

7. As a user, I want the page to be responsive so I can view it on different screen sizes

Summary

Responsive Design

Acceptance Criteria

• Ensure the page is responsive and looks good on both desktop and mobile devices

Bug: when a user is not on page 1, and she clicks on either of the filter, it will show "No matching record"

Before

Acceptance Criteria

• The filtered data should be displayed correctly even when the user applies the filter while they are not on page 1.

Test Case

Click on page 5, and click on a cause cateogry filter, data should be displayed instead of the "No Matching record" message

5. As a user, I want to be able to filter events by location

Summary

Implement a filtering mechanism to allow users to filter events based on location using Ant Design components(Select)

Acceptance Criteria

• When the page is first loaded, the location filter should be set to "All Locations"
• As the user selects a location from the dropdown, the event list on the right side will be narrowed down to a shorter list
• If a location is selected, the pagination at the bottom should reflect the new filtered data length

6. As a user, I want to be able to filter events by cause categories and reset all filters

Summary

Implement a filtering mechanism to allow users to filter events based on cause categories

Acceptance Criteria

• As the user selects a cause category, the selected category should remain selected in blue background color, and the event list on the right side will be narrowed down to a shorter list
• If the user clicks Clear All button, both the location and the cause categories filters should be cleared
• When no item matches the filtering criteria, there should be a message prompting the user that "there is no matching record"

3. As a User, I want to be able to navigate to different pages in the navigation bar

Summary

Use Ant Design to create a simple navigation bar with links to the event page and any other relevant pages.

Acceptance Criteria

• Users can go to different pages by clicking the links in the navigation bar

2. As a user, I want to be able to navigate through pages to browse different events

Summary

Divide the long data into several pages so users can navigate through pages by clicking on the page number.

Acceptance Criteria

• Click on the page number should bring me to a new page.

1. As a user, I want to see events displayed in card layout

Summary

Card Layout: Implement a card-based layout to display events. Each event should be represented as a card.

Acceptance Criteria

• Each event should display the following properties: title, date, creator, location, and image

4. As a user, I want to be able to view event details by clicking on a single event card

Summary

Clicking on a card should open a modal that shows detailed information about the event, including all the properties mentioned in the event data.

Acceptance Criteria

• A user can open and close the event details modal.