opencodeiiita / grepit-frontend Goto Github PK

Task:

Implement an engaging profile page on new route /profile using Ant Design (antd) components, showcasing key user statistics. Leverage Ant Design's UI library to create a visually appealing layout with components such as username, profile photo, email, and pending rooms.

Details:

1. Ant Design Integration:
   Ensure Ant Design is integrated into the project. Install the necessary Ant Design components and import them into the profile page file.

2. Profile Page Layout:
   Create a layout for the profile page using Ant Design components. Utilize components such as Layout, Card, Avatar, and others for a clean and organized design.
   User Stats Display:

3. Display the following user data on the profile page:

   • Username
   • Profile photo
   • Email

4. Pending Rooms Section:
   Implement a section for displaying pending rooms. For each pending room, include the following details:

   • Room ID
   • Room Name
   • Join Button

5. Update User Profile:
   Implement functionality to update user statistics. Provide a user-friendly interface for users to edit their username, upload a new profile photo, and update their email.

6. NavBar as Layout.Header:
   Utilize NavBar component as the Layout.Header for a consistent navigation experience. Customize the navigation bar to include links to different sections of the profile page.

7. Responsive Design:
   Ensure that the profile page is responsive and provides a seamless experience across different devices and screen sizes.

Details:

1. Backend Review:
   Understand backend documentation for leaderboard and real-time question endpoints provided in API Documentation and Socket Events.

2. Frontend Setup:
   Ensure frontend project structure is organized and ready for integration.

3. Utilize Socket Events:

   • Make suggested requests to create a room, (Scheduling the quiz is not yet implemented on backend but just sent it to backend via a query parameter after encoding in URL). Upon creating the room, it must navigate to quiz room.
   • Join Room form via room code must also be integrated.

PS: Feel free to reach out on discord incase of any confusion.

Embark on a mission to enhance the visual appeal and consistency of our project by implementing a global theme using Ant Design's (Antd) ConfigProvider. This task involves seamlessly integrating Antd's styling across the entire application, and converting default React components to Antd components for a streamlined and theme-ready UI.

Task:

Implement a global theme using Antd ConfigProvider, ensuring a cohesive and visually pleasing design throughout the project. Convert default React components to Antd components for effortless theme implementation on various pages and components.

Details:

1. Antd ConfigProvider Setup:

   • Configure Antd ConfigProvider at the root level of your application i.e. App.jsx.
   • Set up a custom theme using Antd's theming capabilities. Customize the primary color, typography, and any other relevant styles.

2. Global Theme Integration:

   • Apply the Antd ConfigProvider to encapsulate the entire application, ensuring the global theme is consistently applied.
   • Verify that the global theme aligns with the project's design requirements and enhances user experience.

3. Convert Default React Components:

   • Identify default React components used across different pages and components.
   • Replace these default components with corresponding Antd components to leverage the unified theme.
   • Ensure that the Antd components seamlessly integrate with existing functionality and styling.

4. Theme Implementation:

   • Test the theme implementation on various pages to guarantee a visually cohesive and harmonized user interface.
   • Verify that Antd components maintain compatibility with your project's requirements and functionality.

Claim this task and enhance the project's visual aesthetics with a unified theme. Feel free to reach out if you have any questions or need assistance during the process.

Task Details:
Your mission is to create a custom useAuth hook, a powerful tool for managing user authentication. Here are the specific details:

Details

Craft a useAuth hook that utilizes useContext to determine the login status based on the presence of a special token in localStorage.
When the cherished token exists, let useAuth boldly declare, "Login granted!" with a true value.
In the absence of the token, let it softly murmur, "Not logged in" with a false value.
Ensure graceful handling of scenarios where the token is missing—no crashes allowed.
Customize the hook to be able to seamlessly integrate with your project's existing authentication setup.
Keep the implementation concise and purpose-driven.

File Location:

Write this dynamic component in src/hooks/useAuth.jsx.

Feel free to ask regarding any confusion in the given task.

