A responsive web app built on Vue 3 and Firebase that aims to connect members of the MUMTEC academic community with each other and opportunities within the community.
Knowledge of HTML & CSS is required. Your task is to design and develop a page to use when the site is under maintainence. You can duplicate the 404 page to use as a template.
Steps to accomplish the task:
If you haven't done already, create a new branch that you'll make your changes on.
There are many icons used on the platform in the side navigation, top navigation, user menu, event card, profile card, etc. These are currently stored locally in the project folder under src/assets. Let's replace them all with Font Awesome Icons.
On the event page, when you enter multiple filters and there is no event to display, we want to show some text instead of leaving the screen blank. This improves the UX of the platform.
Steps to accomplish the task:
If you haven't done already, create a new branch that you'll make your changes on.
Navigate to the file, src/views/BrowseEvents.vue
The array variable filteredEvents is used to display the events. If the length of this array is 0, display some placegolder text instead. You can decide on what to display.
On the home page, you will see a footer. This footer, in order to be reused on other pages, must be made a separate component.
Steps to accomplish the task:
If you haven't done already, create a new branch that you'll make your changes on.
Navigate to the file, src/views/Home.vue
You will see a div with the class "home__footer". This div and it's corresponding styles must be moved to a new file so it be a stand-alone component.
Create a new file called 'Footer.vue' in rc/modules/navigation and transfer the footer code from Home into this. Don't forget to transfer the styling too.
Import the footer in the Home.vue file and make sure everything works.
(This task can have multiple contributors)
The homepage needs to champion the platform and give users a better idea of what the platform does and perhaps how to use it. It can also include any other important information that is relevant to visitors.
Your task is to identify some sentences or paragraphs that can be improved or rephrased and make the change. You can also add or remove sentences if you feel it would have a positive impact. If you're looking for inspiration. look for any sentence(s) that doesn't seem clear or maybe you would've wished something was explained better on the home page. You can rectify that!
Steps to accomplish the task:
Identify the change you want to make.
Create a new issue stating on GitHub and state what enhancement you're making.
Open your code editor.
Create a new branch that you'll make your changes on.
Modify the relevant section of the file src/views/Home.vue
Commit your changes and follow the steps to submit a PR.
Global state in a Vue project is managed by Vuex. This is used to store certain information like the authenticated user and more while the platform is being used. On logout, the state of the web app must be reset.
Steps to accomplish the task:
If you haven't done already, create a new branch that you'll make your changes on.
Navigate to the file, src/store/index.js
Near the top, you will see the initial state of the app. This is the variable that is updated when the state is updated.
The logout is handled in the same file under the function SIGNOUT_USER. When a user successfully signs out, reset the state to the initial state.
There is a menu that is displayed when you click on your name in the top-right corner of the platform. The first option says "User Info" (refer to the screenshot) and can be improved.
Steps to accomplish the task:
If you haven't done already, create a new branch that you'll make your changes on.
Navigate to the file, src/modules/navigation/UserMenu.vue
Find the line that contains "User Info" and replace it with "User Profile".
There is an arrow icon that appears on some devices and displays as a crossed box on others. Let's either remove it or replace it with a proper icon using Google Material Icons.
Documentation for Google Material Icons - https://google.github.io/material-design-icons/
Note that all the necessary setup and imports are done. You would just need to add the line of code that displays the icon.
Steps to accomplish the task:
If you haven't done already, create a new branch that you'll make your changes on.
Navigate to the file, src/views/Login.vue
Find the line that says "Create a new account ⮞".
"⮞" is what is used to display the arrow this needs to be dealt with.
On the User Profile page, there is an option to select interests. These are hard-coded values. Do you think there are any interests missing and you would like to add? Your task would be to add relevant tech interests. Things like 'Open Source', 'Kafka', 'Hadoop', etc. can be added.
Steps to accomplish the task:
If you haven't done already, create a new branch that you'll make your changes on.
On the talent page, when you enter multiple filters and there is no talent to display, we want to show some text instead of leaving the screen blank. This improves the UX of the platform.
Steps to accomplish the task:
1, If you haven't done already, create a new branch that you'll make your changes on.
2. Navigate to the file, src/views/FindTalent.vue
3. The array variable filteredTalent is used to display the talent. If the length of this array is 0, display some placeholder text instead. You can decide on what to display.
4. Follow the steps to submit your PR.
If you enter some random address on the Eureka site, it displays the 404 page as in the screenshot. Do you have any ideas to make this page better? Get creative - you can update the illustration and/or the text.
Steps to accomplish the task:
If you haven't done already, create a new branch that you'll make your changes on.
When you go to the User Profile and try to update your bio, there is no limit on how many characters you can type. Your task would be to set a reasonable limit (say about 200 characters).
Steps to accomplish the task:
If you haven't done already, create a new branch that you'll make your changes on.
Navigate to the file, src/views/UserProfile.vue
Find the input tag that has the id bio.
Manipulate the Javascript to limit the character count.
When you go to the User Profile and try to update your bio, there is an input tag used. But a bio is descriptive so it would make more sense to use a textarea. We already have a textarea implemented for the feedback form. Your task would be to change the input field to a textarea.
Steps to accomplish the task:
If you haven't done already, create a new branch that you'll make your changes on.
Navigate to the file, src/views/UserProfile.vue
Find the input tag that has the id bio. This is what needs to be replaced.
Navigate to the file, src/views/Feedback.vue
Find the textarea tag that has the id feedback__message. This is what you need to replicate. Don't forget to include the styles.
There is currently no margin and the profile cards sometimes touch edge to edge without any space in between. Refer to the screenshot to see the issue.
Steps to accomplish the task:
If you haven't done already, create a new branch that you'll make your changes on.
Navigate to the file src/modules/main/ProfileCard.vue
We need to modify the css so scroll down still you see the <style> tag around line 110.
Under the profile-card class, we need to add the following lines:
On the mentor page, when you enter multiple filters and there is no mentor to display, we want to show some text instead of leaving the screen blank. This improves the UX of the platform.
Steps to accomplish the task:
1, If you haven't done already, create a new branch that you'll make your changes on.
2. Navigate to the file, src/views/FindMentor.vue
3. The array variable filteredMentors is used to display the mentors. If the length of this array is 0, display some placeholder text instead. You can decide on what to display.
4. Follow the steps to submit your PR.
(This task can be handled by multiple contributors)
We are using a plugin called sweetalert2 to handle the pop-up error messages that are displayed when something goes wrong. You can try to submit feedback form with a body but no subject to see how the popup works. Your task is to update the text displayed in the error messages. There is nothing wrong with them now but here's your chance to get creative and use more flowery language or have a play with words.
Steps to accomplish the task:
If you haven't done already, create a new branch that you'll make your changes on.
Use global search to find "Swal.fire({" and that will point to all the places where the alert was called.
Navigate to the files, understand what the error is and improve the error message.