PromptBase
🤖 GPT
🚀 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
$5.99
After purchasing, you will gain access to the prompt file which you can use with GPT or the app builder. You'll receive 20 free generation credits with this purchase. By purchasing this prompt, you agree to our terms of service.
Over 1 month ago
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.