frontendstudygroup / frontendstudygroup.github.io

Web application for the frontend study group from WomenWhoCode Frontend track.

Women Who Code Front End Study Group Project

This repository is a beginner-friendly project started by Women Who Code Front End to learn about front end technologies as well as how to collaborate on an open source project.

Currently it is deployed at https://frontendstudygroup.github.io using GitHub Pages.

We are collaborating with Women Who Code Cloud to implement other deployment methods like deploying the app to Azure or AWS with Continuous Integration and Continuous Delivery pipelines.

Expectations

• Participation and maintenance of this project is completely voluntary and we are not committing to teach anything as part of this effort. If you want to practice together with us, this is a good place!
• We highly encourage you not to use third party UI frameworks. For example, if you want to design a carousel or a tooltip, do it from scratch.

  However we do understand that sometimes we need to use some third party libraries like redux or react-dom-router. When in doubt discuss it on the issue you are working on.

• Find your motivation to contribute to this repository and make sure you have the time.

  Life happens, we get it. Just let us know if you cannot do something you're assigned to and do NOT feel guilty about it.

• Things work best for all of us when contribution goals are driven by you. We as maintainers will only guide you and validate your thought process.
• Be open and honest in your communication.
• Be selfish! Aim to do what you intend to learn and do not feel forced to work on something against your will.

Code of Conduct

• Be respectful to each other
• No question is stupid, feel free to ask questions and encourage others

How To Contribute

• Search in Issues for open issues to work on
  • If you would like to make a suggestion for an enhancement, or report a defect, create an issue
• Fork the repository (recommended if you are doing this for the first time)
• Clone your forked repository to your machine (git clone [url from clone option])
• Request to assign the issue for yourself
• Comment on the issue about your approach to solving the problem
• Get feedback from other contributors or project maintainers
• Submit a pull request when you are ready
  • Add a title and small description in the pull request about what you did.
  • Make sure to reference the issue number in the pull request comment with the words "Fixes #[issue number]" or "Resolves #[issue number]" as explained in GitHub documentation.

Questions about front end? Join the WWC Front End Slack and join the #fe-beginner-studygroup channel.

Questions about cloud? Join the WWC Cloud Slack and join the #opensource channel.

Local Setup for Development

This project was bootstrapped with Create React App.

Getting Started

After you clone this repository to your local machine, execute the command npm install in your favorite terminal to install all the npm packages locally.

To run the application locally execute the command npm start.

Open http://localhost:3000 to view it in the browser.

The page will reload if you make edits. You will also see any lint errors in the console.

Testing

Executing the command npm test launches the test runner in interactive watch mode. See the section about running tests in the Create React App documentation for more information.

Deployment

There is a GitHub action set up on this repository to build the React app, run tests and deploy to the GitHub Pages site on every merge to the master branch.

Also when a pull request is created or updated, the GitHub action will build the React app and run tests. If the build or tests fail, the pull request will be blocked from merging until they are resolved.

Learn More

You can learn more in the Create React App documentation.

To learn React, check out the React documentation.

frontendstudygroup.github.io's Issues

Homepage functionality

Hello everyone!
The start button on the home page does not work.
Is this something you have already discussed?
How could I help with this?

Thank you.

Visualizing a Github repo

• Github repo has typical folder structure, instead we could visualize the code as a Graph or "Fingerprint" circles.
• Research on D3.js, Come up with simple steps to start.

Contribution guide

How to contribute:

• Fork the repo (recommended if you are the first time)
• Claim the issue
• If the issue is not there, create a new issue
• Make sure the issue has been assigned to you
• Comment in the issue about your approach to solving the problem
• Get feedback from others
• Submit a PR when you are ready

Improving existing UI of Homepage

Current UI of Homepage looks inconsistent with the rest of the landing pages i.e contact, resources etc. I wish to add the following features to the homepage for enhancing the UI :

• Adding the bluish-green theme to the homepage making it more similar to others.
• Adding few illustrations and graphics
• Adding a Github button to help the visitors navigate through the repos
• Adding a few contributions and project stats to home page

The figma mockup looks somewhat given below. I am open to your views and thoughts about the design. Do let me know if you wish to add anything else :)

Refactor the input field component

As per the discussion here, refactor the input component to come from its own file. This way, Contact.js can use it. Similarly, any other page or component uses the input component too.

Design home page