Are you ready to embark on this challenge and unlock the authentication prowess of useAuth for GrepIt? Comment below to claim the task!

Your mission is to design a Div having a GlassMorf component inside it.

#Details

1. make a div of 40vh height and width and give the best color/gradient of your choice which is suitable to our grepIt application.
2. inside the div, make a div of 30vh h and w exactly at the center having glass-morphism property. with proper blurness.
3. you have to share the screenshot of the design and the proper Code of the component in the glassMorf.json file in the below format.

Glass-Morfism resources are updated on Discord.
The best 5 to 6 PRs will get merged.

{
     "githubid" = "your id",
     "ss link to div" = "link1",
     "ss link to code" = "link2"
},

No need to Claim this challenge, It is open to all.

Hello team! 🛠️

Exciting times at grepit! 🛠️ We've polished our Sign-Up page, and now it's your turn to weave some magic into our app.

🔧 Tasks:

1. Reference detailed API endpoints in apiendpoint.md from the grepit-backend repo.
2. Impeccably integrate necessary props using proper hooks in the Sign-Up component.
3. Focus on the Sign-Up component exclusively for all improvements.
4. Don't forget the oops moments – let's have error alerts that help!

⚙️ Details Matter:

1. Pay meticulous attention to the smallest details for a flawless user experience.
2. Thoroughly test the feature, addressing every possible minute detail.
3. Ensure all work is contained within the Sign-Up component.

Thank you for contributing to the foundation of Hitch's collaborative journey! 🚀
Comment to claim the issue.

Details:

Wrap the profile , quiz page with useAuth context hook if not authorized, using AntD design Result Component to disallow user to enter that page.

we have a Task for you. this is about How the quiz will be made.

Task Details:

Your task is to create a quizForm component that contains various input boxes. Details are given below

#Details

1. The components' rough design is given below. Add your creativity and make its Ux as good as possible.
2. The "correct option no." button must take a number as input which is correct.
3. on submitting the question form, make a separate div below the form that shows the question, its option and correct answer.
4. Responsiveness is mandatory.
5. Store the quiz data as a request for backend purposes.
6. Use the proper props.

NOTE: use of antDesign will be appreciated through points.

File Location: Write the component in src/components/quizForm.jsx
Router Placement: Integrate the component into the app router with the path '/quiz' and place it properly at the center.

Comment to Claim for the task.

Find and recommend a cool continuously animating background preferably in dark and blue theme.

Apply this animated bg on Home.jsx and Quiz.jsx and make a pull request on main branch. Best PR will be selected and good ones will be given partial points. Points can increase or decrease based on coolness of the animated bg.

PS: Make sure to not disturb other components while applying it.
As this is a competitive issue, you don't need to claim.

🚧 Deadline: 6th Jan 12pm

Grepit is a quizzing platform that is to be built for quizzing and competition with peers. Design a logo for this project that depicts the same idea.
Enter your github account and attach the figma link in the designs.json file.

This issue is open-for-all and there is no need to claim. Work on the issue and submit a PR.

Hello Team,

We've got an exciting task ahead! We've successfully set up the sign-up feature, and now it's time to tackle the sign-in component.

🔧 Tasks:

1. Create the sign-in component, similar to the sign-up one, but with username and password input boxes.
2. Check the APIendpoint.md in the grepIt-backend repo for detailed API endpoints.
3. Use the right hooks to smoothly integrate necessary props into the Sign-in component.
4. Concentrate on improving the Sign-in component exclusively.
5. Make sure to handle errors in the implementation.

⚙️ Details Matter:

Keep all changes confined to the Sign-in component.
Thanks for contributing to Hitch's collaborative journey! 🚀 Feel free to comment to claim the issue.

Task:

You aim to make a Card component for the Displaying room link. The reference design is linked below.

Details are as follows ->

1. Responsiveness.
2. You can make it on your design.
3. Use of AntDesign is mandatory. also, give the card a proper shadow.

the reference design is here. you may add on design from your side too.

component path: src/components/roomLink.jsx
at the time of PR show the ss for the card instead of placing it in any route.

