DEV Community

Cover image for How to Start a Front Software Project from Scratch (in less than 5 minutes)
Naur
Naur

Posted on

How to Start a Front Software Project from Scratch (in less than 5 minutes)

#frontend #beginners #webdev #reactjsdevelopment

A quick and practical guide to starting your first frontend web project with the main tools and without complications.

Prerequisites

Before getting started, it's important to have some basic knowledge:

  1. 🧩 Programming Logic
  2. 📦 Package Managers (NPM, Yarn, or PNPM)
  3. 🧭 Git and GitHub (for versioning and code hosting)
  4. 🎨 CSS Libraries (such as Tailwind, Material UI)
  5. 🗂️ Project Structure (understanding folders like /src and files like package.json)

📍 In this guide, we'll focus on frontend web development using React + TypeScript and Vite as a startup tool.

Choosing Technologies

The first crucial decision is choosing the project type and the appropriate technologies, since the choice of project type can indirectly define some of the technologies that will be used.

Project Type Recommended Technology
Simple Landing Page HTML, CSS, JavaScript
Website with Login/Components React, Vue
Complex Application React + TypeScript, Vuejs, Nuxt, Next

For this tutorial, we chose React because of its gentle learning curve.

🛠️ Managing Packages in Node.js

Node Package Manager

Node.js uses a package manager called NPM (Node Package Manager).

It is responsible for installing, updating, and removing libraries used by your project. These libraries (also called dependencies) are listed in the package.json file.

NPM is automatically installed with Node.js and is one of the most important tools for any modern JavaScript or TypeScript project.

📦 Main NPM Commands

🧩 Action 💻 Command
Install a package npm install package-name
Uninstall a package npm uninstall package-name
Install development dependency npm install -D package-name
Check installed dependencies Check the package.json file

💡 Tips

  • NPM creates a folder called node_modules, where all installed packages are stored.
  • If you prefer, you can also use Yarn, an alternative to NPM with similar commands (e.g., yarn add, yarn remove, etc.).

Step 1 — Creating the repository on GitHub

Git & Github

I like to first create a repository on GitHub and clone it to my machine, as this makes it easier to version code directly in the project repository, both locally and remotely after using git commands.

  1. Access your GitHub Account and
  2. Create a new repository (public or private)
  3. Copy the repository's HTTPS link

In the explorer, clone the repository using the command:

git clone https://github.com/your-username/your-repository.git
Enter fullscreen mode Exit fullscreen mode

Then access the cloned repository.

Step 2 — Installing React with Vite

vite

Vite is a lightning-fast frontend build tool that powers the next generation of web applications.

Open the terminal inside your repository folder and run:

npm create vite
Enter fullscreen mode Exit fullscreen mode

This will download essential dependencies and libraries to start the project.

During the interactive setup, you can use the arrow keys to navigate and the keyboard to type in the terminal, for example:

  1. Enter/Set the project name
  2. Select React as the main library
  3. Choose TypeScript (TS) as the language (or JavaScript if you prefer)

Step 3 — Installing Dependencies

Dependencies are small pieces and snippets of code responsible for managing the application between high- and low-level modules, things that this blog won't delve into at this time.

Therefore, open the terminal in the project folder (project root) and run the following command to install these software dependencies for your project.

npm install
Enter fullscreen mode Exit fullscreen mode

Step 4 — Running the Project

To run the project, you need to check which scripts are provided in the package.json file. In this case, we're looking for the dev script.

The dev script makes the new application run, as if we were going to play it. Therefore, in your project's terminal in VScode (or any other IDE you're using), run the command

npm run dev
Enter fullscreen mode Exit fullscreen mode

And That's It!

  • Your project is running on localhost:5173 (Vite's default port).

Localhost means your project is running only with the files they already have or even the files you've written, but it's not yet online—that is, it exists only locally on your computer. Only you can access it.

Step 5 — Installing Additional Libraries (Tailwind CSS)

Tailwind

Tailwind its Rapidly build modern websites without ever leaving your HTML.

Tailwind is a famous CSS library widely used in frontend development due to its versatility and mobile-first foundation. This means that Tailwind's intention is to style the project responsively—in other words, to have a UI that works for desktops, tablets, and mobile platforms.

To install Tailwind CSS (example of an additional library):

in the terminal, at the project root:

npm install -D tailwindcss
Enter fullscreen mode Exit fullscreen mode

Furthermore, it's important to clarify that it's EXTREMELY necessary to read the libraries you want to include in your project, since code generated by Generative Artificial Intelligence tends to be poorly written and outdated.

Therefore, as a professional concerned with your work, it's also your job to read these important documents about the dependencies you want to have in your own project.

Furthermore, installation alone doesn't guarantee that the dependency is 100% working; it's also necessary to configure it, and these configurations are usually found in the first pages of the library and framework documentation.

Your package.json contains important scripts for running the project.

package.json

Package.json is an extremely important file for web projects, as it contains the main information about the system/project, such as name, version, repository, main dependencies, and scripts.

For example, within the "scripts" object, we have the following scripts:

"scripts": {
"dev": "vite",
"build": "tsc && vite build",
"preview": "vite preview"
 }
Enter fullscreen mode Exit fullscreen mode
  • npm run dev - Starts the development server
  • npm run build - Generates the production build
  • npm run preview - Views the production build

Created Project Structure 

your_project_name/
├── node_modules/ # Installed dependencies
├── public/ # Static files
├── src/
│ ├── assets/ # Images, fonts, etc.
│ ├── components/ # React Components
│ ├── App.tsx # Main Component
│ ├── main.tsx # Entry Point
│ └── index.css # Global Styles
├── index.html # Main HTML
├── package.json # Dependencies and Scripts
├── tsconfig.json # TypeScript Configuration
└── vite.config.ts # Vite Configuration
Enter fullscreen mode Exit fullscreen mode

💡 Important Tips

  • Always consult the official documentation
  • ChatGPT may display outdated and incorrect code.
  • Keep your package.json up to date
  • Use Git for version control from the start
  • No AI replaces the user manual**
  • Official documentation is always more reliable
  • Check dependencies in package.json after each installation

To recap what was done:

  1. ✅ Created repository on GitHub
  2. ✅ Cloned to your machine
  3. ✅ Initialized project with Vite + React + TypeScript (via NPM)
  4. ✅ Installed dependencies
  5. ✅ Ran the project locally
  6. ✅ Added Tailwind CSS (optional)

🔗 Useful Links

📚 React Documentation
⚡ Vite Documentation
🎨 Tailwind CSS Documentation

This guide was created based on practical development experience.

Author: Ruan Rickelme Ramos

💡 Remember: This is a guide for beginners who want to get started quickly.

As your project grows, explore more advanced concepts like routing, state management, and testing.

THANKKSS!!

Top comments (0)