Is your feature request related to a problem? Please describe.
Right now, we don't have a roadmaps page.

Describe the solution you'd like
Design a roadmap using a similar design system.

• Roadmap page should have a hero section like all other pages
• Roadmap page should have four types of roadmaps(Frontend Path, Backend Path, Full-stack Path, Mobile Development path)
• When users click on one of these paths, they can see related challenges to that path.

Use your creativity to design this page, You are limited only by your imagination.

Is your feature request related to a problem? Please describe.
Currently, the website doesn't have any hover effect on any card. So, I would like to add a cool hover effect to the card.

Describe the solution you'd like
My suggestions :

• Add a levitating effect on hovering over the card.
• Cool Shadow on hover

Additional context
I am talking about this card which currently lacks any hover effect.

Describe the bug
The Profile photo modal doesn't completely visible on a mobile screen, the waving hand emoji icon overlaps the modal. (See screenshot)

To Reproduce
Steps to reproduce the behaviour:

1. Open any page of the website on mobile screen.
2. Click on the Avatar Modal (Please log in first)
3. See error

Expected behaviour
The profile photo modal should be on top of everything and completely visible when a user clicks on the profile photo.

Screenshots

Describe the Feature
Your task is to add a share solution button on the solution detail page so that users can share their solutions to the different social networking websites easily.

Design Inspirations:
https://www.uidesigndaily.com/posts/sketch-share-modal-pop-up-day-1118
https://www.uidesigndaily.com/posts/sketch-share-post-social-day-913
https://www.uidesigndaily.com/posts/studio-share-pop-up-link-day-947
https://www.uidesigndaily.com/posts/photoshop-social-share-media-card-day-192

If anyone wants to work on this issue, let me know in the comment section.

Describe Feature
Your task is to build a GitHub star button and add it to the left side of the SignUp button.

Screenshot:

Inspiration:
https://supabase.io/

Describe the bug
View resources card does not fix to the bottom of card if the screen size is changed

To Reproduce
Steps to reproduce the behaviour:

1. Go to the live website
2. Click on resources
3. You will notice view resources button is not fixed to the bottom of every card

Expected behaviour
The view resources button should fix to the bottom of every card

Screenshots

Desktop (please complete the following information):

• OS: Windows
• Browser Chrome
• Version 22

Describe the bug
There is not enough padding at the bottom of the footer on the small screen devices.

To Reproduce
Steps to reproduce the behavior:

1. Open the website on the small screen devices.
2. Scroll down to the footer
3. See an error

Expected behavior
There should be enough spacing at the bottom of the footer.

Screenshots

Describe the bug
Right now, we don't have a hover effect on profile menu modal links.

To Reproduce
Steps to reproduce the behavior:

1. Login to the website
2. Click on your profile picture
3. Hover over the links
4. See error

Expected behavior
When we hover over the profile modal links, it should show a hover effect similar to the challenge details dropdown menu(👇see below)

Screenshots

Describe the bug
In Dropdown menu Desktop has a hover effect. But Mobile has no hover effect

To Reproduce
Steps to reproduce the behavior:

1. Go to 'challenge page'
2. Click on 'Option Dropdown'
3. Hover to 'Mobile'
4. no Hover Effect

Expected behavior
I want when I hover over the mobile, it's hover effect is same as desktop hover.

Screenshots

To

Desktop (please complete the following information):

• OS: windows
• Browser : chrome
• Version 22

Describe the improvement

If you hover over any of the cards and buttons, they don't show a hover effect.

Expected behavior

Add a hover effect to cards and buttons to make things smoother.

If anyone wants to work on this issue, please let me know in the comment.

Overview

Is your feature request related to a problem? Please describe.

The firebase hooks seem pretty complicated so if we implement react-firebase-hooks then the code will be pretty simple to work with.

Describe the solution you'd like

First of all, we will upgrade the firebase version to 9 as react-firebase hooks only support Firebase v9+. Moreover, we will use the compat version the syntax remains the same. Once Firebase is properly setup then we will implement the react-firebase-hooks logic.

Success criteria

• The code will be clean so that developers can easily contribute to the project.

User stories

How the product should work for various user types.

As a user

• There won't be any substantial change.

As a front end engineer

• The code will be very easy to work with.

Scope

Requirements

Current project requirements.

• We will have to upgrade Firebase to v9
• We will have to install react-firebase-hooks

Future work

Future requirements.

• Check if react-firebase-hooks start supporting the normal version of Firebase.

Non-requirements

All the Firebase syntax will remain the same.

Introduction

Your task is to fill the below Challenge Template according to the below Challenge UI Design. You are limited only by your imagination.

UI Design

Requirements

• In your challenge template, you need to include all the things that are listed in the below Challenge Template and in exact order.

Task Summary

