Page MenuHomePhabricator

Outreachy Application Task (Round 25): Setup Frontend Web App for Toolhub records management
Closed, ResolvedPublic

Description

This task is one of two application microtasks for T317083

Overview
For this task, you're required to set up the infrastructure for the Frontend Web Application. 

Tools you could use are as follows:

  1. Any frontend framework or library of your choice
  2. Any testing frameworks/libraries of your choice
  3. Git
  4. Any repository hosting service of your choice

This task would give a sense of your Frontend skills. Don't worry, the project in itself would entail more coding and UI styling. Don't be under pressure to impress, feel free to reach out to any mentor for additional support if anything seems unclear or you get stuck on any part of the task. Also feel free to use any other tool that you consider beneficial to your project.

Steps to follow

  • Create a Frontend project with support for Unit Testing.
  • Initialise Git on the project, if you haven't done so already, and add the remote url of your repository.
  • Add the boilerplate code into a commit. The commit message guidelines used by developers in the foundation might be useful when creating your commits.
  • Push up the change to the repository hosting service of your choice.
  • Design 3 Mock pages: Home, Leaderboard, and a Records Dashboard. You are required to build this pages with hardcoded strings, that means none of this pages should make request to the API for data. Feel free to be creative with your designs, and you can also seek some inspiration from the Citation Hunt tool.
  • Each page should have a Navigation bar containing links to the other pages.
  • The Dashboard is required to show the following metrics with mock figures (feel free to add other analytics you think may be useful to monitor): Total number of Tools in the records, number of tools with missing information, percentage of tools with missing information compared with the total number of tools in the records, number of tools edited using this record management tool
  • Add these UI to a commit and push up the changes.
  • Ensure your code is well documented in the README.md file.
  • If you feel you have completed all the steps in this task, you may request feedback, and we will provide high-level feedback on what is good and what is missing. To do so, email both of the mentors (sstefanova@wikimedia.org and dadedoyin@wikimedia.org) with the link to your public PAWS notebook. We will try to make time to provide this feedback once to anyone who would like it.
  • When you feel you are happy with the state of your repository, you should include the public link in your final Outreachy project application as a recorded contribution. We encourage you to record contributions as you go, as well to track progress.

All the best!

Event Timeline

There are a very large number of changes, so older changes are hidden. Show Older Changes

Thanks @DAseneca for your answers, they're all spot on.

Thank you @Damilare I am glad I could be of help.

Hi All,
I am kinyuy Kelly Bright, Happy to be on this project

@Damilare, @Slst2020, I have developed a static UI for the website and I haven't yet figured out a way to work with any data for the project. How could I possibly proceed from here? I am using React for the project.

@Damilare, @Slst2020, I have developed a static UI for the website and I haven't yet figured out a way to work with any data for the project. How could I possibly proceed from here? I am using React for the project.

According to the task description You are required to build this pages with hardcoded strings, that means none of this pages should make request to the API for data. I suggest that it is fine to have static UI.

Thanks @sabina-zaripova, @Apella1 you don't need to worry about data for this stage.

Hello @Slst2020 and @Damilare , Good day. Please is the a way I an change the username of my wikimedia account ? My current username does not reflect my real name. Kindly share a link, if there is a way to do that. Thanks.

@Slst2020 and @Damilare , I have now found a way to edit my profile. This is the link to edit a profile.

@Smart8099: Please ask off-topic questions in other/better places, see https://www.mediawiki.org/wiki/New_Developers/Communication_tips - thanks.

@Aklapper Well noted. thanks.

@Slst2020 and @Damilare , I have now found a way to edit my profile. This is the link to edit a profile.

This throws back an error

Please move conversations about Phabricator profiles to Zulip. It's off-topic for this very task (see its task title and task description). Thanks.

Thanks @sabina-zaripova, @Apella1 you don't need to worry about data for this stage.

Thanks for the feedback.

@Damilare, @Slst2020, I have developed a static UI for the website and I haven't yet figured out a way to work with any data for the project. How could I possibly proceed from here? I am using React for the project.

According to the task description You are required to build this pages with hardcoded strings, that means none of this pages should make request to the API for data. I suggest that it is fine to have static UI.

Thank you.

hello @Damilare @Slst2020 , In the project brief, you do mention we share a public link to PAWS project when we are done and for this front-end task I find it really confusing because I can't find a launcher on there for javascript if say I opted to use React for this. Because it mentions using git I did assume we'd be sharing the link to the public repository as a contribution. Kindly advise on this please.

Hello @Salwoch, I believe you are required to submit your github link containing the codes to the mentors, @Damilare and @Slst2020 via email. You will only share a link to your public PAWS project, when you are done with the python tasks.

