Have you ever thought about creating a reusable project template to streamline your development process and make it easier to start new projects? That's exactly what I did with the help of ChatGPT, an AI language model by OpenAI. In this article, I'll share my journey of using ChatGPT to create a reusable project that integrates React, Node.js, and Chakra-UI. I'll also provide you with example prompts I used when discussing with ChatGPT, as well as code snippets that helped me get started. By the end of this article, you'll have a better understanding of how to leverage ChatGPT to create your own reusable projects.

How did I come up with this idea?

I always wanted to become better at coding and take the leap into working on backend and complex systems. Having access to the codebase and the trust of the CTO at my job at Trality.com helped a lot. I could dive right into it and start learning by turning ideas into working product. It started with the simple thought: ”I could now create a ticket for the FE dev to change these 10 points in our terms & conditions... or I could do it myself. It's probably even quicker than writing a ticket.” This later evolved into my working on more and more complex features - and what I started liking about it is that I learned how everything worked together in this complex system, from API, to component system, database, and frontend. Never before had I had the opportunity to put hands on such a sophisticated project.This spawned the idea that I wanted to learn to build such a system up from scratch myself.

The Initial Query to ChatGPT:

I knew what my rough end result was going to look like:• A running MongoDB instance• At least 1 working API to generate a list, and individual items• At least 1 working page to show the list and navigate to individual items• Frontend fed by Chakra-UI components• Component stories on StorybookThe journey started with a simple ChatGPT query:

I want to create a reusable project that uses react and nodejs backend with chakra-ui fully implemented that I can then extend to start any project I'd like. Where should I get started first?

It gave me 5 rough steps on how to get started:

Step 1: Setting Up the Project Structure

Step 2: Initializing Frontend and Backend Projects

Step 3: Configuring the Backend and Database

Step 4: Creating the API Endpoints

Step 5: Installing and integrating storybook

While ChatGPT provided me with the commands for each step, it was not detailed enough. So for each step I would initiate a new ChatGPT conversation, and started toiling away. Obviously I did not finish this in one go, so whenever I picked up this project again, I could simply go back to my ChatGPT conversations and continue asking questions. When I got bored of working on backend too much, I switched context by switching to the Frontend conversation with ChatGPT. This way, even someone who is self-taught in coding can start implementing complex systems quickly.

If you think a Github project like this could be useful to you, you can simply clone it, or try it out first:

Github repo is here: https://github.com/laurinstahl/reusable-project/