• Properly fill the below challenge template
• Submit a Pull Request and add your challenge template in the description of the Pull Request.

Challenge Template

Challenge Title
A clear challenge title.

Challenge Description
A clear and concise description of the challenge.

Difficulty Level
Challenge difficulty level. (i.e. Beginner, Intermediate, Hard)

Tags
Tags relevant to the challenge. (i.e. FRONTEND, BACKEND, FULL-STACK, and MOBILE)

Learning
A clear and concise description of what they'll learn after completing this challenge.

Requirements
A clear and concise requirements to complete this challenge. (i.e. User can toggle between Light and Dark mode)
Write requirements in bullet points

Additional information
Add any other information about the challenge.

If you need any help, reach out to us on our Discord server.

Are you ready to work on this issue? Go ahead!

Describe the bug
In the challenges card, in some cards the view challenges button does not come to the end, it leaves some space at the bottom

To Reproduce
Steps to reproduce the behaviour:

1. Go to the website
2. Try resizing the window
3. You will see the error as the screenshot

Expected behaviour
All view challenge buttons should be fixed at the bottom

Screenshots

Desktop (please complete the following information):

• OS: windows
• Browser Chrome
• Version 22

Problem statement

Right now codingspace doesn't have a way to cache data to load things faster.

Describe the solution you'd like

I want to add a useSwr hook to cache the data to make the website load faster.

Success criteria

The criteria must be met in order to consider this feature a success.

• Load times reduced at least 20%, ideally more

User stories

How the product should work for various user types.

As a user

• I want my search queries to return results quickly
• So I can get my work done faster

As a front end engineer

• I expect my queries to be cached on the back end
• So the front end can be as fast as possible

If anyone wants to work on this issue, please let me know in the comment section.

Describe the bug
When the content of the page is less, then the footer gets to stretch to fill the space.

To Reproduce
Steps to reproduce the behavior:

1. Go to the Roadmaps page
2. See footer

Expected behavior
It should stick to the bottom when the content of the page is less but when the content is enough then it should be scrollable.

Screenshots

If anyone wants to work on this task, please let me know in the comment.

Describe the bug
The side navbar doesn't close on clicking the other section.

To Reproduce
Steps to reproduce the behavior:

1. Open the website on a small screen.
2. Click on the nav button.
3. Click on any nav link.

Expected behavior
It must get closed itself after clicking on any nav link.

Is your feature request related to a problem? Please describe.
Right now, we're not able to give proper credit to the challenge contributor.

Describe the solution you'd like
You need to build a contributor section on the challenge details page, so if someone contributes a new challenge design, we can give proper credit to them by linking their social profile.

Screenshot

Describe an issue
The text of the Hero section of the Resources page doesn't look good, every line in that text looks very close.

Describe the solution you'd like
You need to come up with a creative headline for the Hero section of the Resources page and replace it with the existing headline and style it properly, play with letter spacing and line-height property to give proper spacing and you can also increase the width of the text container, there are so many ways to make it look good on different screens sizes. You are limited only by your imagination.

*Screenshots

Desktop (please complete the following information):

• OS: macOS
• Browser: Chrome

Describe an issue
The text of the Hero section of the Challenges page doesn't look good, every line in that text looks very close.

Describe the solution you'd like
Add a more creative headline to the Hero section and style it properly, play with letter spacing and line-height property to give proper spacing and you can also increase the width of the text container, there are so many ways to make it look good on different screens sizes. You are limited only by your imagination.

Screenshots

Desktop (please complete the following information):

• OS: macOS
• Browser: Chrome

Describe the bug
There's a typo in the how it works section. The word access is misspelled as excess.

Screenshots

Location:
challenges page

• currently option box hide the figma full screen option.

• So it need to move left size

• need to change the option icon onlclick

Describe the bug

To Reproduce

Steps to reproduce the behavior:

1. Go to any of the pages and see the size difference between skeleton cards and actual cards.

Expected behavior

The size of both the cards should be the same to make everything look similar before and after loading.

If anyone wants to work on this issue, please let me know in the comment.

Describe the bug
The delete modal doesn't visible completely when we open it in the middle of the page.

To Reproduce
Steps to reproduce the behaviour:

1. Go to any of your submitted solutions.
2. Scroll down to the website preview.
3. Click on the delete icon
4. See an error

Expected behaviour
It should be on top of everything and completely visible when a user clicks on the delete button.

Screenshots

Is your feature request related to a problem? Please describe.
Right now, users can't get feedback on their solutions.

Describe the solution you'd like
Build a comment system, so, users can give their feedback on someone's solutions.

Describe an issue
The text of the Hero section of the homepage doesn't look good, every line in that text looks very close.

