PromptBase
Upgrade
Close icon
General
Home
Marketplace
Create
Hire
Login
Chat
Sell
Explore

Prompt Details

Model
Chat - GPT-4 (gpt-4)
Token size
3,020 ($0.09060 / call)
Example input
I want you to act as a Senior Frontend developer. I will describe a project details you will code project with this tools: Create React App, 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”
Example output
Sure, here's the code for your "Pokemon App" using Create React App, yarn, Ant Design, List, Redux Toolkit, createSlice, thunk, and axios, merged into a single index.js file: import React, { useEffect } from 'react'; import ReactDOM from 'react-dom'; import { configureStore, createSlice, createAsyncThunk, Provider } from '@reduxjs/toolkit'; import axios from 'axios'; import { List, Avatar, Spin } from 'antd'; import 'antd/dist/antd.css'; const initialState = { pokemonList: [], loading: false, error: null, }; const fetchPokemons = createAsyncThunk('pokemon/fetchPokemons', async () => { const response = await axios.get('https://pokeapi.co/api/v2/pokemon?limit=10'); return response.data.results; }); const pokemonSlice = createSlice({ name: 'pokemon', initialState, reducers: {}, extraReducers: (builder) => { builder .addCase(fetchPokemons.pending, (state) => { state.loading = true; }) .addCase(fetchPokemons.fulfilled, (state, action) => { state.loading = false; state.pokemonList = action.payload; }) .addCase(fetchPokemons.rejected, (state, action) => { state.loading = false; state.error = action.error.message; }); }, }); const store = configureStore({ reducer: { pokemon: pokemonSlice.reducer, }, }); const App = () => { const { pokemonList, loading, error } = store.getState().pokemon; useEffect(() => { store.dispatch(fetchPokemons()); }, []); return ( <div> <h1>Pokemon List</h1> {loading ? ( <Spin size="large" /> ) : error ? ( <p>Error: {error}</p> ) : ( <List itemLayout="horizontal" dataSource={pokemonList} renderItem={(pokemon) => ( <List.Item> <List.Item.Meta avatar={<Avatar src={`https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/${pokemon.url.split('/').slice(-2, -1)}.png`} />} title={<a href="#">{pokemon.name}</a>} /> </List.Item> )} /> )} </div> ); }; ReactDOM.render( <Provider store={store}> <App /> </Provider>, document.getElementById('root') ); Please make sure to set up your Create React App project, install the required packages (yarn add axios @reduxjs/toolkit react-redux antd), and replace the content of your src/index.js file with this code. Don't forget to add your project's styling and other necessary configurations.
🤖 GPT

Advance Chat Gpt4 Prompts For Coding

Add to Cart
Instant accessInstant access
Usage rightsCommercial use
Money-back guaranteeMoney‑back
By purchasing this prompt, you agree to our terms of service
GPT-4
Tested icon
Guide icon
Free credits icon
🚀 Elevate Your ChatGPT Skills with Advanced Coding Prompts! 🚀 Are you ready to take your ChatGPT development to the next level? Unlock the full potential of this powerful AI model with our advanced coding prompts! Whether you're a seasoned AI developer or just starting out, our prompts are designed to challenge your skills, spark creativity, and help you master ChatGPT like never before.
...more
Added over 1 month ago
Report
Browse Marketplace