Claim the issue by commenting below.

Details:

1. Review Backend Documentation:
   Go through the provided backend documentation thoroughly provided in API Documentation.
   Understand the API endpoints, request methods, and required parameters for sign-in and sign-up functionalities.

2. Integration technique:
   Integrate the sign-in & sign-up with backend maintaining tokens in localstorage for remembering user. Fields sent in json body must be verified and tested with the running backend in Live Backend (Let us know if backend is inactive or not responding).

PS: As the contribution period is ending, we expect PRs as soon as possible.

Hello contributors! 🛠️

Exciting times at grepit! It's time To make a leaderBoard for the application.

Tasks:

It's time to introduce a leaderboard to our application. Your mission is to craft a responsive leaderboard using the Ant Design UI library. Utilize dummy data, including position, name, UID, and quiz points, integrated seamlessly with Maps and necessary hooks.

major Details:

1. Ensure seamless responsiveness across all devices.
2. Place the leaderboard at /leaderboard, prominently centered [ position ].
3. Design must suit User experience as well as possible. Draw inspiration from Dribbble for an exceptional user-centric design.
4. Fetch dummy data from an external REST API. (any of your knowledge).
5. Utilize proper hooks and props for a structured implementation.

Your commitment to quality work will be duly rewarded.

Comment to claim this impactful issue
Thank you for your valuable contribution! 🌟

Your mission is to craft a CreateRoom component for quiz creation in GrepIt. Here are the specifics:

Task Details:

Your task is to create a CreateRoom named component that contains various input boxes. Details are given below.

#Details

1. Refer to the provided design and feel free to inject your creativity, which may be recognized separately if exceptional.
2. Ensure the input boxes align with their respective types. For example, a scheduled quiz must include time and date inputs. Utilize AntDesign components effectively.
3. The "Create Quiz" button should navigate to the '/quiz' route.
4. The "Get Link to Room" button must trigger a backend request to generate a link based on the filled data.
5. Make the component responsive for a seamless user experience on various devices.

• File Location: Write the component in src/components/createRoom.jsx

• Router Placement: Integrate the component into the app router with the path '/home' and place it properly at the center-left side.

Claim this challenge by commenting below!

We're diving into a key GrepIt feature—the Quiz Room. Here's the rundown:

🔧 Tasks:

1. Create /quizRoom route, splitting the page into two parts.
2. Left side: Question component showing the question and options.
3. Right side: Leaderboard (already developed).
4. Add checkboxes, and success/failure colors on options. Implement success logic on question submit (backend connection later).
5. Include the 'Previous' and 'Next' question buttons at the bottom of the question component.
6. Populate the question component with dummy data for the time being.

Check the various questions type components here

https://preview.themeforest.net/item/qzain-multiple-test-quiz-templates/full_screen_preview/44534188?_ga=2.169794725.583462586.1703274531-611163126.1683378128

Claim this issue by commenting. Thanks!

Task:

Configure the theme in the project using the provided ConfigProvider in the codebase. Choose appropriate theme colors and adjust them in the theme.ts file where the theme configuration is defined. Some components require special attention and should be configured individually or by component type rather than token type.

Details:

1. Theme Configuration:
   Update the theme.ts file in the codebase to reflect the chosen theme colors. Adjust properties such as primaryColor, secondaryColor, headerBg etc and text based on the identified color scheme.

2. Component Configuration:
   Identify components that require special configuration. For each of these components, ensure that the theme colors are adjusted individually or by component type.

3. Exclusion of Quiz.jsx Page:
   Ensure that the Quiz.jsx page remains unaffected by the theme configurations, i.e. no extra configuration for that file. Review how the theme is applied globally or selectively to exclude this page from the theme adjustments.

You can also provide theme colours ( descriptive as per material theme standards) in comments or discord and if it looks good on the page, you will get bonus points despite the fact whomsoever this issue has been assigned. It's requested to the assignee to feel free to try out the theme colours suggested by other participants.