Describe the solution you'd like
Add a more creative headline to the Hero section and style it properly, play with letter spacing and line-height property to give proper spacing and you can also increase the width of the text container, there are so many ways to make it look good on different screens sizes. You are limited only by your imagination.

Screenshots

Desktop (please complete the following information):

• OS: macOS
• Browser: Chrome

Describe an issue
The text of the Hero section of the solution page doesn't look good, every line in that text looks very close.

Describe the solution you'd like
You need to come up with a creative headline for the Hero section of the solutions page and replace it with the existing headline and style it properly, play with letter spacing and line-height property to give proper spacing and you can also increase the width of the text container, there are so many ways to make it look good on different screens sizes. You are limited only by your imagination.

Screenshots

Desktop (please complete the following information):

• OS: macOS
• Browser: Chrome

Describe the improvement
Right now, when a user opens a delete modal on the solution details page and clicks on the delete button, it immediately redirects the user to the homepage without showing a delete indicator on the button.

To Reproduce
Steps to reproduce the behaviour:

1. Go to any of your submitted solutions.
2. Click on the delete icon
3. Click on the delete button
4. See an issue

Expected behaviour
It should show a delete loading indicator when a user clicks on the delete button and after deleting it should redirect the user to the homepage.

You can see a similar loading indicator on the solution submission page, click on the submit button and see the loading indicator and you can see the code of that part here.

I want to Solve the challenge "Toast Notification Component" but I download the Started code It was "Profile Card Component" starter code which was next challenge.

To Reproduce
Steps to reproduce the behavior:

1. Go to 'https://www.frontendpro.dev/frontend-coding-challenges/toast-notification-component-mHFR9GcTlWSyG8dO32Ok'
2. Click on 'Start Challenge'
3. Click on "Download Starter Code"
4. See Profile Card Component starter file will be download instead of Toast Notification Component.

Desktop:

• OS: Windows 10
• Browser: Chrome
• Version Latest

Currently, the 2 github signup buttons on the home page do not have any hover effects on them.

Hover effects need to be added similar to this

Add style to the scrollbar matching with the theme.

Can I work on this issue??

Introduction

Your task is to create new challenges for the codingspace community members. It can be anything! Web App, Mobile App, Landing Page, Small JavaScript App...You are limited only by your imagination.

Requirements

• Your challenge must have all the things that are listed in the below Challenge Template and in exact order.
• You need to provide the design file of the challenge.
• Design File must have a cover image of the challenge.

Task Summary

• Design a challenge
• Properly fill the below challenge template
• Submit a Pull Request and add your challenge template in the description of the Pull Request.

Challenge Template

Challenge Title
A clear challenge title.

Challenge Description
A clear and concise description of the challenge.

Difficulty Level
Challenge difficulty level. (i.e. Beginner, Intermediate, Hard)

Tags
Tags relevant to the challenge. (i.e. FRONTEND, BACKEND, FULL-STACK, and MOBILE)

Design Images
Provide images of the design files for both Desktop and Mobile.

Learning
A clear and concise description of what they'll learn after completing this challenge.

Requirements
A clear and concise requirements to complete this challenge. (i.e. User can toggle between Light and Dark mode)
Write requirements in bullet points

Additional information
Add any other information about the challenge.

If you need any help, reach out to us on our Discord server.

Are you ready to work on this issue? Go ahead! We are accepting as many challenges as the community can create. One note, quality over quantity.

Note: Please use Figma to design the challenges if possible.

Describe the bug
In mobile view when we click outside the nav bar is need to be closed.

To Reproduce
Steps to reproduce the behavior:
Open the site in mobile view. click the hamburger menu. now scroll down. and click outside the side nav.

Expected behavior
A clear and concise description of what you expected to happen.
Need to be closed after click outside the components

Describe an issue
The text of the Hero section of the MySolutions page doesn't look good, every line in that text looks very close.

Describe the solution you'd like
You need to come up with a creative headline for the Hero section of the MySolutions page and replace it with the existing headline and style it properly, play with letter spacing and line-height property to give proper spacing and you can also increase the width of the text container, there are so many ways to make it look good on different screens sizes. You are limited only by your imagination.

Screenshots

Desktop (please complete the following information):

• OS: macOS
• Browser: Chrome

Is your feature request related to a problem? Please describe.
Make a new coming soon page for a roadmaps page.

Describe the solution you'd like
You can add a coming soon illustration or do something creative to build a beautiful coming soon that matches the color scheme of our website.

If anyone wants to work on this issue, please let me know in the comment section.

👋 Hi @rishipurwar1,

I am your GitHub mentor for the GitHub Education, Community Exchange (CX) project. I'll be collaborating with you on preparing your repo for CX.

You mentioned in your submission that you wanted to submit a Collaborate repo. This means that you want to invite other students to collaborate and add features to this repo. I will generate issues, which will provide guidance on how to prepare your repo for a Collaborate CX submission on June 1, 2022.