Hello @DAseneca, correct me if Im wrong, everything about the UI e.g buttons, icons etc should be static?

Hello @DAseneca, correct me if Im wrong, everything about the UI e.g buttons, icons etc should be static?

I assume that by static UI it has been meant that we do not need to worry about fetching data from API for now: You are required to build this pages with hardcoded strings, that means none of this pages should make request to the API for data
Otherwise, you don't have any restrictions on the UI interface.

Hello @DAseneca, correct me if Im wrong, everything about the UI e.g buttons, icons etc should be static?

Yes @Sheilakaruku
it should be static as that fulfills the basic requirement. However, there is no fast-and-hard-rule set in stone when it comes to the design of the frontend tasks. Emphasis are placed on functionality, interaction between the pages and implementation of the dashboard. You can be as minimalist as possible or your site could be super colorful with so much amazing motion features. What ever your developing style is, you are encouraged to express it, while ensuring that the minimum requirement (features the pages must have) are implemented.

hello @Damilare @Slst2020 , In the project brief, you do mention we share a public link to PAWS project when we are done and for this front-end task I find it really confusing because I can't find a launcher on there for javascript if say I opted to use React for this. Because it mentions using git I did assume we'd be sharing the link to the public repository as a contribution. Kindly advise on this please.

For the Frontend task, a link to the git repo would suffice as a recorded contribution. The link to the PAWS notebook is for the backend task. When you feel you have completed any of the tasks, you are encouraged to contact the mentors to provide high-level feedback on your work as well as guidance (if needed) on recording your final contribution

Hi @Damilare @Slst2020, is there any particular convention for documenting our code via the readme file as specified in the tasks?

Hi @Damilare @Slst2020, is there any particular convention for documenting our code via the readme file as specified in the tasks?

I don't think any was mentioned. Maybe it is best to stick to the most common convention of writing the readME.md which is like the minimum description needed for the project to be introduced and its features explained.

I am sure if there was a specific format for the readme, it would have been stated as a requirement.

hi @Alvinokafor, for the frontend documentation, no convention but you should ensure you document as much as possible. Understanding that documentation could be highly subjective, the documentation could cover (but not limited to) any of the following:

  1. Setup instructions
  2. Packages used and what they are used for.
  3. System requirements
  4. Summary of the user work flow

Ok, thanks for the clarification @Damilare & @DAseneca

@Damilare just a clarification for the frontend and backend web projects do I send a link to my public repository on the GitHub or I need to publish the page on the GitHub. Thanks

@James95-developer you can add the link to the website in your readme.md and share a link to your repository.

@Damilare just for clarification please.....I'm working on the front-end task at the moment, Do i also need to work on the back-end tasks after that ? or just one of the two is fine. Thanks

@Damilare just for clarification please.....I'm working on the front-end task at the moment, Do i also need to work on the back-end tasks after that ? or just one of the two is fine. Thanks

Here is what the task description says: While it's enough to finish just one of the two tasks, we expect the strongest candidates to at least attempt both In other words, even though it is not required, you can try both.

@Damilare just for clarification please.....I'm working on the front-end task at the moment, Do i also need to work on the back-end tasks after that ? or just one of the two is fine. Thanks

Here is what the task description says: While it's enough to finish just one of the two tasks, we expect the strongest candidates to at least attempt both In other words, even though it is not required, you can try both.

I agree it is best to do both

@Damilare just for clarification please.....I'm working on the front-end task at the moment, Do i also need to work on the back-end tasks after that ? or just one of the two is fine. Thanks

I think you can attempt both

Hi @Damilare i just started working on this project. Is it advisable to use React.js framework?

Hi @Damilare i just started working on this project. Is it advisable to use React.js framework?

Yes. According to the mentors, you are welcome to use any framework and library. As well as any testing framework of your choice.

@Damilare and @Slst2020 I have sent a mail requesting feedback, please.

Hi @Damilare i just started working on this project. Is it advisable to use React.js framework?

Yes. According to the mentors, you are welcome to use any framework and library. As well as any testing framework of your choice.

Alright thank you. @Damilare I have started the frontend task, i need to ask some questions.

Alright thank you. @Damilare I have started the frontend task, i need to ask some questions.

You can ask any question here directly. Someone other than @Damilare might be able to help you out, and faster.

In general, it's good etiquette to "just ask" whatever questions you have, rather than "asking to ask"

Hi @Slst2020 @Damilare I would like to know if I could use the direct link to the github repo of the project as my contribution URL?

Also, What set of information is generally required in the contribution description?

Hi @DAseneca, yes you can use the link to your github repository as your contribution URL. However, I'd recommend you add a test link to your Readme.MD for a quick preview.

