[Storybook GPT] Set up project in Github Codespaces

After deciding what project to develop for the Github + DEV 2023 Hackathon, it is time to get to work.
As I said I will be using Github Codespaces, which allows me to spin up a fully configured development environment in the cloud. Not only does this save time and eliminates the need for local setup, but it also lets me work from any device with an internet connection - including my tablet. This will be especially helpful since I plan to work on the project while sitting in bed :).

In this post, I will show how I set up my project on GitHub Codespaces and started coding instantly.

Step 1 - Create a new codespace

After creating the repository, we need to click on the green Code button and switch to the Codespaces tab. This is where the magic happens. We have two options here:

• click on the + button and create a new codespace on main branch with the default options;
• click on the three dots button and select to create a new codespace with options;

I opted for the later and I changed the options as shown in the image bellow.

Once we click on the green Create codespace button, it takes less than one minute to set up a development environment that’s ready to use. I was also impressed to see that all my VSCode extensions were installed in the codespace automatically.

Step 2 - Set up the project

Now we need to set up the project. For this hackathon, I will use NextJS 13 with Typescript and Tailwind CSS. After running the following command in the terminal npx create-next-app@latest, this is how the codespace appears:

Now it's time to remove the default files and start working on the project.

Conclusion

GitHub Codespaces is a powerful tool that enables you to code from anywhere without setting up anything locally. You can create and customize codespaces for any project on GitHub and enjoy a fast and consistent development experience.