Create a step-by-step form in React + Chakra UI + react-hook-forms
Greetings!
It is necessary to create a "builder" for invoices (hereinafter referred to as "builder"), essentially a complex step-by-step form, for the Next.js + Chakra UI + react-hook-forms project according to the Figma design (in general terms).
- Either ready-made Chakra UI components will be used, or some already written custom components (for example, DataPicker, basic Input + Autocomplete).
- The design will be provided in Figma. The form has 4 steps/pages with different types of fields. I am providing a screenshot of one of the steps - the most complex among all. The rest are mostly simple inputs.
- The builder is quite separate from the rest of the project, but some fields have dropdowns with data from the backend (only a function call is needed - the TS client to the backend is already written).
- The result of the builder (on submit) must be in a specified object format (a TS interface will be provided).
- Text/labels/placeholders must be moved to the i18n file (just call the function: "Service details" -> t('incomes.invoices.builder.step2.name')).
Important about the project:
- Next.js 14 (App Router) without Redux
- Chakra UI 3.0.0-next.20
- Note: this is a next version and their documentation is still in a raw form, sometimes you have to look at the component code for examples
- react-hook-forms, react-table
- next-intl
- REST backend
The ideal candidate will be:
- Ready to work in a pull request mode in the GitHub project and take feedback into account.
- Paying attention to code quality and its compliance with the overall project structure.
- Considering the current project structure, general conventions, not using radically new libraries, etc.
- A link to a GitHub profile with examples of work or contributions is welcome.
After completing this specific task, long-term cooperation can be considered. Knowledge (or even just a desire to understand) advanced concepts such as SSR/RSC/Server Actions/Dynamic Routes/Parallel Routes/Slots, etc. is welcome.
If such cooperation is of interest, please indicate your experience with Next.js and conceptually (briefly 2-3 sentences, without code) in your proposal (bid), as well as describe how you would solve the problem of making frontend requests to an external server that requires an API KEY for authorization in the request, so that this API KEY is never accessible/transmitted in the user's browser? How would you implement data filtering according to the user's request in the proposed solution?
Applications 1
-
890 6 0 Hello,
* Regarding the technologies you mentioned: I have experience with everything except react-table.
* The screenshot doesn't look complicated. Everything can be done. Only the desktop version? The screenshot has an "add service item" button, but there is no "remove" ;)
* Regarding the requirements from the section "The ideal candidate will be": everything is fine there. To get feedback, you should say thank you.
https://github.com/ZuBB
There were a few projects based on next. 2 large/complex ones. The rest are simple. In total, about 2.5 years.
…
Regarding your question: if a token is required for the request, then the request needs to be made on the backend. Moreover, the 3rd party service may have CORS restrictions. Judging by the fact that the user can additionally "filter" the results of the requests, this means it will happen upon loading the page, so the only solution is API Routes in Next.
-
1447 20 1 Good evening,
I am an experienced Next.js developer with over 4 years of experience, an impressive portfolio, and a desire to achieve quality results quickly and accurately. I have reviewed your task and can execute it efficiently and effectively, as I am interested in long-term collaboration and exploring new functionalities in Next.js. The problem can be solved by making a request to the backend part of Next.js (fullstack framework), and then taking the API key from .env on the backend (it is advisable to do this) and making a request to a second server. This can be implemented by creating a backend endpoint on Next.js or by writing a server function.
Portfolio
Freelancehunt
I offer a full range of services to make your project successful and easy to develop further. My task is to ensure quality development that not only meets your requirements but also exceeds expectations. I handle everything from development and testing to deploying all necessary components. You will receive a turnkey project, and you won't need to look for additional specialists.
… Moreover, I provide full support at every stage. Together with you, we will discuss all important aspects, and I will help you think through the logic and functionality of your project to make it user-friendly and intuitive.
By collaborating with me, you gain not just a developer but a reliable partner who is invested in your success. Ready to create something special together? Let's discuss your project in more detail!
My task is to provide reliable support throughout the entire project and after its completion. Rest assured that I am always available, ready to answer your questions and solve any tasks in real-time.
I am open to new exciting projects and ready to contribute to their successful implementation. I look forward to the opportunity to discuss the details and start our collaboration.
-
285 Good day. The task is clear. I work with next.js, in forms I used shadcn/cli, react-hook-forms, and a lot of other things.
-
31 Good day!
My name is Andriy. I am very interested in your project and ready to complete it. I can send my work lists and CV in a private message.
-
15075 32 0 1 Good day!
My name is Valentin, and I represent Arctic Web Agency. We are a team of experienced web developers specializing in creating modern and effective web solutions for businesses. I can provide examples of our similar work in personal messages. We are ready to take your project to work!
Sincerely,
Arctic Web Team
Freelancehunt
-
530 4 0 Hello!
I am very interested in your project. I am ready to help. 4 years of experience with Next.js
My GitHub: https://github.com/virus231
LinkedIn: https://www.linkedin.com/in/vladyslav-prodan-4865891a0/
Rate per hour: 450 UAH.
My works:
1. https://churchonline.com.ua/
… 2. https://app.dovira.uk/en/videos/military
3. https://talentvisa.co.uk/
4. https://numfin.com/
1. Use of server functions/actions in Next.js
2. Data filtering on the server. Filtering can be done in server actions. Add a store for these filters and then pass them to the API.
Feel free to reach out!
-
9004 69 0 Good day.
I started working with Next 3 years ago, from version 12, and now I am improving my knowledge with version 14.
Ideally, it would also be good to use Tailwind - it will help to develop the layout faster.
1) use of server components
2) we pass filters in the query, then through props (params) we get these values and call the API with these values
Current freelance projects in the category Javascript and Typescript
Development of an interactive Palworld map for the websiteWe need to develop an interactive map for Palworld based on the example: https://palworld.gg/map We need not just a static image, but a full-fledged interactive map where users can view locations, toggle object categories on/off, search for specific points, and interact with… HTML & CSS, Javascript and Typescript ∙ 8 hours 52 minutes back ∙ 15 proposals |
Development of the AM Mobility platform (car service, parking, insurance, car rental)
5786 USD
We are looking for a team or an experienced Full Stack developer to create the MVP of the AM Mobility platform. AM Mobility is a unified digital ecosystem for motorists, combining in one application and web platform: parking; car service; tire fitting; car wash; car rental;… Javascript and Typescript, Web Programming ∙ 5 days 15 hours back ∙ 114 proposals |
Gsap animations
22 USD
Good day. Corrections need to be made in the current project. A specialist is needed who works well with gsap/lenis. Animation of cards needs to be done. Detailed specifications here:… Javascript and Typescript, Web Programming ∙ 5 days 21 hours back ∙ 21 proposals |
I am looking for a mentor with Claude Code to launch a web project from scratch.Brief about the task: I am a beginner with no programming experience. I have a ready specification for website development (42 pages, Next.js, PostgreSQL). I want to implement it myself using Claude Code - I need a specialist who will set up the environment and teach me how to… Javascript and Typescript, Tuition ∙ 7 days 20 hours back ∙ 20 proposals |
Website design updateIt is necessary to update the design of the existing website using HTML, CSS, JS: refresh the appearance, make it modern and responsive for mobile devices. Smooth animations and interactive elements need to be added. HTML & CSS, Javascript and Typescript ∙ 8 days 13 hours back ∙ 97 proposals |