opencodeiiita/geek-editor-frontend

geek-editor-frontend's Issues

Add Tab indentation functionality

Most of us coders use the tab key to add indentations. Add that functionality to the Code editor.

Another Design Issues

Your next task is to create a design for Dashboard Component in Figma.

Guidelines

• The page should contain a section or a column for the profile of the programmer. You can refer to online compilers or websites.
• The page should display the rank, saved codes, followers, upvotes of the programmer.

Minimum Design Criteria (MDC)

Redesign the dashboard component by keeping in view the following points:

• Design should be appropriate i.e. it should look like a dashboard.
• The layout should be clean.

Note

• The top 3 designs will be selected and will be rewarded with points.
• No extra time will be given for submission after 2 days of posting this issue.
• The final decision will be taken by mentors.
• Figma link should be submitted in the task2 folder.
• As it is an open to all issue, therefore, no need to claim.

The dashboard component looks like this:

You need to fix it.

Improve Web Vital Score

Improve the web-vital score

Only need to improve

1. Performance
2. Accessibility
3. Best Practices

Note

No need to do SEO, already done in #186

Current Score:

CSS of sign-in/Log-in page

Write CSS of sign-in/Log-in page so that it it looks like following pictures.

Implementing loader

Now when a user logs in or sign up there is no loader when the internet is slow the user will have no idea whats happening

Issue

The normal issue for some purpose.

Transition while Switching Themes

In this issue, you have to add a suitable transition when switching from light to dark theme and vice versa.

Updating user profile

Report Bugs

In this issue, you have to report all the relevant bugs and if they are viable, we will assign them to you.

Note:

• No need to claim.
• If we find a certain bug (reported by you) as an issue that we are planning to give later in this project, then it won't be assigned to you
• Final decision rests in the hands of mentors

Modifying Readme.md

I can Beautify Readme.md file like I can add Image Icons of Languages like below one

Where is dashboard

You might have noticed that the compiler part is there but dashboard Is not,
so your next task is to find dashboard and make it visible...XD, you have to create a so called link to dashboard.

Improve SEO of the Website

Add tags on the website to Improve SEO.

Refer this to know more about SEO.

Design a Footer

Your next task is to create a design for Footer in Figma.

Guidelines

