Comments (7)
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.
from frontendstudygroup.github.io.
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!
from frontendstudygroup.github.io.
Thanks both so far.
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.
from frontendstudygroup.github.io.
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
from frontendstudygroup.github.io.
@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. :)
from frontendstudygroup.github.io.
@princiya I would like to work on this Router component.
from frontendstudygroup.github.io.
fixed in #27
from frontendstudygroup.github.io.
Related Issues (20)
- Design Contact Us form HOT 14
- Deploy React App to AWS with AWS Amplify HOT 8
- Set up continuous integration with GitHub Actions HOT 1
- Detail view for the json data HOT 9
- Design and implement a footer component HOT 10
- PWA support - Make it installable on any device and show offline page when user's internet is not connected HOT 4
- Contact Form Validation HOT 1
- Refactor the input field component HOT 2
- Design About Page HOT 6
- Add toggle for resources view to switch between table/cards view HOT 11
- Improve information displayed for resources HOT 1
- Create unit tests for Resources component HOT 9
- Filter resources by location HOT 2
- Visualizing a Github repo HOT 1
- Making a certificate template for the website for the contributors HOT 4
- URL access to bubblechart HOT 1
- Improving existing UI of Homepage HOT 11
- Homepage UI HOT 2
- Homepage functionality HOT 1
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from frontendstudygroup.github.io.