Create a documented React/TypeScript/Formik SPA Prototype with oauth and secure API integration
£250-750 GBP
货到付款
The requirement
To create a simple single page application (SPA) which shows an unauthenticated splash section with a single button which initiates an oauth login against a keycloak (OIDC) server. Once authenticated, the SPA should display a work area comprising of multiple regions, each region containing one or more react functional components. One region should display a menu of forms (data to be provided from a secure API), where clicking on the menu item initiates a request for the form from the secure API. Once the form and data have been received they are to be rendered in the main work area using Formik. Data in the form should then be altered by the user, then validated by Yup before being submitted back to the secure API.
This is not to be a standalone ‘app’ but a simple Single Page App.
The menu is also to contain a button to allow a full oauth logout from the keycloak server after which the user will be returned to the splash page.
The oauth and api calling code will be provided but this can be modified if necessary. A set of docker containers will also be provided which will provide the oauth and api calling points as well as an nginx server which glues them together. This platform is based on the CurityIO ‘Backend for Frontend’ model and is not to be deviated from. The oauth container will connect to a remote keycloak server. ‘Magic code’ within nginx (provided by CurityIO) will handle the session management between the browser, identity server and API server.
The app should not allow access to the authenticated page unless the user has authenticated first using the oauth code. It must monitor and maintain the state of the login, be able to request a refreshed identity token from the backend when the current one expires (or just before) and must force a user’s session to terminate (and return them to the splash section unauthenticated) if the oauth token expires or an arbitrary timeout occurs.
The regions should include a sidebar menu (collapsible), a working menu for the main section, a main section where the formik forms and content will be displayed and a status bar.
Error messages are to either be displayed inline adjacent to a field which fails validation, or on a modal dialogue. Additionally ‘pop up searches’ should be possible using a modal dialogue.
The React code is to be function based and use hooks as appropriate - no class based code is to be submitted. These components will interact with the secure API backend via defined JSON ‘messages’ (containing the form content going from the browser
The primary purpose of this work is to provide the working prototype for a future development project and act as a test bed and proof of concept so therefore this does not need to be production ready. That said, it must be well written and clearly structured and documented as if it were for production purposes, but so that competent beginners can look at it and follow what is going on. We would rather see efficient but sub-optimal code which demonstrates clarity over performance.
This work should only take a competent developer a few hours at most so will be carried out as a fixed price project.
What it should do (summary)
* display unauthenticated ‘splash section’ with login button. Login button starts oath login via oauth server;
* display authenticated ‘main section’ comprising 4 regions (side bar, main section comprising menu bar at top, status bar at the bottom and work region in between).
* each region is to call a secure API to get content to populate it.
* the main region will call the secure API to get one of a few formik form definitions with data values and yup validation rules - the forms are to be rendered with data. They should then be changed by the user so as to trigger the yup validation rules before sending each back to the secure API. These will be chosen from menu options sent to the sidebar.
* when the user clicks the logout button (to be displayed in the sidebar) it should perform an oauth logout and return the user unauthenticated to the splash screen
Documentation
The code must be clear and concise with adequate commentary as to its purpose and the expected flows. Comments must be of a professional nature and must be able to explain to a competent person what is happening or what a module’s purpose is.
Debugging
The code must be able to run within Microsoft Visual Studio Code (VSCode) and support full debugging with breakpoints and single stepping. The code can be run using ts-node-dev within visual studio.
Tools to use
* Visual Studio code (the free version)
* Docker desktop (to run supplied containers)
* The requirement must be met using the current versions of the following software technologies:
* TypeScript
* Node JS
* React JS
* Formik and Yup
* TS-node-dev
Docker containers to support the Oauth and API calls will be provided. These will provide adequate interaction to allow the testing of the authentication process and subsequent operation of the code.
The code must operate completely within the visual code debugger and can use ts-node-dev or equivalent to provide ‘interpreted’ typescript (and yes I know that is a contradiction in terms).
Tools not to use
* Webpack (or equivalent)
* TypeScript compilers
* ‘non-standard’ node packages (anything which is not in the standard repository)
* custom docker containers
* anything not listed here
What will be provided
* 3 docker containers running the Curity IO oauth BFF, secure API and nginx reverse proxy to glue them all together;
* A test account on a keycloak server to test the oauth mechanism;
* 2 javascripts to support the oauth and api interfaces;
* A very basic API with some predefined formik forms and validation. The payload formats will always be identical;
Other notes
The project will be considered to be complete if it delivers on the functions and behaviours outlined and it does so whilst running in single-step debug mode.
This posting is available until 23.59 GMT on 18th June 2024 after which proposals will be reviewed and a candidate chosen to carry out the work. If something is not clear or you require further information please ask before that time and I'll respond as quickly as possible.
项目ID： #38213949
关于项目
授予：
有49名威客正在参与此工作的竞标，均价£544/小时
Hey Good morning , Just finished reading the brief details . I see you have been looking for someone who has experience with these tech stacks React.js, Typescript, Debugging and Visual Studio. I will request you to re 更多
Hi!! With my vast experience as a senior Web Developer for over 8 years, I can confidently tackle your React/TypeScript/Formik SPA Prototype project. I have proven skills in React.js and Typescript, two core component 更多
I am a proficient React/TypeScript developer with expertise in Formik and API integration. I can deliver a clear and concise single page application (SPA) prototype with secure oauth login, interactive form rendering w 更多
My name is Giuseppe and I am a highly experienced FULL-STACK developer with a strong focus on frontend technologies including React.js and Typescript. Over my 15-year career, I have honed in on the exact skills your pr 更多
Hello, Greetings, I trust this message finds you well. Having reviewed your project description, I am confident and excited about the prospect of working on this project for you. With previous experience in a similar 更多
Hi there, I understand your requirements and can certainly assist you. As a seasoned MERN expert deeply immersed in Angular, React, and Node.js development, I've successfully crafted over 100+ websites and web applica 更多
Hi, dear. I read your requirements and very interesting. I have rich experience about web development and can perform that perfectly. Please contact me and let us discuss about that. Greeting.
Dear Scott T., I went through your project description and it seems like I am a great fit for this job. I am an expert full stack developer with 7+ years of experience in software development. With years of experie 更多
Hi Scott T. I've read your project description carefully and I'm very glad to submit my proposal to this interesting project. I'm an expert full-stack developer which have 6+ years of experience on Debugging, React.j 更多
Dear Scott T., I'm glad to submit my proposal to this promising opportunity. As a senior full-stack software developer with 6+ years of professional working experience, I'm confident that I'm the best fit for this po 更多
