I'm a Web Developer
Languages and Tools
makaevaelena / graphiql-app Goto Github PK
View Code? Open in Web Editor NEWhttps://graphql-upgo.netlify.app
Home Page: https://graphql-upgo.netlify.app
graphiql-app's Introduction
graphiql-app's People
Contributors
Watchers
Forkers
maleryvalerygraphiql-app's Issues
Change Endpoint button - allows the user to switch to an arbitrary GraphQL endpoint.
feature/change_endpoint_button
Functional editor enabling query editing and prettifying 60 points
branch feature/request_editor
Localization 30 points
Response section. Should be represented by the same Query editor / JSON viewer component. Should be read only.
Footer is displayed on all pages of the application.
Client-side validation should be implemented (email and password strength - minimum 8 symbols, at least one letter, one digit, one special character, Unicode passwords must be supported)
Variables section that can shown or hidden, specified variables are sent to the server 30 points
feature/variables_editor
Localization (at least 2 languages). You should be able to change the language by clicking on the toggler/select in the header. Localization should be implemented using Context API. No 3rd party / open-source solutions are allowed.
If the user is authorized, the page should contain a link to the Main page.
Absence of husky git hooks -100 points
This route should be private.
In the upper right corner there are 2 buttons: Sign In and Sign Up 10 points
the demo version of the application should be deployed on gh-pages, netlify, heroku, or another similar service
Test coverage below 80% -100 points
Absence of linting -150 points
Sign Out button - signs user out
Sticky header 10 points
For the authentication you should use Firebase with the email/password sign-in method. Please, check this article
Upon successful login, the user is redirected to the Main page 10 points
Application structure
Application structure
Your app must contain:
Welcome page
User auth
GraphiQL page with:
request editor (query editor / JSON viewer)
variables editor
headers editor
documentation explorer (should be lazy-loaded)
response section (query editor / JSON viewer)
possibility to change to a different user-specified API endpoint
Absence of prettier -100 points
If the user is already logged in and tries to reach these routes, they should be redirected to the Main page 10 points
Upon successful login, the user should be redirected to the Main page
Pressing the Sign In / Sign up button redirects a user to the route with the Sign In / Sign up form 10 points
Headers editor section (If you are making a CORS request each added header should be supported on the backend, please, consider that).
feature/headers_editor
Link to Welcome page
Operational documentation explorer, visible only upon successful SDL request 50 points
branch feature/documentation
Query editor / JSON viewer. The query editor should support prettifying. Any 3rd party / open-source solution is forbidden, you should implement it on your own. JSON viewer should be read-only, it will be used in the response section.
branch feature/request_editor
Documentation section, should be visible only when the app receives a successful response with the schema definition from the API.
Errors from the API side (Not found, unhandled rejection, etc) should be displayed in a user-friendly format (toast, pop-up, or something like that - up to your decision).
If the user is already logged in and tries to reach these routes, they should be redirected to the Main page
Control that allows user to switch the language
Errors from API side are displayed in the user friendly format 10 points
feature/friendly_format_errors
The welcome page should contain general information about the developers, project, and course 10 points
When the token expires - the user should be redirected to the "Welcome page" automatically 10 points
If the user is not authorized, the page should contain a link to Sign In / Sign Up page.
after completing the task, create a pull request from develop to main branch. Merging a Pull Request is not required
Header section that can be shown or hidden, user-added headers are sent to the server 20 points
feature/headers_editor
Buttons for Sign In / Sign Up / Sign Out are everywhere where they should be 10 points
Client-side validation is implemented 20 points
React default favicon -50 points
Response section with an editor in read-only as a JSON viewer 40 points
feature/response_section
Header should be visible.
The header should be sticky. The moment it becomes sticky (if there is a scroll on a page) should be animated: color can be changed or its height can become smaller. Animated sticky header
teamlead should create private repo in GitHub and invite other members
Repository requirements
teamlead should create private repo in GitHub and invite other members
repo name graphiql-app. Branch name for develop - develop, main branch is empty and contains only README.md
the commit history should display the application development process. Commit requirements
the demo version of the application should be deployed on gh-pages, netlify, heroku, or another similar service
after completing the task, create a pull request from develop to main branch. Merging a Pull Request is not required
in case you will use proxy-service you need to include instructions on how to run it locally
you should make your repo public after the deadline
Variables editor section.
feature/variables_editor
in case you will use proxy-service you need to include instructions on how to run it locally
If the login token is valid and unexpired, the Sign In and Sign Up buttons are replaced with the "Main Page" button 10 points
Layout graph QL
Footer should contain a link to the authors' GitHub, the year the application was created, course logo with link to the course.
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.