After reviewing your repository, it already meets our standards for submission! 🎉

If you have any questions, please feel free to leave a comment, otherwise, I will contact you when it is time to submit your project!

About the bug

The challenge details page should show a loading state instead of a blank page while content is loading.

To Reproduce

Steps to reproduce the behavior:

1. Go to any of the challenge details pages and see the difference between the loading state and after loading state.
2. See an error

Expected behavior

It should show a loading animation(either an SVG loader or a skeleton loading animation) to fill up a blank space, so users can have a better user experience.

Screenshots

Desktop (please complete the following information):

• OS: macOS
• Browser chrome, safari, and Mozilla firefox

If Anyone wants to work on this task, please let me know in the comment.

Problem statement

Right now there is no way to join codingspace discord community.

Describe the solution you'd like

Add a join discord community button on the website so, user can join the community.

Success criteria

The criteria must be met in order to consider this feature a success.

• More users become a part of our community.

User stories

How the product should work for various user types.

As a user

• I want a platform where I can ask my doubts/queries directly
• So I can get my answers fast

If anyone wants to work on this issue, please let me know in the comment section.

• Integrate Monaco Editor
• File tab switching functionality
• Add Preview to show the website preview
• Add console
• Clear console button
• Add refresh button
• Add challenge description on the left
• Add functionality to resize different panel windows
• Add layout buttons on the navbar to toggle different panel windows
• Integrate the database to save the code changes made by the user

Describe the bug
In the profile menu, when we click on my solutions button, it doesn't close the profile modal

To Reproduce
Steps to reproduce the behavior:

1. log in to the website
2. Click on your profile picture
3. then click on my solutions
4. See an error

Expected behavior
When we click on my solutions button or outside that profile modal, it should get close.

Screenshots

Readme.md does not properly tells the beginners how to use it i can make the changes if you assign this issue to me

the social link will open on a new tab securely.

About the bug
The solution details page should show a loading state(loader) instead of a blank page while content is loading.

To Reproduce
Steps to reproduce the behavior:

Go to any of the solution details pages and see the difference between the loading state and after loading state.
See an error
Expected behavior
It should show a loading animation(either an SVG loader or a skeleton loading animation) to fill up blank space, so users can have a better user experience.

Screenshot

You can use this loader /src/assets/animated_illustration/loader.json
If anyone wants to work on this task, please let me know in the comment.

Describe the bug
In this task, you need to fix the height of the image in all the cards.

To Reproduce
Steps to reproduce the behavior:

1. Open the website on Safari Browser https://www.codingspace.codes/
2. Scroll to the challenge card(Challenge, solutions)
3. See error

Expected behavior
The height of the image should be the same on every browser/OS

Screenshots

Desktop (please complete the following information):

• OS: macOS Big Sur v11.6
• Browser: safari
• Version: 15.0

The mail server may have bugs. Also, you can add additional features to make it better.

Describe the bug
At small screen devices no way to close the login modal and design is also broken.

To Reproduce
Steps to reproduce the behavior:

1. You should not be logged in if you are logged in log out.
2. Go to any Challenge details page.
3. Open this page on mobile device which has resolution below 670px or resize your browser window below 670px.
4. Click on Download button.
5. See modal which is not closable on small devices and design is broken.

Expected behavior
The modal should be closable in small devices and design should be fixed show modal in the middle.

Screenshots
At mobile screen.

At medium tablet screen

Desktop (please complete the following information):

• OS: Windows 10
• Browser: Chrome, Edge
• Version: 102.0, 102.0.1245.41 (Edge)

Smartphone (please complete the following information):

• Device: Redmi note 7s
• OS: MIUI 12
• Browser: Chrome
• Version: 101.0

Additional context

• Instead of relative positioning we should add fixed position so modal. we could center align modal using below css. we could achieve same css with tailwind utility classes.

position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);

• Integrate Monaco Editor
• File tab switching functionality
• Add Preview to show the website preview
• Add console
• Clear console button
• Add refresh button
• Add challenge description on the left
• Add functionality to resize different panel windows
• Add layout buttons on the navbar to toggle different panel windows
• Integrate the database to save the code changes made by the user
• Identify dirty state and show alert before leaving the page
• Submit solution functionality
• Showing solution on iframe on the solution details page

Describe the bug
A clear and concise description of what the bug is.
side option icons are not center in screen size between 1024-1279.
It needs to center the div.

To Reproduce
Center the icon

1. Open 'Screen between 1024-1279'
2. check 'side navbar'
3. See error 'icon not center'

Expected behavior
A clear and concise description of what you expected to happen.

Screenshots

Desktop (please complete the following information):

• OS: [windows]
• Browser [chrome, Firefox, Brave]