DEV Community

Birasa Divine
Birasa Divine

Posted on

🚀 Kicking Off My Project: What I’ve Learned and the Tools Guiding Me So Far

#webdev #programming #javascript #beginners

Over the past few weeks, I’ve been working on something exciting; I was setting up the foundation for an app that helps reduce food waste by connecting people with food that's about to expire and selling it at a lower price. In this post, I’d love to share what I’ve learned, the tools I’ve discovered, and how they'll help me continue growing as a developer.

🧱 Getting Started the Right Way
When you're starting a new project, it can be tempting to jump straight into coding. But I learned that taking the time to set things up properly can save a lot of headaches later. For this project, I chose a tech stack that’s popular and powerful: React, TypeScript, and Vite.

  • React helps build user interfaces quickly and efficiently.
  • TypeScript catches errors early by adding type safety to JavaScript.
  • Vite is a fast build tool that makes development smoother.

Alongside these, I also added tools like ESLint and Prettier. ESLint checks my code for errors, and Prettier makes sure everything is formatted nicely.

🤖 Automating for Better Code
One of the biggest lessons I’ve learned is how useful automation can be. I added Husky and lint-staged to my project. These tools automatically run checks every time I try to make a commit.

npm run build
npx lint-staged
npm run type:check
Enter fullscreen mode Exit fullscreen mode

This helps catch mistakes early before the code is pushed to GitHub or shared with others.
It felt a bit complex at first, but once I got it working, I saw how much time and trouble it can save in the long run.
🌱 What I’ve Learned So Far
This setup process has taught me a lot. For example:
I learned how to resolve merge conflicts, especially in files like package.json, which can be tricky when multiple people work on the same project.
I now understand how helpful tools like Prettier, ESLint, and Husky can be to keep code clean and organized.
Prettier:

{
  "useTabs": true,
  "jsxSingleQuote": false,
  "tabWidth": 2,
  "arrowParens": "avoid",
  "singleQuote": true
}
Enter fullscreen mode Exit fullscreen mode

Eslint:

import js from "@eslint/js";
import globals from "globals";
import tseslint from "typescript-eslint";
import pluginReact from "eslint-plugin-react";
import { defineConfig } from "eslint/config";


export default defineConfig([
  { files: ["**/*.{js,mjs,cjs,ts,jsx,tsx}"], plugins: { js }, extends: ["js/recommended"] },
  { files: ["**/*.{js,mjs,cjs,ts,jsx,tsx}"], languageOptions: { globals: globals.browser } },
  tseslint.configs.recommended,
  pluginReact.configs.flat.recommended,
  {
    rules: {
      'react/react-in-jsx-scope': 'off',
    },  
  }
]);
Enter fullscreen mode Exit fullscreen mode

I improved my Git skills, especially things like branching, committing with clear messages, stashing changes, and rebasing.

🔧 Tools That Will Help Me Move Forward
Now that my project is set up, here are the tools I’ll be relying on as I continue building:
Husky: Makes sure all code changes are checked before being saved.
Prettier + ESLint: Keeps my code readable and bug-free.
Vite: Speeds up development and makes testing my code faster.

If you're just starting out on your own project, my advice is: take the time to learn these tools. They may seem small, but they make a big difference. And don't be afraid to break things, that’s often where the best learning happens.
Thanks for reading! I’ll be sharing more updates as this journey continues. Feel free to connect with me or share your thoughts; I’d love to hear how others are setting up their projects, too.

Top comments (0)