opencodeiiita / geek-editor-frontend Goto Github PK
View Code? Open in Web Editor NEWHome Page: https://geek-editor-frontend.herokuapp.com/
Home Page: https://geek-editor-frontend.herokuapp.com/
Most of us coders use the tab key to add indentations. Add that functionality to the Code editor.
Your next task is to create a design for Dashboard Component in Figma.
Redesign the dashboard component by keeping in view the following points:
The dashboard component looks like this:
You need to fix it.
Improve the web-vital score
No need to do SEO, already done in #186
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
The normal issue for some purpose.
In this issue, you have to add a suitable transition when switching from light to dark theme and vice versa.
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.
Add tags on the website to Improve SEO.
Your next task is to create a design for Footer in Figma.
Redesign the footer by keeping in view the following points:
If allowed i would like to work on this issue
Use backend routes to get dynamic data from database for user dashboard.
GeekEditor-Backend Repo
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.
Redesign the compiler component by keeping in view the following points:
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
It is up to the mentor whether to allow this Issue or not and how many Points to assign for it!
Note
You have to use the color pallet of the logo of Geek-Editor-Frontend
test
Add logo of your choice to the nav bar.
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🤗
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
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
This issue has been assigned already to @varunKT001 as he has reported this bug, so no need to claim.
The current favicon doesn't suit the app, replace it with a new cool icon.
Navbar seems to be out of design, fix it and send PR
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.
Note: You can refer to documentation of the API-
For every error made the error is getting alerted a better implementation would be by using toast
There is no method currenrly for reseting the password
Currently, the repository does not have a .gitignore file and it is very much required to ignore /node_modules.
add a suitable 404 page for the website. The page should have a nice ui. Add nav to the page.
Implement save codes so that the user can save his/her codes in the database using APIs provided by backend
GeekEditor-Backend Repo
In this task, you have to implement the below-given design on the dashboard component.
figma link - https://www.figma.com/file/RJuCQpR1HVWwBdryIVqYvm/compiler-component?node-id=0%3A1
Add a suitable transition effect when switching components from compiler to dashboard and vice versa
This issue is simple, implement dark mode using CSS only.
No use Of Material UI should be there.
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.
On the navbar, highlight compiler, when active component is compiler and highlight dashboard when active component is dashboard.
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.
https://www.figma.com/file/Q9wRFM0sOsQe26I8OURZ3A/Footer-Copy
Make login signup page responsive and add suitable design (if needed).
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.
The user should log in again after signup and land on Compiler after login.
Implement logout using backend APIs
GeekEditor-Backend Repo
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.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.