I'm not so sure I understand your question about the contribution description, but I imagine you'd want to discuss the project and your solution as a description of your contribution.

Hope this helps.

Hi @DAseneca, yes you can use the link to your github repository as your contribution URL. However, I'd recommend you add a test link to your Readme.MD for a quick preview.

I'm not so sure I understand your question about the contribution description, but I imagine you'd want to discuss the project and your solution as a description of your contribution.

Hope this helps.

It helped, Thank You. Another question: Since we worked on two distinct tasks, how do we include the backend aspect of the task in the contribution URL? Shouldn't it be included?

Well that's a good question @DAseneca, full disclosure I'm not so sure what the contribution UI looks like. If there's no validation on the field, maybe you could list them with commas. Else, you could use a Google doc for the contribution URLs and then you can share the link to the doc instead.

Thoughts @Slst2020 ?

Well that's a good question @DAseneca, full disclosure I'm not so sure what the contribution UI looks like. If there's no validation on the field, maybe you could list them with commas. Else, you could use a Google doc for the contribution URLs and then you can share the link to the doc instead.

Thoughts @Slst2020 ?

Please ask this, and similar questions related to how to record contributions/submit a final application) on Zulip instead, so this thread can stay on-topic.

Hello, I am confused about what the leaderboard should display

Hi @Hannah_Njoroge. If you're not sure, I'd suggest looking at the Citation Hunt leaderboard for inspiration.

Thank you @NicoleLBee it's like I was confusing the dashboard and the leaderboard

jquery.badge: Add ability to display the number zero

Cupcake ipsum dolor sit. Amet tart cheesecake tiramisu chocolate cake
topping. Icing ice cream sweet roll. Biscuit dragée toffee wypas.

Does not yet address T44834 or T176. Follow-up to Id5e7cbb1.

Bug: T42
Change-Id: I88c5f819c42d9fe1468be6b2cf74413d7d6d6907

For the commit message, now that there is no bug that I am fixing and no change Id..will I include the footer and the metadata in the commit message

@Hannah_Njoroge This commit message format is something we use for Gerrit, an alternative to GitHub (sort of) that is widely used for Wikimedia projects. If you are looking for a format for your own GitHub repo, I'd suggest using this instead:

Example:

ui: Change you made described in one, short line

Longer description here, detailing the why of your
change. Make sure to keep line length reasonably
short. You can also use bullet points, if that adds
clarity.

Substitute "ui" for whatever aspect of the app the change applies to, e.g. api, docs, tests, dev, etc.

@Damilare kindly check your email for my review request

@Hannah_Njoroge This commit message format is something we use for Gerrit, an alternative to GitHub (sort of) that is widely used for Wikimedia projects. If you are looking for a format for your own GitHub repo, I'd suggest using this instead:

Example:

ui: Change you made described in one, short line

Longer description here, detailing the why of your
change. Make sure to keep line length reasonably
short. You can also use bullet points, if that adds
clarity.

Substitute "ui" for whatever aspect of the app the change applies to, e.g. api, docs, tests, dev, etc.

@Slst2020 thank you for the clarification

Hello @Damilare about the posting of the github repo link as the contribution url, is it okay to also post the link for the github pages where the work has been hosted?, for those hosting at github pages?

@Damilare please is there a deadline for the submission or could be better if you gave us a time frame to work with

@Notjob @Slst2020 has addressed that here:

Hello all! For those of you who haven't yet requested feedback on your microtasks, please note that the last day to do so will be Friday, October 28th, 23:59 UTC. The deadline to submit contributions and your final application is Friday, November 4th.

wow

@Notjob @Slst2020 has addressed that here:

Hello all! For those of you who haven't yet requested feedback on your microtasks, please note that the last day to do so will be Friday, October 28th, 23:59 UTC. The deadline to submit contributions and your final application is Friday, November 4th.

wow thanks

Greetings guys, hope all is well. Please I wish to ask how I can request for a review of my contribution for feedback!. I tried to check the profiles of our mentors but couldn't get a contact information, say email. Please help much appreciated.

Greetings guys, hope all is well. Please I wish to ask how I can request for a review of my contribution for feedback!. I tried to check the profiles of our mentors but couldn't get a contact information, say email. Please help much appreciated.

Our emails are in the task description. I have highlighted them now so that they're easier to spot.

Greetings guys, hope all is well. Please I wish to ask how I can request for a review of my contribution for feedback!. I tried to check the profiles of our mentors but couldn't get a contact information, say email. Please help much appreciated.

Our emails are in the task description. I have highlighted them now so that they're easier to spot.

Sounds good!! Thanks

