Skip to content

Landing / Search page #44

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom
Merged
merged 8 commits into from
Oct 30, 2023
Merged

Landing / Search page #44

merged 8 commits into from
Oct 30, 2023

Conversation

karishma-shah
Copy link
Contributor

@karishma-shah karishma-shah commented Oct 29, 2023 •
edited by PaulaPerdomo
Loading

Closes #31

Here it is, the landing/search page in all it's glory - and also using react components! ✨

This PR uses creates many reusable react components that will be used in our app, and have been used on the landing/search page:

  1. FilterField - this is the component for the filter fields that are located on the left hand side of the search page. It will allow users to filter the posts according to their preferences
  2. PostCard - this is the component for a single "card"/posting on the search page
  3. SortBy - this is the sorting dropdown. It will allow users to sort their search results

Note: the backend is not setup yet, so there is mock data being used for the post cards, filters and sort selections.

Here is a little demo (search bar to come up top hence the large top blank margin):

Screen.Recording.2023-10-29.at.4.12.23.PM.mov

Instructions to test locally:

  1. checkout this branch
  2. run npm install
  3. run npm start
  4. go to localhost:3000

Unit tests to come in a separate PR, since the size of this PR is already getting large.

@meriam04
Copy link
Contributor

Awesome work with the landing page! I was able to run it locally and it looks the same as what you showed. I just wanted to mention before I forget that we don't have the BlueSurf logo on it like we do in the Figma design. Are we planning on adding that in another PR?

@karishma-shah
Copy link
Contributor Author

Awesome work with the landing page! I was able to run it locally and it looks the same as what you showed. I just wanted to mention before I forget that we don't have the BlueSurf logo on it like we do in the Figma design. Are we planning on adding that in another PR?

Yeup, this will be in a separate Navigation Bar PR.

@divyaK15
Copy link
Contributor

Landing page looks good! I was able to easily run it locally after pulling. I have one question, is the number of post cards static right now? and are we going to change this so the user can keep scrolling or navigate to another page to see more posts?

@tmahabir
Copy link
Contributor

Landing page looks good! I was able to easily run it locally after pulling. I have one question, is the number of post cards static right now? and are we going to change this so the user can keep scrolling or navigate to another page to see more posts?

That's a good point. It's static for now as Karishma was just mocking the data, but the plan (once the database is setup) would be to display however many post cards met the filter/search criteria.
Based on our Figma designs and previous discussions, the user would just need to scroll down more to see more posts, but we might want to implement the pagination bar like you mentioned if there are more than x amount of post cards that fit the filter/search criteria. This can be something we should take note of and decide on later as it's not an important issue for now.

tmahabir
tmahabir approved these changes Oct 30, 2023
View reviewed changes
Copy link
Contributor

@tmahabir tmahabir left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Landing page looks fantastic! Lgtm

@karishma-shah karishma-shah merged commit 5a4336f into main Oct 30, 2023
@PaulaPerdomo PaulaPerdomo added this to the Milestone 4 milestone Nov 8, 2023
@PaulaPerdomo PaulaPerdomo added the frontend For frontend developments label Nov 8, 2023
@PaulaPerdomo PaulaPerdomo changed the title [FE] Landing / Search page Landing / Search page Nov 8, 2023
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@tmahabir tmahabir tmahabir approved these changes

@divyaK15 divyaK15 Awaiting requested review from divyaK15

@meriam04 meriam04 Awaiting requested review from meriam04

Assignees

@karishma-shah karishma-shah

Labels
frontend For frontend developments
Projects
None yet
Milestone
Milestone 4
Development

Successfully merging this pull request may close these issues.

[Infra][UI] Create Search Page
6 participants
@karishma-shah @meriam04 @divyaK15 @tmahabir @PaulaPerdomo @kxrtx