• Design of the footer should follow the theme of the existing website.
• Add info about OpenCode (logo, year, discord link, devfolio link)
• Add a link to the official website of open code. (https://opencodeiiita.github.io/)

Minimum Design Criteria (MDC)

Redesign the footer by keeping in view the following points:

• The layout should be clean.

Note

• The top 3 designs will be selected and will be rewarded with points.
• No extra time will be given for submission after 1 day of posting this issue.
• The final decision will be taken by mentors.
• Figma link should be submitted in the description of the PR itself.
• As it is an open to all issue, therefore, no need to claim.

On hitting the tab button , cursor vanishes

If allowed i would like to work on this issue

Get Dynamic data for dashbard

Use backend routes to get dynamic data from database for user dashboard.
GeekEditor-Backend Repo

Line Numbers Issue🔢

By now all of you must have observed that when we enter a new line, a line number gets printed to the left side of the code indicating that the programmer is on the given line number.

You have to change the code for this part:

Design Issue

Let's jump into a little bit of designing before jumping into the JS part.

Your next task is to create a design for Compiler Component in Figma.

Guidelines

• Page should be divided into two columns, the first one for code and the second one for user input and output of the code.
• You could refer to online compilers
• There should be a run button.
• Refer to colors of logo for color pallete.

Minimum Design Criteria (MDC)

Redesign the compiler component by keeping in view the following points:

• Design should be appropriate (it should look like a compiler and keep in mind that you are not here to show off your designing skills XD).
• Layout should be clean.

Note

• Top 3 designs will be selected and will be rewarded with points.
• No extra time will be given for submission after 2 days of posting this issue.
• The final decision will be taken by mentors.
• Figma link should be submitted in the task1 folder.
• As it is an open to all issue, therefore, no need to claim.

Bring Your Issues

It seems to us that you guys haven't gone through Readme because till now no one has made an issue of their own.
So, here's your next task:-
You are required to come up with legit issues.

The points will be for such issues which

• are genuine.
• we haven't plan to give in this repo.
• are not related to the readme.

Some points to keep in mind

• Best two issues will be allowed to continue
• You have one day to bring your issues

Note

It is up to the mentor whether to allow this Issue or not and how many Points to assign for it!

No need to claim

Style the Navbar Component

Flaunt your CSS styles and redesign the compiler component.

Note
You have to use the color pallet of the logo of Geek-Editor-Frontend

Test

test

Add Logo

Add logo of your choice to the nav bar.

Setup this project on your local machine.

Setup this project on your local machine, and send a screenshot of your browser and command-line.

This issue is open to all, no need to claim🤗

Screenshots of this issue are to be uploaded in the image folder of this repository

Add Profile Picture

Add a functionality so that a user can upload his/her photo and store it in Cloudinary.
You can use npm module of Cloudinary to store photos online and get a url where the phtos are stored.

Resources
Cloudinary Docs
Cloudinary NPM

Improve footer

Footer seems to be out of form, see if you can fix it or not in this footer issue.

Can refer to this Figma link for design: Design

Style the Compiler Component

Flaunt your CSS styles and redesign the compiler component.

Note

• You have to use the color pallet of logo of Geek-Editor-Frontend

Fix Bug on SignIn Page

Note

This issue has been assigned already to @varunKT001 as he has reported this bug, so no need to claim.

Update the React favicon

The current favicon doesn't suit the app, replace it with a new cool icon.

Edit Navbar Design

Navbar seems to be out of design, fix it and send PR

logic for compiler (in JS) and setting up the API

Returning from a long time of CSS, now is the time for some JS to take over the project
P.S. We are always open to bugs...XD
so you next task is to write the JS code for compiler.

In this task you need to do the following:-

• Analyze what is happening inside the textboxes
• Write a suitable code for accepting the submission, compiling it using the API provided in the readme (link), and displaying - - the compiled output of the code or has the code compiled successfully or not.
• You have to generate your API key and do the needfull.

Note: You can refer to documentation of the API-

• https://ce.judge0.com/
• https://rapidapi.com/judge0-official/api/judge0-ce

Implementing toast

For every error made the error is getting alerted a better implementation would be by using toast

Password reset

There is no method currenrly for reseting the password

Improving the Position and Look of Dashboard Navbar.

Note: This issue has been made by @Palak-2109, so it will be assigned to her.

Add .gitignore to tell Git to ignore node_modules and possibliy env files in the future

Currently, the repository does not have a .gitignore file and it is very much required to ignore /node_modules.

add a 404 page

add a suitable 404 page for the website. The page should have a nice ui. Add nav to the page.

Recreate Compiler Component

In this task, you have to implement the below-given design on the compiler component.

• Dark mode
  

• Light Mode
  

Implement Save Codes

Implement save codes so that the user can save his/her codes in the database using APIs provided by backend
GeekEditor-Backend Repo

Recreate Dashboard

In this task, you have to implement the below-given design on the dashboard component.

Light Mode -

Dark Mode -

figma link - https://www.figma.com/file/RJuCQpR1HVWwBdryIVqYvm/compiler-component?node-id=0%3A1

Another Transition Issue

Add a suitable transition effect when switching components from compiler to dashboard and vice versa

Dark Mode

This issue is simple, implement dark mode using CSS only.

Note

No use Of Material UI should be there.

Line Number Issue - 2

It seems that our previous issue Line Number Issue 1 has run into some trouble and is not working correctly.
So, your task is to fix this bug.

Active Class

On the navbar, highlight compiler, when active component is compiler and highlight dashboard when active component is dashboard.

Make Dashboard Responsive

The dashboard is not responsive if any one of you have observed.
Jumping straight to issue, Your task is to make the dashboard responsive but leave the navbar as it is because it is a different issue that has already been assigned.

Create Footer

Create the Following Footer for the website

https://www.figma.com/file/Q9wRFM0sOsQe26I8OURZ3A/Footer-Copy

add following links to suitable buttons -

• https://opencodeiiita.github.io/
• https://devfolio.co/opencode/dashboard
• https://discord.com/invite/PX7uJCSXPw

Login-Signup Page Issue

Make login signup page responsive and add suitable design (if needed).

Note: You need to attach the website's link by hosting it on any platform

Implement Login and Signup

Description

Implement login and signup functionality by using the backend of Geek Editor Backend repo
Go through the Readme.md to know about schemas, APIs, and authorization.

Note

The user should log in again after signup and land on Compiler after login.

Implement Logout

Implement logout using backend APIs
GeekEditor-Backend Repo

Consider using "react-hook-form" for form validation. Update button hover.

React Hook Form is a library that helps you validate forms in React. It is a minimal library without any other dependencies, while being performant and straightforward to use, requiring developers to write fewer lines of code than other form libraries. This library will take care of all validation, including when to validate. Custom components or components from libraries can also be controlled using react-hook-form, without behaving oddly or differently from other inputs, giving the website a very smooth UX.

The cursor on the signup/signin pages when hovering on buttons doesn't change to a pointer, I think updating that will provide a better, more comprehensible UX.

I would love to work on implementing react-hook-form into the forms used in the website, and update button hovers as well.