How I Created ‘My Super Story Chef’ in 7 Days Using ChatGPT: A Beginner’s Journey
## Introduction
As a dad of two wonderful kids, my nightly ritual includes reading them a story before bed. One evening, after running out of new stories to tell, I had an idea: why not use technology to create something special just for them? That’s when my four-year-old son suggested the name “My Super Story Chef,” and my daughter challenged me to complete it within seven days. The app should generate stories, include appealing images, and read them aloud. With zero coding experience, I turned to ChatGPT for help, and here’s how I did it.
## Day 1: Setting the Groundwork
### Idea and Name
My son’s creativity inspired the app’s name, “My Super Story Chef,” and my daughter’s challenge gave me a clear goal. I decided to use this opportunity to learn coding and create a meaningful tool for my kids.
### Research and Planning
I spent the first day researching how to build a web app and decided on using Django for the backend and React for the frontend. I also planned out the features:
- Story generation based on user inputs.
- Appealing images for each story.
- Text-to-speech functionality to read the stories aloud.
## Day 2: Setting Up the Development Environment
### Installing Necessary Tools
I set up my MacBook with Python and Node.js, following detailed instructions. Creating a virtual environment and installing Django and React was the next step.
```bash
# Setting up virtual environment
python3 -m venv venv
source venv/bin/activate
# Installing Django
pip install django djangorestframework
# Setting up React
npx create-react-app frontend
```
## Day 3: Building the Backend with Django
### Creating the Django Project
I created a Django project and set up a simple API for story generation.
```bash
django-admin startproject my_story_master
cd my_story_master
django-admin startapp api
```
### Defining Models and Serializers
I defined a simple model for stories and set up serializers to handle JSON data.
```python
# models.py
from django.db import models
class Story(models.Model):
characters = models.CharField(max_length=100)
genre = models.CharField(max_length=100)
duration = models.IntegerField()
tone = models.CharField(max_length=100)
language = models.CharField(max_length=100)
content = models.TextField()
```
## Day 4: Building the Frontend with React
### Creating the React App
I set up the React frontend and created a form to collect user inputs for story generation.
```bash
cd ..
npx create-react-app frontend
cd frontend
```
### Building the StoryGenerator Component
I built a component to handle form submissions and display the generated story.
```javascript
// StoryGenerator.js
import React, { useState } from ‘react’;
import axios from ‘axios’;
const StoryGenerator = () => {
const [formData, setFormData] = useState({
characters: ‘’,
genre: ‘’,
duration: ‘’,
tone: ‘’,
language: ‘’
});
const [story, setStory] = useState(‘’);
const handleChange = (e) => {
setFormData({
…formData,
[e.target.name]: e.target.value
});
};
const handleSubmit = async (e) => {
e.preventDefault();
try {
const response = await axios.post(‘/api/stories/’, formData);
setStory(response.data.content);
} catch (error) {
console.error(‘Error generating story:’, error);
}
};
return (
<div>
<h1>Story Generator</h1>
<form onSubmit={handleSubmit}>
<input type=”text” name=”characters” placeholder=”Characters” value={formData.characters} onChange={handleChange} />
<input type=”text” name=”genre” placeholder=”Genre” value={formData.genre} onChange={handleChange} />
<input type=”number” name=”duration” placeholder=”Duration (minutes)” value={formData.duration} onChange={handleChange} />
<input type=”text” name=”tone” placeholder=”Tone” value={formData.tone} onChange={handleChange} />
<input type=”text” name=”language” placeholder=”Language” value={formData.language} onChange={handleChange} />
<button type=”submit”>Generate Story</button>
</form>
{story && <div><h2>Generated Story</h2><p>{story}</p></div>}
</div>
);
};
export default StoryGenerator;
```
## Day 5: Integrating Backend and Frontend
### Connecting React to Django
I configured the frontend to communicate with the Django backend using Axios for HTTP requests.
```javascript
// In StoryGenerator.js
const handleSubmit = async (e) => {
e.preventDefault();
try {
const response = await axios.post(‘/api/stories/’, formData);
setStory(response.data.content);
} catch (error) {
console.error(‘Error generating story:’, error);
}
};
```
### Testing the Integration
I tested the form by running both the Django and React servers and ensuring that the stories were generated and displayed correctly.
## Day 6: Adding Text-to-Speech and Images
### Text-to-Speech Integration
I used the Web Speech API to read the generated stories aloud.
```javascript
// In StoryGenerator.js
const readStory = () => {
const utterance = new SpeechSynthesisUtterance(story);
speechSynthesis.speak(utterance);
};
// In the return statement
<button onClick={readStory}>Read Story Aloud</button>
```
### Adding Images
I used placeholder images for the initial version, but plan to integrate dynamic image generation in the future.
## Day 7: Final Touches and Deployment
### Styling the App
I added some basic CSS to make the app look appealing for kids.
```css
/* In App.css */
body {
font-family: Arial, sans-serif;
background-color: #f0f8ff;
text-align: center;
padding: 20px;
}
input, button {
margin: 10px;
padding: 10px;
font-size: 16px;
}
h1, h2 {
color: #333;
}
```
### Deployment
I deployed the app using Heroku for the backend and Netlify for the frontend, making it accessible online for my kids.
## Conclusion
Creating “My Super Story Chef” was a rewarding journey. In just seven days, with no prior coding experience, I was able to build a functional web app that delights my children. ChatGPT guided me through every step, turning a daunting task into an achievable goal. Now, bedtime stories are more magical than ever, and my kids love it!
If you’re a parent or a beginner looking to create something special, don’t hesitate to dive in. With the right tools and determination, anything is possible.
— -
I hope this inspires you to take on your own tech challenges. Feel free to share your experiences or ask questions in the comments!
*Happy storytelling!*