Design landing page that gives a small description of what this site is for.
(Some suggestions in issue #1)

Add toggle for resources view to switch between table/cards view

Add toggle for Resources pages to view the list of internships as a table using plain vanilla HTML/CSS/JS.

Here is a sample of what I am thinking of that I took from this article (but don't use the libraries referenced here :))
https://blog.logrocket.com/converting-tables-to-grids-with-react-compound-components/

Create Docker image for the React App

In order to be able to deploy this app to Kubernetes or to certain services in the cloud we need it to be in a Docker image.

Initial suggestions to do this:

• Create Dockerfile in the repository.
• Include nodejs image to build the react app
• Include nginx to host the react app. Would need to also set up an nginx.conf for this.

To test it out locally, can use docker compose.

Expectations

• We will not teach anything
• But if you want to practice together with us, we are a good place!

Design and implement a footer component

The website needs a footer component. Feel free to propose a mockup design first for the footer component. An example of how the header component was designed can be found in this issue #2 and corresponding PR #15.

Please add into the footer, the following:

• womenwhocode.com/frontend website URL
• social media links
• feel free to propose anything relevant footer information.

Reference image 👇

Design Contact Us form

Suggestion as in issue #1.

Detail view for the json data

We need to create a detailed view for the json data which is being worked on #14.

When the card component on the list view is clicked, it should display a detailed view. Please wait to work on this issue until the routing layer has been added by @RossellaFer in #14

Design the website layout

Come up with a design layout to be used for the website.

Design the header

Filter resources by location

I would like to implement a select that allows the user to filter the cards by location. The filter needs to be applied to both the table and the cards view.

I am thinking about introducing state to the application, so that the Filter component can pass the selected location to the Resources and TableView components. Is this the right approach @princiya @sunithapatel?

Create unit tests for Resources component

Create unit tests for the Resources component.

Feel free to list out test scenarios here first for feedback if you like.

Improve information displayed for resources

I think a nice addition would be to display a description for each specific resource. Also, since we have gathered this data from a single website, it would be nice to add a disclaimer at the end of the Resources and individual resources pages a reference to this site.

So I think we can create a Disclaimer component, to be used both in the Resources and Single Resource component.

Since I was working on the Resources component, I have noticed that the last row is cut by the footer, so I thought we could change the fixed height of the grid articles in order to make all content visible.

Set up continuous integration with GitHub Actions

Include GitHub actions yml file to build and deploy the React app after every merge to master.

Can also include a step to build and run tests the app on every pull request and block merge if build or tests fail.

Contact Form Validation

Deploy React App to AWS with AWS Amplify

Since this is a static website we can use AWS Amplify to deploy this site to AWS.

Some documentation from Create React App:
https://create-react-app.dev/docs/deployment#aws-amplify

We do not have an AWS account yet, so you would have to use your own account to test this out - potentially with AWS free tier.

Suggestion - might be good to document the steps you took (through console or infrastructure as code) and add it to this repository - maybe in a deployment folder as a markdown file?

PWA support - Make it installable on any device and show offline page when user's internet is not connected

We can make frontendstudygroup web app a PWA due to following reasons:

• We can show offline page when user is not connected to internet.
• We can make website work in background even if user has not opened it, to serve purposes like sending notifications.
• Mainely, it will reduce overall loading time of website as it will store some sources in browser's cache memory.

Warning - react-bootstrap

• Cloned git
• Installed react-bootstrap
• Created Component/Header.js
• imported Carousel to the Header

index.js:1 Warning: findDOMNode is deprecated in StrictMode. findDOMNode was passed an instance of Transition which is inside StrictMode. Instead, add a ref directly to the element you want to reference. Learn more about using refs safely here: https://reactjs.org/link/strict-mode-find-node
at div
at http://localhost:3002/static/js/vendors~main.chunk.js:8900:22
at Transition (http://localhost:3002/static/js/vendors~main.chunk.js:47074:30)
at div
at div
at CarouselFunc (http://localhost:3002/static/js/vendors~main.chunk.js:8521:97)
at div
at Header (http://localhost:3002/static/js/main.chunk.js:309:1)
at div
at http://localhost:3002/static/js/vendors~main.chunk.js:8998:23
at div
at http://localhost:3002/static/js/vendors~main.chunk.js:13109:23
at div
at http://localhost:3002/static/js/vendors~main.chunk.js:9197:23
at div
at App (http://localhost:3002/static/js/main.chunk.js:167:1)

Deploy React App with Azure Static WebApps

To learn about deployment to Azure, since this is a React app, we can deploy it using Azure Static WebApps.

Potentially can set up GitHub actions for this.
Azure DevOps is another tool I am familiar with, but that could be a separate issue to integrate that.

Link to documentation from Create React App:
https://create-react-app.dev/docs/deployment#azure

Link to documentation from Azure:
https://docs.microsoft.com/en-us/azure/static-web-apps/getting-started?tabs=react

NOTE: We do not yet have an Azure account to use for this, but you could sign up for a free one (with credit card) and use the free tier for this.
If you are a student, you can sign up for an account without a credit card:
https://azure.microsoft.com/en-us/free/students/

Design About Page

Design the About page for the site.

Change README file to reflect this is practice application for Hacktoberfest

I would like to suggest to change the main README file for the repo to have a description that this is a project used for a study group to practice and learn front-end like HTML, CSS and React.

Then include sections for expectations, code of conduct, how to contribute, etc.

For the instructions that are there now, we can make a section at the end about setting up your local environment with the app for either contributions or learning yourself.

Code of Conduct

• Be respectful to each other
• No question is stupid, feel free to ask questions and encourage others

Create page to show list of open source internships as Cards view

Based on the design in #1, the page for "Products" (may consider to rename this to "Resources") shows a list of cards that we will show on the UI for data.
We would like to show a list of paid open source internships as a card view (could also be expanded to show in other views like table or list to experiment with different UI views, but data would remain the same).

Top returns from a Google search:
https://itsfoss.com/best-open-source-internships/
https://www.geeksforgeeks.org/best-open-source-programs-for-students-to-participate/
https://github.com/deepanshu1422/List-Of-Open-Source-Internships-Programs
(feel free to add your own, these are suggestions for data and they have overlap between them)

To keep it simple and not need to create a backend, you can create a json file containing the data for these internships that we can then use to display on the UI.

Consider posting a sample of the json structure along with what a card could look like for this before creating the pull request.

URL access to bubblechart

@Priyami I merged this PR. The URL to access the bubble chart itself is missing, can you create another PR to add that, or can tell me how to check changes from this PR? :)

Originally posted by @princiya in #52 (comment)

• Create Contributors link under the footer to access bubble chart

Homepage UI

URL: https://frontendstudygroup.github.io/

Hi,

I'm not sure if the home page is supposed to look like this. It seems pretty inconsistent.
Also, the Start Button is not clickable.

Is this a deployment error?

Making a certificate template for the website for the contributors

This certificate template will show the certificate with the name and sign and logo of women who code frontend study group and also adding the contributor's page on the website at the last showing the name of the contributor's and its link of the GitHub profile.
Please assign me this issue.
Thank You.