From Idea to App: Programming in Just 1 Hour with ChatGPT!

Table of Contents

1. Introduction
2. Building the Back-End
   1. Choosing a Database
   2. Setting Up the Server
3. Building the Front-End
   1. Creating Buttons
   2. Parsing and Randomly Choosing Workouts
4. Improving the Front-End Design
   1. Redesigning the JSON
   2. Updating the Parsing Function
   3. Styling the UI with CSS
5. Collaborating with Chat GPT for Better UI
6. Adding Finishing Touches
   1. Adding Emojis and Character to the UI
   2. Adding Animations to Buttons
   3. Customizing Background and Container
7. Conclusion

Building a Full Stack Workout Generator App with Chat GPT

Are You tired of spending hours searching through Google for information when building a project? With the help of Chat GPT, a powerful AI text model, you can access a wealth of knowledge by simply texting the AI. In this article, I will guide you through the process of building a full stack workout generator app using Chat GPT's assistance.

1. Introduction

The full stack workout generator app allows users to choose between push, pull, or leg workouts and provides detailed information along with a YouTube link for each workout. The app is built using React.js for the front-end and Node.js for the back-end.

2. Building the Back-End

2.1 Choosing a Database

To present the workout data in the browser, I needed a database in JSON format. With the help of Chat GPT, I generated the push, pull, and leg workouts in JSON format.

2.2 Setting Up the Server

To Create a local server, I used the Json server npm Package recommended by Chat GPT. This package allowed me to quickly create a REST API without the need for additional frameworks like Express.js.

3. Building the Front-End

3.1 Creating Buttons

Using Chat GPT, I asked for three buttons that make a GET request to the Json server for push, pull, or leg workouts. This simple setup provides the basic functionality of fetching data to the front-end.

3.2 Parsing and Randomly Choosing Workouts

To parse the JSON data and randomly select a push, pull, or leg workout, I again relied on Chat GPT's assistance. By following its recommended function, I was able to handle potential bugs and ensure the desired functionality.

4. Improving the Front-End Design

4.1 Redesigning the JSON

To enhance the app's structure, I requested Chat GPT to split the workouts by body part in the JSON. This modification required updating the parsing function accordingly.

4.2 Updating the Parsing Function

Chat GPT provided me with a parsing function that worked flawlessly, as it also used an example from a workout JSON. This ensured the accuracy and reliability of the function.

4.3 Styling the UI with CSS

As the UI looked plain, I decided to add CSS styles to make it more visually appealing. Although I only had basic CSS knowledge, Chat GPT was helpful in providing inspiration for animations and design.

5. Collaborating with Chat GPT for Better UI

Working closely with the Chat GPT team, I learned how to better communicate my requirements and optimize the AI's assistance. With each iteration, the AI improved its ability to rewrite my code and generate JSX Based on my previous requests.

6. Adding Finishing Touches

6.1 Adding Emojis and Character to the UI

To add more personality to the UI, I incorporated emojis in the title and made small tweaks to enhance the overall character of the app.

6.2 Adding Animations to Buttons

By asking Chat GPT for cool animations, I received a simple yet visually pleasing scaling animation for the buttons. This enhancement made the UI more engaging and less monotonous.

6.3 Customizing Background and Container

To further enhance the UI, I added a gym-themed background image and a white background for the container to improve text readability. Additionally, Chat GPT suggested a border animation for the buttons, giving them a touch of sophistication.

7. Conclusion

With the help of Chat GPT, I was able to quickly and easily build a full stack workout generator app. Despite my limited design skills, the collaboration with Chat GPT enabled me to create a functional and visually appealing UI. By leveraging the power of AI, developers can streamline their development process and focus on their Core skills.