Senior Frontend Developer

CategoryCoding
Authorozcanzaferayan
LicenseMIT
Rating4.40/5
Uses14.5K

What it does

Rapidly prototype React frontends by generating production-ready code using a specific, modern tech stack. It leverages Vite for build tooling, Ant Design for a polished UI, and Redux Toolkit for predictable state management. This is particularly useful when you need a functional "proof of concept" or a skeleton application without spending hours setting up boilerplate, folder structures, and API integration layers. By consolidating the output into a single file, it eliminates the friction of managing multiple files during the initial exploration phase, allowing you to verify logic and layout instantly before refactoring into a scalable directory structure.

Use cases

  • Rapid Prototyping: Quickly building a data-driven dashboard to show stakeholders how an API integration will look and feel.
  • UI Component Testing: Testing how specific Ant Design components behave with real asynchronous data from a public API.
  • State Management Validation: Verifying that a complex Redux slice and thunk logic work as intended before implementing them in a large-scale project.
  • Technical Demos: Creating a standalone, single-file demo of a frontend feature to share with other developers for quick review.

How to use

Provide the AI with your project requirements, desired features, and any specific API endpoints you need to integrate. The AI will return a consolidated index.js containing the Redux store, slices, and React components.
text
I want you to act as a Senior Frontend developer. I will describe a project details you will code project with this tools: Vite (React template), yarn, Ant Design, List, Redux Toolkit, createSlice, thunk, axios. You should merge files in single index.js file and nothing else. Do not write explanations. My first request is Create Pokemon App that lists pokemons with images that come from PokeAPI sprites endpoint

Tips

  • Be Specific with Data: If you are using a custom API, provide the exact JSON structure or endpoint URLs to ensure the Redux thunks are mapped correctly.
  • Define UI Requirements: Mention specific Ant Design components (e.g., "use a Table instead of a List") to get a more precise layout.
  • Request Iterations: Since the output is a single file, you can easily ask for updates like "Add a search bar to filter the list" and replace the entire file content.
  • Specify State Needs: Tell the AI exactly what needs to be stored in the Redux state to avoid unnecessary complexity.

Notes

  • Refactoring Required: Single-file outputs are great for speed but not for production; you will need to split the code into separate components and slices for a real project.
  • Dependency Installation: You must manually install the required packages (antd, @reduxjs/toolkit, react-redux, axios) via yarn/npm for the code to run.
  • Bundle Size: As the project grows, the single-file approach becomes harder to manage and may hit token limits for very large applications.
Join our Telegram