Greetings Team!

In the dynamic world of Grepit, we are excited to introduce a sibling component to the Create Room feature – the Join Room component. Here are the key details for your next task:

📌 Major Details:

1. Add an input box and a join button to the Join Room component, and feel free to include additional elements for a seamless fit in the home section.
2. Ensure the button navigates the app to the /quizRoom (new route) section seamlessly.
3. Design creativity is in your hands this time; craft a component that complements the Create Room section.
4. Integrate the Join Room component to the right side of the Create Room component within the home section.
5. Leverage hooks, props, and the Ant Design library for an enhanced UI.
6. Explore suitable UI inspiration from platforms like Dribbble or Behance.

🚀 Implementation Details:

# Component Destination: src/components/joinRoom.jsx
# Route Placement: /home route, to the right side of the center, adjacent to the Create Room component.

Your dedication to delivering quality work will not go unnoticed.

🔗 Claim Your Contribution:
If you are ready to take on this impactful task, please comment to claim it.

Navbar Modeling in GrepIt

We've got a thrilling task for you – bring GrepIt's vision to life by crafting The Navbar Component. Detailed instructions are provided below.

#Task Details:

Your goal is to make a Navbar with the given Details,

#Details

1. The Navbar must be responsive for most devices.
2. The Navbar must have GrepIt Name on the left side. and Search Input on the right side only. No extra content.
3. Complete white with Shadow: large and 75 viewport width on the right Top of the website
4. Mandatory use of Tailwind CSS. For additional benefits, incorporate Ant Design.

#Time: 24 hours

Take Reference from this ->

NOTE: The component must be made in src/components/navbar/navbar.jsx and must be placed in app router having path '/home'

comment to claim the issue.

Create the signup/login page, just place, and style the components. You can add a suitable style to the text input fields. You can reference the attached image for the structure of the signup page, a relevant background image will be placed on the left side.
It is recommended to use tailwind css along with antd design for, if unable to do with that, it is acceptable using other techniques, just make sure it is responsive. We are although mainly focussing on desktop design.

Work on here while making relevant components in the components folder.

we have an exciting challenge for you to enhance GrepIt's user interface.

Task Details:

Your task is to create a User Card component positioned at the top left of the home page. Here are the specific details.

#Details

1. Develop a component that showcases a Profile photo and a placeholder Profile Name. Take input details as a prop.
2. On smaller devices, it should gracefully shrink to display only the Profile photo.
3. Implement an onClick event on the component. When clicked, it should trigger a drop-down containing options for "View Profile" and "Logout"
4. Implement a redirect so that clicking 'View Profile' directs the user to the empty '/profile' route.

File Location: Write the component in src/components/UserCard.jsx.
Router Placement: Integrate the component into the app router with the path '/home'.

Ready to tackle this? Comment below to claim the challenge!

Details:

1. Backend Review:
   Understand backend documentation for leaderboard and real-time question endpoints provided in API Documentation and Socket Events.

2. Frontend Setup:
   Ensure frontend project structure is organized and ready for integration.

3. API Configuration:
   Set up constants for leaderboard and WebSocket URLs based on backend documentation.

4. WebSocket for Questions:

   • Implement WebSocket connection for real-time question updates and leaderboard.
   • Update quiz interface dynamically as new questions arrive.

5. Utilize the lifecycle methods

   • Use countdown timer. Send the response to the question as soon as the timer ends (latest option that is chosen) and reset it again as soon as the new question arrives from backend.

Your mission is to create a Loader for GrepIt, utilizing resources available on Discord.

Task Details:

1. Develop a Loader Component for the application.
2. Exercise creative freedom in designing the loader, ensuring compatibility with a Dark theme background.
3. Showcase the loader's functionality through a video on Discord during the Pull Request.
4. Ensure proper loader functionality with a critical emphasis on utilizing appropriate React hooks and states.

File Location: Implement the loader component in src/components/loader.jsx.

To claim this challenge, kindly leave a comment below! Your dedication to this task is much appreciated.