7 tools to code your first project in a week.🚨 Alert: this story from newbie to newbies 😂
Tags: beginners, javascript, opensource, tooling
Published: 2023-06-19 16:19:13

You wanna start coding? You did first attempts but did not launch your project yet.

Welcome, my similar mind. This article than can be for you.


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ct7f7d8nswov4yn1jzav.gif)


## What you will learn here?

I will share with you 7 free tools I used to code my first project.

Which got viral and got many awesome users.

Thank you all who tested it, YOU ROCK 🤘 

This is the project- Linkedin Post Generator https://github.com/shnai0/linkedin-post-generator 

It is an Open Source. So you can start building one top of it. 

If you interested to learn more, check my other article there all details
„ [How I built my first Open Source project with ChatGPT and Next.js. 10k users in 24 hours 🤯](https://dev.to/shnai0/how-i-build-my-first-open-source-project-with-chatgpt-and-nextjs-10k-users-in-24-hours-2m7n)“


## 7 tools which helped me to code it in 1 week  

### 1. Visual Studio Code by Microsoft
This is a code editor. Which I had on my computer. But you easily download it from website. 

Install here (https://code.visualstudio.com


![Visual code studio](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/dvwnfcevnggr9kzftbly.png)


### 2. tea.xyz

This is a package manager from creator of Homebrew. I needed to install it, that it runs on my computer.

Good news you need to do it only once. 

![TEA website image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7sql3gjq794k99c6sre6.png)

After if you start the new project, tea will do it on the back and install necessary dependencies for you to code. 

It will take care of installing node, npm, vercel and any other packages you may need for development.
Just type the command and the package becomes available - even if you didn't install it before.

Here how to install it: 

```
sh <(curl https://tea.xyz)

# --- OR ---
# using brew
brew install tea
```

TEA documentation https://docs.tea.xyz/getting-started/install-tea 

As I got that, your environments coding will not work if you not installing all necessary packages. 

So all packages for installation of components to work inside my developer environment. (Dont ask more details on it:) 😁


### 3. GitHub

I recovered my long existing but not active GitHub account. 

GitHub was needed to find open source projects and copy them in my visual studio. 

![GitHub Website](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/i34dc1fnqea42u24gf1v.png)

When I found the Open Source projects. 

I actually just pressed download the zip and had it on my computer. So I did not copy repository.

And then I did in my visual studio. 

```
npm install 
```

Than GitHub was also needed to push the project. So I created the separate repository there.

#### Create new repository on GitHub 

```
$ git remote add origin https://github.com/shnai0/linkedin-post-generator.git
git branch -M main
git push -u origin main
```

#### Push the updates there

```
git add .

git commit -m “fix type”

git push
```

### 4. ChatGPT and OpenAI

So ChatGPT I used from the first moment to ask questions. Which commands to run to copy open source project?

![Open AI image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/i2wdcwj8gnl8k040lrts.png)


Would I be able to build the project without it so fast? No.

I asked ChatGPT to explain code, change code, solve bugs and just code smth for me. 

So basically, as soon as you go to copy the Open Source projects on GitHub, I actively used this one.

I also used Open AI API. As a project was AI generator , you need in order for it to work, create your own env.file and copy API Key inside of it. 

So create account on Open AI API https://openai.com/blog/openai-api


### 5. Tailwind UI
This one is essential for editing the components of your front end. You can just search there directly for what you want to change and see how it looks like. 

![Tailwind UI website](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ixmqnh1sxtaz08refd2u.png)


They have website with all this components, if you need it you can use it.
https://tailwindui.com

Though you can take them from  there open source projects open source. 
https://github.com/tailwindlabs/tailwindcss

You dont need to install Tailwind if you use OpenSource project. Just copy it is already there.

### 6. Vercel
Time to deploy. 

This one was super helpful. As it is help you in one click host you project and check all errors.

![Vercel website](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/m2jwf0ljoxkoindygeye.png)

So, steps are:

1. Create account via GitHub
2. connect to GitHub project 

So every time you will push smth it will go directly to Vercel and Vercel shows you if there are errors or project automatically hosted.

3. Push 

If there are many errors use command to first eliminate errors.

```
npm run build
```

### 7.Plausible Analytics
For analytics I used Plausible. I mean you can use Google Analytics. But I think you definitely need one, it is so crucial to see how what you build is used.

![Plausible analytics](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/wq345dm0ru1afusxv9fe.png)

## Recommendations:
💡 Starts small
💡 Check existing open source projects
💡 Ask help from friends for initial setup
💡 Ask ChatGPT everything you don't get 
💡 Document each step


## Hit me with a star

I am building new mirco-projects and grow Papermark.io - open source document insfrastrcute. 

[Place to leave your precious stars ⭐️](https://github.com/mfts/papermark)


![Stars hit](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4urjoj6c9w5eui2887z1.gif)




Share with me your developer journey:) Happy to meet more exciting friends here.

Here my [Twitter ](https://twitter.com/shnai0)for new [projects ](https://linktr.ee/shnai
)update