Greetings guys, hope all is well. Please I wish to ask how I can request for a review of my contribution for feedback!. I tried to check the profiles of our mentors but couldn't get a contact information, say email. Please help much appreciated.

Our emails are in the task description. I have highlighted them now so that they're easier to spot.

ohh okay @Slst2020 , thanks

Hello everyone, could you kindly offer your suggestions on how to implement all language translation on the app, similar to the one in CitationHunt?

I have tried the following using nextjs (a React framework):
I attempted to use the npm package i18next, but this necessitates the creation of a json file for each language where I will map keys to the text I want to translate in my application.

I think there is a better method because I will need to create more than 30 json files for every language and I am unable to set the translation for dynamic data, like data from the API.

@tobianointing If its about that language drop down I remember @Slst2020 mentioning that it was not necessary to have it on the app

Hi @tobianointing, you don't need to worry about language translation. Focusing on just the details in the requirement is sufficient for this phase.

Hello is anybody working with react.js here??
I cannot seem to host my app on git hub pages or netlify!!

I have installed the npm build package and the gh-pages package, made needed changes in my package,json file!! so far nothing has been working. any help would be appreciated so i can send in my work for review

Hello is anybody working with react.js here??
I cannot seem to host my app on git hub pages or netlify!!

I have installed the npm build package and the gh-pages package, made needed changes in my package,json file!! so far nothing has been working. any help would be appreciated so i can send in my work for review

Hello @Notjob I did not work with react.js worked with Angular and I tried hosting with Netlify it did not work..perhaps you can try firebase..worked for me

Hello is anybody working with react.js here??
I cannot seem to host my app on git hub pages or netlify!!

I have installed the npm build package and the gh-pages package, made needed changes in my package,json file!! so far nothing has been working. any help would be appreciated so i can send in my work for review

Hello @Notjob I did not work with react.js worked with Angular and I tried hosting with Netlify it did not work..perhaps you can try firebase..worked for me

Wow thanks Hannah!! I’m on it. I just hope it does work

Hello everyone, I am Muskaan, I am interested in contributing to the Wikimedia project. I have already started working on the frontend task, but I have some confusion, like what kind of information we have to show over each (home, leaderboard, and dashboard).
I am looking forward to some guidance. Thank you.

Hello @Muskan you can use Citation Hunt as your guide it has a leaderboard that can maybe guide you,
for the dashboard: total number of Tools in the records, number of tools with missing information, percentage of tools with missing information compared with the total number of tools in the records, number of tools edited using this record management tool
For home, you can include general info about each tool
Hope it does help

Hello is anybody working with react.js here??
I cannot seem to host my app on git hub pages or netlify!!

I have installed the npm build package and the gh-pages package, made needed changes in my package,json file!! so far nothing has been working. any help would be appreciated so i can send in my work for review

Hello @Notjob I did not work with react.js worked with Angular and I tried hosting with Netlify it did not work..perhaps you can try firebase..worked for me

Wow thanks Hannah!! I’m on it. I just hope it does work

@Notjob You are welcome I hope it did work

Hello is anybody working with react.js here??
I cannot seem to host my app on git hub pages or netlify!!

I have installed the npm build package and the gh-pages package, made needed changes in my package,json file!! so far nothing has been working. any help would be appreciated so i can send in my work for review

Hello @Notjob I did not work with react.js worked with Angular and I tried hosting with Netlify it did not work..perhaps you can try firebase..worked for me

Wow thanks Hannah!! I’m on it. I just hope it does work

@Notjob You are welcome I hope it did work

yes, i ended up using only the build packaged with netlify. and it worked!!
thank you Hannah

Hello @Damilare and @Slst2020,
I sent in my project already since 28th Expecting feedback please

Hello is anybody working with react.js here??
I cannot seem to host my app on git hub pages or netlify!!

I have installed the npm build package and the gh-pages package, made needed changes in my package,json file!! so far nothing has been working. any help would be appreciated so i can send in my work for review

Hello. Have you been able to resolve this problem? if not, first navigate to the directory where the src. folder is located using cd directory. There is no need to run npm install again, run npm start. This should work.

hello everyone
please when working on the final application, do you have an idea of what the project timeline will be?

hello everyone
please when working on the final application, do you have an idea of what the project timeline will be?

I believe that the mentors are the ones to provide that information

Hi, @Techgirl60

Slavina posted some information about the timeline here: https://phabricator.wikimedia.org/T317083#8365375

There are also links to past examples that might give you some idea of what they're looking for.

Hi Everyone!

Congrats to those who got acceptance for this cohort. It was really a great experience for me to learn some new skills. I will continue my efforts for this community.

Specially thanks to our mentors @Damilare and @Slst2020

All the best

Slst2020 claimed this task.