DEV Community

Cover image for 7 tools to code your first project in a week.🚨 Alert: this story from newbie to newbies πŸ˜‚
Iuliia Shnai
Iuliia Shnai

Posted on

7 tools to code your first project in a week.🚨 Alert: this story from newbie to newbies πŸ˜‚

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

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 πŸ€―β€œ

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

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

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
Enter fullscreen mode Exit fullscreen mode

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

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 
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

Push the updates there

git add .

git commit -m β€œfix type”

git push
Enter fullscreen mode Exit fullscreen mode

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

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

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

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.

  1. Push

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

npm run build
Enter fullscreen mode Exit fullscreen mode

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

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 ⭐️

Stars hit

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

Here my Twitter for new projects update

Top comments (15)

Collapse
 
mellen profile image
Matt Ellen-Tsivintzeli

That's an interesting workflow.

Do you find you have learnt about how your code works from having chatGPT generate it?

Why did you decide to download source code in a zip file rather than clone the repository?

Collapse
 
shnai0 profile image
Iuliia Shnai

Yes definitely learning from generated code.
As smth does not work and you start diving deeper.

I understand 0 at the begging and now already have some idea on structures and variables.

Zip just because I did not know:) now I am cloning already.

Also I use zip because I combined two projects open source in one. So it seemed more logical, I know no logic…

Collapse
 
freddyhm profile image
Freddy Hidalgo-Monchez • Edited

Really great stuff. I think your fearlessness is what stands out the most for me. Sometimes I find it hard to motivate new team members to just get in there and try stuff without questioning themselves so much. What makes you keep going? Magical secret confidence potion πŸ˜› ?

Collapse
 
shnai0 profile image
Iuliia Shnai

Hi Freddy ! Awesome question, it is some inner power in me:))

Regarding case your describe, I am thinking that leader of the team need to find what personally motivate team members. And gurantee that they can make mistakes, and there is no problem with it.

So for example, you want team member build cool micro-project for bring more traffic to the company main product/service. It is smth completely new for the team member. But if they attempt they should get special credit for it, and if it does not work time which were spend will not be smth unvaluable.

Just some thoughts:)) Obviously it will not work for everyone, as it is risk and new responsibility, and in some environments people tend to avoid these things.

Collapse
 
juanfrank77 profile image
Juan F Gonzalez

Very friendly and well written article.

Collapse
 
shnai0 profile image
Iuliia Shnai

Thanks Juan!

Collapse
 
juanfrank77 profile image
Juan F Gonzalez

Crazy to find you here, Iuliia!
Last time I came across something from you was, marbleflows (I think that was the name?) on AppSumo.

Thread Thread
 
shnai0 profile image
Iuliia Shnai

Wow! Really ?

Yes, I build the company and product MarbleFlows and we launched there.

Haha nice

Thread Thread
 
juanfrank77 profile image
Juan F Gonzalez

Cool, I did remember the name. πŸ˜†

What a small world haha.

Thread Thread
 
shnai0 profile image
Iuliia Shnai

So true :)

Collapse
 
villelmo profile image
William Torrez • Edited

Why i must use an IDE, ChatGPT or a framework even the cloud for develop a project?.
When i must use an IDE, ChatGPT or a framework even the cloud for develop a project?.

I use VIM, GCC, GDB and Valgrind for programming.

Can i use this tools for develop a project?

Collapse
 
shnai0 profile image
Iuliia Shnai

Looks like you know what you are doing .

You can use any other text editor. I just use VsCode

After googling Valgrind I saw it is for analysis tools, I am not sure how it can be helpful for this specific project:) But I am sure for ther projects.

Collapse
 
kumarkalyan profile image
Kumar Kalyan

These resources are great

Collapse
 
shnai0 profile image
Iuliia Shnai

Thanks Kumar! Glad that it can be helpful!

Collapse
 
akhtargul profile image
AkhtarGul

Provide informative data