Create page to show list of open source internships as Cards view about frontendstudygroup.github.io

[RossellaFer]

Could I please work on this?

These are the steps I would follow to tackle this issue:

• Make a proposal for .json file structure
• Make a mockup of the card layout + displayed card information
• After approval by the team, add at least 10 entries in the data.json file, to have enough data available for coding
• Create new route for the resources page
• Create components CardLayout and Card, which reference the data

I have started to put together a potential .json file structure, which would look like this:

[
  {
    "id": 1,
    "name": "Google Summer of Code",
    "url": "https://summerofcode.withgoogle.com/",
    "eligibility_criteria": "none",
    "internship_period": 3,
    "application_period": ["March", "April"],
    "stipend": true,
    "location": ["Remote"]
  },
  {
    "id": 2,
    "name": "FSF",
    "url": "https://www.fsf.org/volunteer/internships",
    "eligibility_criteria": "none",
    "internship_period": 3,
    "application_period": ["April", "May"],
    "stipend": false,
    "location": ["Remote", "Boston, US"]
  }
]

Data is structured in this way so it can be used to add filters to the Resources page, which can be developed as a follow up issue.

[sunithapatel]

Sounds good @RossellaFer! Thank you for this list, I like how you have thought this through. 🙂

Json looks good too.

I can create another issue for filtering - good idea! 🙂

[princiya]

Thanks both so far. 👍 This looks awesome. @RossellaFer very nice summary of how you would like to work on this PR.

To keep the PR small, as a first step, @RossellaFer can you work on introducing a route to this web application?

Create new route for the resources page

This way, others will not be blocked or don't have to work on the same thing should they wish to work on contact form etc.

Then you can work on the card component itself both in terms of mockup and code.

Lastly, you or others can work on the detailed view when you click on the card. If routing and json is in place, someone else can work in parallel for the detailed view while you work on the card component list view. I created an issue for detailed view - #20 .

List view and detailed view can be two separate issues and can be worked in parallel.

Filtering, search etc can be all follow up issues, which again when routing + json is in place can be picked up by others.

Let me know what you think? :)

But again, this is a great start and thanks for taking care of explaining your thought process.

[RossellaFer]

Hi @sunithapatel and @princiya, thank you so much for the feedback!

I have created the PR for the Router component, using react-dom-router, so that other contributors can add to this when they work on other pages.

I have a question on the detailed view - do you envision this being some sort of an "info" icon that opens up a popup? I found this on codepen, which can probably be used for inspiration https://codepen.io/fromwhence/pen/rNLEXGe

[princiya]

@RossellaFer it can either be a design like the codepen you shared, or it can also be the following:
click the card --> open a new route and show a new page with detailed view.
it's up to the person to decide who would like to work on this issue. hope this helps. :)

[Priyami]

@princiya I would like to work on this Router component.

[princiya]

fixed in #27