PromptBase
🤖 GPT
Are you ready to code like a Senior Frontend Developer? Create your App using React, Ant Design, and more with just one index.js file!
If you are looking to improve your coding skills and learn how to build practical projects with some of the most popular front-end development tools, this prompt is the perfect fit for you. By taking on the challenge of building a Create React App with Ant Design, List, Redux Toolkit, createSlice, thunk, and axios, you will gain hands-on experience with cutting-edge tools and techniques that will help you stand out as a top-notch front-end developer. Plus, by merging all the necessary files into a single index.js file, you will learn how to keep your code organized and easy to maintain. So why wait? Take on this prompt today and level up your front-end development skills!
...more
$4.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-3.5 (gpt-3.5-turbo)
Token size
958 ($0.00190 / call)
Example input
Create Pokemon App that lists pokemons with images that come from PokeAPI sprites endpoint.
Example output
import React from 'react';
import { render } from 'react-dom';
import { createStore, applyMiddleware } from 'redux';
import { Provider } from 'react-redux';
import thunk from 'redux-thunk';
import { createSlice } from 'redux-toolkit';
import axios from 'axios';
import { List, Typography } from 'antd';
const initialState = {
pokemons: [],
loading: false,
error: null,
};
const pokemonsSlice = createSlice({
name: 'pokemons',
initialState,
reducers: {
fetchPokemonsStart(state) {
state.loading = true;
},
fetchPokemonsSuccess(state, action) {
state.loading = false;
state.pokemons = action.payload;
},
fetchPokemonsError(state, action) {
state.loading = false;
state.error = action.payload;
},
},
});
const {
fetchPokemonsStart,
fetchPokemonsSuccess,
fetchPokemonsError,
} = pokemonsSlice.actions;
const fetchPokemons = () => async (dispatch) => {
try {
dispatch(fetchPokemonsStart());
const response = await axios.get('https://pokeapi.co/api/v2/pokemon?limit=151');
const pokemons = response.data.results.map((pokemon, index) => ({
...pokemon,
id: index + 1,
image: `https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/${index +
1}.png`,
}));
dispatch(fetchPokemonsSuccess(pokemons));
} catch (err) {
dispatch(fetchPokemonsError(err.message));
}
};
const store = createStore(pokemonsSlice.reducer, applyMiddleware(thunk));
const App = () => {
const { pokemons, loading, error } = store.getState();
React.useEffect(() => {
store.dispatch(fetchPokemons());
}, []);
if (loading) return <div>Loading...</div>;
if (error) return <div>{error}</div>;
return (
<List
itemLayout="horizontal"
dataSource={pokemons}
renderItem={(pokemon) => (
<List.Item>
<List.Item.Meta
avatar={<img src={pokemon.image} alt={pokemon.name} />}
title={<Typography.Text strong>{pokemon.name}</Typography.Text>}
/>
</List.Item>
)}
/>
);
};
render(
<Provider store={store}>
<App />
</Provider>,
document.getElementById('root')
);