You begin the dance.

"Here is my UserService.ts file," you type, pasting in 150 lines of code. The AI gives a generic summary. "Okay," you continue, "now here is the OrderController.ts that uses it." Another 200 lines go into the chat box. "And finally, here's the api-types.ts file with the data structures."

You've spent five minutes just setting the stage, and you haven't even asked your question yet. You feel less like a programmer and more like a human copy-paste machine.

If this feels familiar, it's because we've all been treating AI like a magic eight ball instead of what it really is: an infinitely fast, incredibly knowledgeable, but utterly amnesiac junior developer. Each time you open a new chat, you've hired a new intern who has no idea who you are, what your project does, or what you did five minutes ago.

The era of just "prompting" this intern is over. Welcome to the age of Context Engineering.

The Paradigm Shift: Your Intern Needs a Brain

A recent article from the brilliant minds at Anthropic (the creators of Claude) finally gave this concept a name. They explain that the real skill is no longer just finding the right words for a prompt, but "curating and maintaining the optimal set of tokens (information) during LLM inference."

In plain English? The AI's performance is directly tied to the quality of the "brain" you give it for a task.

This is critical because of something called "context rot." Like us, LLMs have a finite "attention budget." The more stuff you cram into their head at once (a huge prompt, long chat history, multiple files), the less attention they can pay to any single piece of it. They start to forget the instructions you gave them at the beginning.

So, the goal is to give the AI the smallest possible set of the most relevant information to get the job done right. After thousands of hours of integrating AI into my daily coding, I've learned that this "context curation" boils down to three simple principles.

The Role: Give Your Intern a Job Title

You would never tell a new hire, "Just do some stuff." You give them a role: "You're the front-end specialist," or "You're the database expert." You must do the same for your AI. Its entire perspective changes when it has a persona.

Bad example:

"Look at this SQL query and make it better."

Good example:

"You are a Senior PostgreSQL DBA with 20 years of experience specializing in query optimization for large-scale time-series data. Your task is to analyze the following query for performance bottlenecks. Rewrite it to be more efficient, and explain your changes by referencing index usage and execution plan improvements."

One is a vague request; the other is a professional assignment. The results you get will be worlds apart.

The Documents: Give Your Intern Access to the Repo

This is the biggest game-changer. An AI in a standard chat window is working in a vacuum. It doesn't know your codebase.

This is why context-aware tools are no longer a luxury; they are a necessity for any serious developer. Tools like Windsurf, Cursor, and Sourcegraph Cody are built for this. They plug directly into your IDE and use techniques like embeddings to create a vector representation of your entire codebase.

What does that mean? It means the AI has already "read" every file before you even ask a question.

I was recently debugging an issue where a user's permissions weren't updating correctly on the front end after their role was changed in the backend. This involved a journey through a NestJS controller, a Prisma service, a Next.js API route, and finally, a React component. In the "old world" (i.e., last year), that would have been 20 minutes of copy-pasting into ChatGPT.

Instead, I highlighted the four relevant files in my IDE and typed into Windsurf: "The user's role is updated in the database here, but the front-end component isn't reflecting the change on re-render. Walk me through the data flow and tell me where the state is getting lost."

Two minutes later, it had not only identified the stale state issue in my React hook but had also suggested using a specific library we were already using elsewhere in the project to fix it. It knew this because it had context.

That's the difference between a blind intern and one who has full access to your project's documentation and source code.

The Format: Give Your Intern a Template to Fill Out

If you need a specific output, don't describe it, show it. This technique, called "few-shot prompting," is the ultimate way to eliminate ambiguity.

Bad example:

"Generate some user data for my tests."

Good example:

"You are going to generate a JSON array of 10 user objects for a test database. You must follow this exact format and these rules.

Rules:

• id must be a UUIDv4.

• email must be a unique, realistic-looking email.

• membership must be one of these three values: 'free', 'premium', 'enterprise'.

Example of a single object:

{
  "id": "a1b2c3d4-e5f6-7890-1234-567890abcdef",
  "email": "example.user@email.com",
  "membership": "premium"
}

Now, generate the array of 10 objects."

You're not hoping for the right answer; you're guaranteeing it. I use this for everything: creating API documentation that matches my style, writing commit messages that follow the Conventional Commits standard, and scaffolding new components based on an existing one.

Beyond the Basics: Giving Your Intern a Long-Term Memory

The real magic happens when you chain these tasks together. The Anthropic team talks about techniques for "long-horizon tasks" complex jobs that require the AI to remember things from one step to the next.

Two techniques I now use daily are:

1. Structured Note-Taking: It's as simple as it sounds. I have my AI agent maintain a SCRATCHPAD.md or PLAN.md file in the project directory. Before it starts a complex task like a big refactor, its first instruction is to write out a step-by-step plan in that file. After each step, it updates the file, checking off what's done. If the process gets interrupted, it can just read the file to pick up exactly where it left off. It's a persistent memory.

2. Compaction: As the AI works, the conversation history (the context) gets cluttered. Compaction is like telling your intern, "Okay, before we move on, summarize the key decisions and unresolved issues from our last task into five bullet points." You then start the next task with that clean, dense summary instead of the entire messy history. The signal-to-noise ratio skyrockets.

This Is the New Skill Mastering context engineering changes your relationship with AI. It stops being a frustrating toy and becomes a genuine collaborator. A partner. It's the difference between hiring a new intern every five minutes and working with a junior developer who learns, remembers, and grows with your project. And that is becoming the single most valuable skill for any developer in the AI age.

Okay, You're Convinced. Now Let's Actually Do Context Engineering.

Let's move from the why to the how. This is my practical, no-fluff guide to integrating context engineering into your daily workflow.

Step 1: Choose Your Weapon (Your Context-Aware Toolkit)

First things first, you can't do this in a standard ChatGPT window. You need a tool that lives where your code lives: in your IDE. These tools are designed to read your entire codebase and feed it to the AI. Here are my favorites:

• Windsurf (formerly Codeium): This is my daily driver. It's a supercharged extension that you add to your existing IDE (VS Code, JetBrains, etc.). It excels at codebase-aware chat and a ridiculously good autocomplete. Choose this if: You love your current editor setup and want to add superpowers to it.

• Cursor: This is a complete, standalone IDE that's been forked from VS Code and rebuilt from the ground up for AI. The integration is seamless because the entire editor is the AI tool. Choose this if: You want the most tightly integrated experience possible and are open to adopting a new (but very familiar) editor.

• Sourcegraph Cody: Cody is an expert at understanding massive, complex codebases. It's built by a code search company, and it shows. It can pull context from your entire organization's code, not just what's on your local machine. Choose this if: You work in a large enterprise environment with many repositories and need the AI to understand cross-team dependencies.

Your First, Most Important Task: After you install one of these, it will ask to "index your project." Do not skip this. This is the step where the AI reads everything, your files, your dependencies, your folder structure, and builds its "brain." It can take a few minutes on a large project. Go get a coffee. Let it cook. This is the foundation for everything that follows.

Step 2: A Practical Workflow : The Multi-File Bug Hunt

Let's revisit that permissions bug I mentioned. Here's the play-by-play of how I used Windsurf to solve it.

The Scenario: A user's role is updated in the database, but their dashboard on the front end still shows the old, cached permissions.

My Old Process:

1. Read the backend controller code.

2. Read the service that talks to the database.

3. Read the API route in the front-end codebase.

4. Read the React component that displays the dashboard.

5. Swear, because I still can't see the issue.

6. Start copy-pasting all four files into ChatGPT and pray.

My New, Context-Engineered Process:

1. Gather the Evidence: Inside VS Code, I right-click on each of the four files involved (permissions.controller.ts, permissions.service.ts, useUserPermissions.ts, and Dashboard.tsx) and select "Add to Windsurf Chat." Now, the AI's context is surgically focused on only the relevant parts of the codebase.

2. Assign the Role & Task: My first prompt isn't "fix it." It's an investigation command:

   "You are a senior full-stack TypeScript developer. The files I've provided represent the flow for updating and displaying user permissions. A bug has been reported where the Dashboard.tsx component is showing stale data after the role is updated in the backend. Trace the data flow from the controller to the React hook. Explain where the caching is likely happening and why the front-end state isn't being revalidated."

3. Analyze the Output: Windsurf comes back and correctly identifies that the React Query hook (useUserPermissions.ts) has a staleTime set to 5 minutes, meaning it won't refetch the data from the API automatically within that window. The backend is working fine, but the front end is intentionally showing old data.

4. Iterate for a Solution: The bug is found, but now I need a fix. My follow-up prompt is:

   "You're right. Based on the code for the useUserPermissions hook, what's the best way to manually invalidate the query's cache from another component after the update action is successful? Show me the code I would need to add to the component that triggers the role change."

It then provides the exact queryClient.invalidateQueries(['userPermissions']) line I need, tailored to the key I was already using in my hook.

The entire process took three minutes. No copy-pasting. No explaining my file structure. Just a focused conversation with an expert who had already read all the relevant documents.

Step 3: A Second Workflow : Building a New Feature

Context engineering isn't just for bugs. It's even more powerful for creating new things that match the style of your existing code.

The Scenario: I need to build a new API endpoint, /users/{id}/summary, that returns a user's profile info and their last five login dates.

1. Find Your Template: I know I have another endpoint, /users/{id}/profile, that already does a good job of validation, error handling, and serialization.

2. The "Mirror" Prompt: I create a new empty file, user-summary.controller.ts. I then add both the new empty file and the existing user-profile.controller.ts to the AI chat context. My prompt is:

   "Using user-profile.controller.ts as a template for structure, style, and error handling, create the controller logic for the new user-summary.controller.ts file. The new endpoint is GET /users/{id}/summary. It needs to call two services: this.userService.findById(id) and this.authService.getLastFiveLogins(id). Combine the results into a single DTO and return it."

3. The Result: The AI generates the new controller, perfectly matching our project's coding style. It uses the right decorators, injects the correct services, and handles the UserNotFound error exactly like the other file does. It's not generic code; it's my code. 90% of the work is done in 30 seconds.

The Real Takeaway: It's a Habit, Not a Hack

This isn't about finding a single "god prompt" that solves all your problems. It's about fundamentally changing your daily habits.

• Before you write code, you gather context.

• Before you ask for a fix, you provide the evidence.

• Before you ask for a new feature, you show it an example.

You start thinking like an architect, deliberately providing your AI partner with the perfect briefing documents for every single task. When you make that shift, you'll stop fighting with your tools and start building with them.

That’s when it clicked: it’s not the learner that’s broken. It’s the roadmap.

The Comfort of Cookie-Cutter Roadmaps

When you’re starting out, a roadmap feels safe. It’s neat. Linear. Someone tells you: “Learn JavaScript, then React, then Node.” You print it out, highlight sections, and convince yourself that once you reach the end, you’ll be job-ready.

But here’s what really happens: halfway through React, you’re tangled in hooks, Redux, and jargon you don’t understand. Or you pick Python, grind through syntax exercises, and realize you still can’t automate a simple spreadsheet task.

I saw it over and over. Roadmaps feel like progress but they often skip the real work: projects, problem-solving, and context.

What I Learned from Mentoring 500+ Developers

I’ve mentored CS students, career changers in their 30s, and autodidacts teaching themselves after work. Everyone learns differently:

• A visual learner only grasped JavaScript after seeing flow diagrams.

• A hands-on tinkerer thrived by breaking things first, debugging, then reading docs.

• A career changer with kids had just 1 hour/day, they didn’t need 20 tools, they needed focus.

Generic roadmaps ignore all this. They treat everyone as if they learn the same way.

The Four Fatal Flaws of Generic Roadmaps

1. Too much theory upfront: Learners dive into closures before they’ve built a single DOM interaction.

2. No real-world context: You know Python syntax but can’t automate a task at work.

3. Zero personalization: Whether aiming for web dev, data science, or automation, the path is identical.

4. The project gap: Reading code ≠ building apps. Most quit here.

What Works Instead (The Lurnix Approach)

I changed my method:

• 7-Day Kickstart: Focus only on essentials : loops, functions, first app.

• Personalization: Our psychotype test tailors your learning. A fitness enthusiast built a workout tracker. A finance learner? An expense tracker.

• Guided, real projects: Python scripts, React apps, Node APIs.

• Community support: Fast answers, peer wins, steady motivation.

Why I Built Lurnix

After years of watching learners quit, I built Lurnix:

• 7-Day PDF Kickstart to build fundamentals quickly.

• 30-Day Personalized Roadmap aligned to your goals.

• Practical projects from day one.

• AI-powered app access combining editor + mentorship.

This transforms “I’ve read 20 tutorials” into “I built my first real app.”

The Bottom Line

Generic programming roadmaps fail because they ignore one truth: learning to code is personal. The best plan isn’t universal it’s yours.

If you’re tired of spinning in circles, try a smarter way. Lurnix isn’t another roadmap. It’s a compass.

Ready to stop following and start building? Join Lurnix and get your personalized path.

StackBlitz's Bolt.new is revolutionizing full-stack development in the browser. But one friction point remained: how could non-technical users like designers, PMs, or QA teams report issues without jumping through hoops?

The answer: bring issue reporting into the platform.

In this article, I’ll walk you through how I built a lightweight Node.js REST API that connects Bolt.new directly to GitHub enabling one-click issue reporting, even for non-developers.

The Problem: Silent Failures & Frustrated Users

Before this solution, feedback from non-technical users was inconsistent and fragmented. Most bugs or errors experienced by product stakeholders went unreported or were communicated informally. For example this user created a github account just for submit an issue an he left a long message about his problem without guidance.

This led to:

• A lack of visibility into recurring issues.

• Slower bug resolution.

• A hit to overall user trust and platform reliability.

The Solution: GitHub-Connected Issue Reporting API

I created a TypeScript-based Express API that:

• Accepts issue reports via a POST endpoint.

• Validates and structures user-submitted data.

• Authenticates via GitHub’s API using Octokit.

• Automatically creates detailed GitHub issues in real-time.

This solution empowers users to report directly from Bolt.new, no GitHub knowledge needed.

Under the Hood

This project was built with production-level tooling and quality standards in mind:

Key Features

• Zod for request validation (type-safe and runtime safe).

• Centralized logging and structured error handling.

• Environment variable validation to avoid silent config errors.

• Linting + formatting with ESLint, Prettier, Husky and lint-staged.

• Unit tests with Jest and integration tests using Supertest.

Endpoint Design & Expected Payload

POST /api/report

Request Body (JSON):

{
  "title": "Bug summary",
  "description": "Detailed user-provided description",
  "context": {
    "url": "Bolt.new session link",
    "errors": ["Error stack traces, if any"],
    "actions": ["User steps before the issue"]
  }
}

This payload is translated into a structured GitHub issue with embedded context, accelerating dev triage.

Evolution: Toward a Rich Feedback Interface

While the initial version of the API handled structured text input, the next step is to enrich the user feedback experience by integrating a lightweight markdown or WYSIWYG editor.

This enhancement would allow users to:

• Format their descriptions with headings, lists, or code blocks.

• Embed screenshots directly into the issue report (via base64 upload or image hosting).

• Provide clearer reproduction steps with visual support.

This evolution aligns with our goal of making technical feedback accessible and useful for both technical and non-technical contributors.

Tech Stack & Architecture

Why Node.js + Express?

• Fast to prototype.

• Native JSON support.

• Seamless GitHub API integration.

Why TypeScript?

• Strong typings for safer, more maintainable code.

• Helpful for team collaboration and future scaling.

Why Octokit?

• Official GitHub SDK.

• Simple authentication and repo interaction.

Project Structure:

bolt-issue-api/
├── src/
│   ├── controllers/reportController.ts
│   ├── routes/reportRoutes.ts
│   ├── services/githubService.ts
│   ├── middleware/
│   │   ├── errorHandler.ts
│   │   └── validate.ts
│   ├── config/index.ts
│   ├── schemas/reportSchema.ts
│   ├── utils/logger.ts
│   └── server.ts
├── tests/
│   ├── services/githubService.test.ts
│   ├── routes/reportRoutes.test.ts
│   ├── utils/logger.test.ts
│   └── middleware/errorHandler.test.ts
├── openapi.yaml
├── .env.example
├── .eslintrc.js
├── .prettierrc
├── .gitignore
├── jest.config.js
├── package.json
├── tsconfig.json
└── README.md

Results: What This Changed

With this integration:

• Users can now report bugs in 30 seconds or less.

• Devs get structured, actionable reports in GitHub.

• PMs and QA teams gain better visibility into platform issues.

This single API reduced debugging turnaround and improved our response time to user pain points dramatically.

Key ScreenShots

POST Request to submit an issue

Issues Page from Github

Issue created from api

Test Execution

Test Execution

Swagger Documentation

Conclusion

Bolt.new has been one of the most surprising tools in my ongoing comparison series on AI-powered developer platforms. Its browser-first, instant-on approach to fullstack development makes it an excellent playground for quick iterations.

But more importantly, it’s a powerful foundation to build upon. This user feedback API is a concrete example: it solves a real product need, integrates seamlessly into the Bolt.new workflow, and opens the door to more advanced extensions contextual chat, AI assistance, session tracking, and beyond.

As a developer and SaaS builder, I deeply believe in this approach: enhancing the tools we already use with integrated, UX-friendly layers that bring value to all roles not just engineers.

This API is a first brick. If it inspires you, feel free to fork it, extend it, or reach out to discuss it!

I co-wrote another article where we tested bolt.new on a real project with feedback on the advantages and limitations of the tool: read it here.

Relevant Links:

• Complete code on Github

• StackBlitz

• Bolt.new

• Bolt.new GitHub Issues

References & Resources

• GitHub REST API

• Octokit SDK

• Node.js

• TypeScript

• Express.js

Introduction

Les outils IA pour développeurs sont nombreux. Certains vous aident à écrire une fonction. D’autres corrigent votre code ou en proposent un meilleur. Mais aujourd’hui, on parle d’un outil bien plus radical : Bolt.new.

Bolt promet de générer une application web entière à partir d’un simple prompt. Frontend, backend, base de données, API, auth... le tout dans une interface visuelle accessible depuis le navigateur. En gros, un assistant IA tout-en-un pour prototyper une application sans toucher à une ligne de code.

Mais est-ce réellement efficace ? Est-ce que ça tient sur un projet complet ?
C’est ce que Fred Komedja, alias Tonton Fred, a voulu vérifier avec le même projet que tous les autres participants de la série.

Qui est Fred Komedja ?

Connu sous le pseudo Tonton Fred, Fred Komedja est actuellement Head of SEO chez Blue-Sydney. Il maîtrise les enjeux de visibilité web, de contenu, mais aussi de développement.

Avant d'être stratège SEO, Fred était développeur web, avec un vrai passé tech solide. Aujourd’hui, il combine cette double compétence pour tester des outils comme Bolt.new, à la frontière entre « dev » et « no-code assisté par IA ».

Le projet test : Taskly

Comme les autres participants, Fred a travaillé sur Taskly, une application de gestion collaborative de tâches avec :

• Authentification (signup/login)

• Création, édition et suppression de tâches

• Assignation de tâches à d’autres utilisateurs

• Affichage dynamique des statuts

• Design propre avec Tailwind CSS

Et il a tout réalisé… en quelques clics seulement.

Expérience avec Bolt.new

Le prompt de départ :

"Je veux une application de gestion de tâches avec authentification, possibilité d’ajouter, modifier et supprimer des tâches, et chaque tâche doit pouvoir être assignée à un utilisateur. Utilise React pour le frontend et Supabase pour le backend."

En quelques secondes, Bolt a généré :

• Une interface web avec pages d’accueil, login et dashboard

• Une base de données Supabase préconfigurée

• Des fichiers de configuration backend/DB/API

• Un frontend responsive avec Tailwind CSS

Fred n’a pas eu à coder manuellement. Mais il a quand même dû :

• Modifier des labels et composants (textes anglais, ajustements UX)

• Ajouter un système de suppression avec validation (non inclus par défaut)

• Corriger des erreurs d’affichage (affichage conditionnel de tâches)

Pertinence & limites de l’IA

Bolt est rapide, mais encore jeune.

👍 Ce qui fonctionne bien :

• Structure du projet complète

• Authentification intégrée (via Supabase)

• Cohérence générale frontend/backend

• Facilité de déploiement immédiat

👎 Ce qui coince :

• Traduction parfois incomplète (anglais/français)

• Bugs mineurs à corriger manuellement

• Aucune personnalisation fine possible depuis l’interface

« Bolt fait 80 % du boulot, mais tu dois finir les 20 % restants. Et il faut connaître un minimum de dev pour corriger intelligemment. »

Design généré

Fred a apprécié la qualité de la structure visuelle :

• UI simple mais propre

• Responsive sur desktop et mobile

• Utilisation de Tailwind CSS proprement configurée

Il a tout de même dû ajuster certains comportements de composants : listes de tâches non réactives à certains statuts, et quelques bugs de refresh.

Coût & accessibilité

Bolt.new propose une version gratuite limitée. Fred a utilisé la version gratuite avec les crédits de base, sans devoir payer pour ce test.

Pour générer plusieurs projets ou pousser en production, un abonnement payant devient vite nécessaire.

Verdict final

Bolt.new est une plateforme puissante si tu veux aller vite, valider une idée ou prototyper un MVP.

Elle permet à des développeurs comme à des profils SEO, produit ou marketing de créer une web app fonctionnelle sans coder, ou presque.

Mais cela reste un outil jeune, et sa promesse "no-code total" n’est pas encore parfaitement tenue.

✅ Points forts :

• Génère une structure complète frontend/backend/DB

• Supabase intégré sans friction

• Responsive design propre et rapide

• Idéal pour MVP, tests, hackathons

⚠️ Points faibles :

• Faible marge de personnalisation

• Bugs et ajustements manuels nécessaires

• Traductions non localisées

• Code peu maintenable en cas de refacto

Liens utiles

👉 Code source complet sur GitHub
👉 Voir toute la série sur Hashnode

Suivre Fred Komedja

• 🔗 GitHub

• 🔗 LinkedIn

• 🔗 X / Twitter

Prochain épisode

Dans 3 jours, un autre expert entre en jeu avec un autre outil.
Une IA bien connue... mais tient-elle la route sur un vrai projet complet ?

Rendez-vous dans le prochain épisode.

Introduction

Après avoir découvert Claude dans le premier épisode, place aujourd’hui à Cursor, un outil moins connu que ChatGPT ou Copilot, mais qui prend une place de plus en plus sérieuse chez les développeurs.

Cursor, c’est un éditeur de code complet, basé sur VS Code, dopé à l’IA. Pas besoin de copier-coller des bouts de code dans un chatbot externe : l’IA est directement dans ton environnement de travail.

Mais alors, est-ce vraiment utile ? Est-ce que ça change la façon de développer ?
C’est ce que Jacob Gomez a voulu tester.

Qui est Gojanda / Jacob Gomez ?

Jacob Gomez, alias Gojanda, est formateur et développeur web, passionné par la transmission et les outils qui font gagner du temps. Il est actif sur YouTube, où il partage ses retours techniques et pédagogiques, et toujours curieux de découvrir ce que l’IA peut vraiment apporter à son quotidien de dev.

Présentation de Cursor

Cursor est un éditeur de code intelligent qui intègre l’IA directement dans l’IDE. Inspiré de VS Code, il permet de :

• Générer et corriger du code

• Réécrire une fonction en quelques clics

• Poser une question à ton code (ou sur ton code)

• Itérer rapidement sans changer d’outil

Le vrai plus : le contexte de l’IA est conservé directement dans le fichier sur lequel tu travailles. Pas besoin de tout réexpliquer à chaque prompt.

Le projet test : ToDo App Challenge AI

Comme tous les autres participants, Jacob a travaillé sur une app collaborative de gestion de tâches, avec :

• Authentification (login/register)

• Création, modification, suppression de tâches

• Assignation de tâches à un autre utilisateur

• Notifications en temps réel via Socket.io

• Design soigné avec Tailwind CSS

Temps de développement

Jacob a documenté chaque bloc fonctionnel généré avec Cursor, avec les prompts associés.

La séparation frontend/backend a été respectée, avec une série d’itérations bien structurées pour une durée total de 4h de dev.

Nombre de prompts utilisés

Cursor a été sollicité 12 fois au total pour ce projet, répartis comme suit :

Backend (6 prompts) :

1. Génération initiale de l’API en Express.js + MongoDB

2. Configuration des variables d’environnement

3. Correction de connexion MongoDB (IP non autorisée)

4. Implémentation des notifications avec Socket.io

5. Refactorisation pour éviter les dépendances circulaires

6. Intégration des notifications dans les routes

Frontend (6 prompts) :

1. Génération initiale avec React + Tailwind CSS

2. Liste des packages à installer

3. Correction des composants manquants (ProtectedRoute, Layout)

4. Gestion du token utilisateur (bug résolu)

5. Ajout de l’assignation + affichage des échéances

6. Correction des erreurs JS (identifiants dupliqués, etc.)

Qualité du code généré

Cursor a produit un code :
✅ propre
✅ bien structuré
✅ facile à lire
✅ et souvent fonctionnel dès la première génération

Pertinence des suggestions

“J’ai eu un bug sur le token utilisateur. Cursor m’a suggéré une correction pertinente, et ça a marché sans que je reformule pendant 10 minutes.”

Expérience utilisateur & ergonomie

• Basé sur VS Code

• IA disponible directement dans l’interface

• Suggestions ciblées, prompts fluides

• Productivité boostée sans sortir de l’IDE

Coût de l’outil

Version gratuite utilisée ici. Suffisante pour ce projet.
Mais limitations en nombre de prompts → la version pro est à envisager pour une utilisation quotidienne.

Verdict de Jacob

Cursor est un excellent assistant IA si tu es déjà à l’aise dans un IDE.
Il t’aide à rester concentré, à coder vite, proprement, et sans casser ton rythme de travail.

C’est un outil rapide, précis, puissant, qui te laisse garder la main tout en accélérant tes tâches courantes.
Mais il demande un minimum d’autonomie et de rigueur pour en tirer le meilleur.

Points forts :

• Intégré directement dans l’IDE (pas de friction)

• Contexte de fichier conservé, pas besoin de tout repréciser

• Suggestions pertinentes et bien ciblées

• Bon équilibre entre vitesse et qualité du code

Points faibles :

• Version gratuite limitée en prompts

• Moins pédagogique que ChatGPT (surtout pour les débutants)

• Nécessite une structure mentale claire pour découper les prompts

“Cursor m’a vraiment aidé à aller vite sans sortir de mon environnement de travail. Je l’adopterais sur des projets perso ou des protos rapides.”

Interfaces de l’app Cursor

Liens utiles

👉 Frontend – GitHub
👉 Backend – GitHub
👉 Voir toute la série sur Hashnode

Suivre Jacob (Gojanda)

• 🎥 YouTube – Gojanda

• 🔗 LinkedIn

• 💻 GitHub

Prochain épisode

Dans 3 jours, un autre expert entre en scène avec un outil qui fait rage actuellement.
Une IA minimaliste, mais redoutable de structure. On verra si elle tient la cadence.

Introduction

Ces derniers mois, les assistants IA pour développeurs se sont multipliés : Copilot, Cursor, Bolt, Claude, Windsurf…
Mais lequel est vraiment utile quand on code un projet complet de A à Z ?

Pas une petite fonction. Pas un bout de CSS.
Mais une vraie app : authentification, backend, frontend, base de données, logique métier… le tout sans raccourci.

Dans cette série, cinq développeurs ont accepté un défi simple mais ambitieux :

• Utiliser chacun un seul assistant IA

• Travailler sur le même projet fullstack

• Partager un retour brut, honnête et mesuré

Aujourd’hui, on ouvre le bal avec Claude AI, testé par Ouadoud, développeur frontend expérimenté.

Qui est Ouadoud ?

BOURAIMA ABDOUL OUADOUD est développeur Frontend & Blockchain. Toujours curieux de découvrir de nouvelles technologies, il explore autant le web que l’univers de la blockchain, de l’IoT ou encore de l’intelligence artificielle.

Son profil est à la croisée des mondes : rigoureux, mais ouvert ; technique, mais créatif. Il aime construire des interfaces intuitives, propres, efficaces, tout en gardant un œil sur les tendances qui bousculent l’industrie.

Et quand il n’est pas plongé dans du code ? Il nourrit sa créativité dans la science-fiction et le cinéma, deux sources d’inspiration qui influencent sa manière de penser les produits tech et les expériences utilisateurs.

Pour ce test, Ouadoud a joué franc-jeu : il n’avait jamais utilisé Express.js ni MongoDB avant ce projet. Et pourtant, il s’est lancé à fond, avec Claude comme copilote principal.

Claude AI en bref

Développé par Anthropic, Claude est un assistant IA pensé pour être plus "aligné", plus sûr, et plus pertinent que ses concurrents.

Ce qui distingue Claude :

• Une compréhension contextuelle très fine

• Une approche très conversationnelle, presque "humaine"

• Une capacité à anticiper des besoins, pas juste à répondre

Ouadoud a utilisé la version gratuite de Claude 3, accessible via interface en ligne.

🧠 Claude ne se contente pas de te donner un morceau de code. Il comprend ce que tu veux faire — et parfois même mieux que toi.

Le projet test : Taskly

Le projet commun à tous les participants s'appelle Taskly : une mini-app de gestion de tâches collaborative.

Fonctionnalités clés :

• Authentification utilisateur (JWT)

• Ajout, modification, suppression de tâches

• Assignation d’une tâche à un autre utilisateur

• Dashboard par utilisateur

Technologies imposées :

• Frontend : React.js

• Backend : Node.js + Express

• Base de données : MongoDB

Objectif : simuler un cas d’usage concret de développement fullstack, et voir ce que l’IA peut vraiment apporter ou non.

Temps de développement

3h de travail en tout, découpées comme suit :

• 1h30 pour la partie frontend (HTML, CSS, logique React)

• 45 min pour installer MongoDB et découvrir Express.js

• 45 min de retouches, tests, corrections, intégrations finales

"Je n'avais jamais utilisé MongoDB ou Express, et pourtant, avec Claude, j’ai réussi à les intégrer en moins d’une heure."

Le frontend a été généré quasiment en une seule passe, à partir d’un prompt bien structuré.
Le backend a demandé un peu plus de gymnastique :

• Claude a fourni la structure

• Ouadoud a utilisé Copilot pour initier des fichiers

• Puis Claude a été réinvoqué dans un autre chat pour générer le backend complet

⚠️ Claude ne garde pas le contexte entre chats. Il faut repréciser tout le prompt, ce qui rallonge un peu le processus si on n'anticipe pas bien.

Nombre de prompts & itérations

30 interactions totales avec Claude

• Frontend : 3 prompts seulement

  • 1er prompt : structure de l’interface

  • 2e & 3e : demander à Claude de continuer (car il s’arrête souvent de lui-même)

• Backend : 7 prompts en tout, répartis entre :

  • Génération de la structure

  • Création des endpoints (CRUD, login, register)

  • Corrections ponctuelles

• 5 autres chats ont été ouverts pour gérer des cas spécifiques (bugs, compléments de fonctionnalité, erreurs d’intégration)

Claude t’oblige à être organisé : bien découper ton projet, isoler les fonctionnalités, avoir une checklist claire = moins de prompts, plus de résultats.

Qualité du code généré

Le code généré par Claude est :

• Clair

• Structuré

• Facile à relire et maintenir

• Annoté avec des commentaires utiles

Claude explique où placer chaque fichier, propose des structures de dossiers, et justifie ses choix.

"Claude m’a même proposé un découpage en composants React auquel je n’avais pas pensé. Et c’était pertinent."

Sur le backend, les routes sont bien posées, les middlewares correctement intégrés, et la logique des contrôleurs est intelligemment découpée.

Pertinence des suggestions

Là où Claude brille vraiment, c’est dans sa capacité à anticiper ce que tu veux sans que tu le dises mot pour mot.

"Je lui ai demandé un login/register. Il m’a aussi proposé une gestion d’erreur, une redirection conditionnelle et même un toast pour la UX."

Il est capable de deviner ton intention globale, de proposer des alternatives, et de t’amener plus loin que prévu.

Intégration dans le workflow

Claude mâche une grosse partie du travail :

• Il génère le code avec la structure de fichiers complète

• Il précise où coller chaque bloc de code

• Il peut montrer des rendus HTML/CSS directement dans l’interface

Mais attention :

• Il s’interrompt souvent (« Claude est fatigué ») → il faut penser à sauvegarder

• Il n’a pas de mémoire de chat → chaque session = nouveau prompt complet

  

Coût

Claude a été utilisé en version gratuite.
Cela fonctionne… à condition d’être malin :

• Bien structurer ses demandes

• Travailler fonctionnalité par fonctionnalité

• Réduire les prompts inutiles

"Avec un bon découpage et des prompts propres, un seul chat peut suffire à générer une feature complète."

Mais si tu dois revenir sur un bug ou une ancienne réponse, le manque de mémoire contextuelle peut être bloquant.

Verdict final

Claude est un excellent assistant IA, surtout si tu sais ce que tu veux.
Il t’aide à aller plus loin, à penser ton projet comme un architecte, et t’évite des dizaines de clics inutiles.

C’est un outil gratuit, efficace, complet, à condition d’adopter une stratégie structurée.

Points forts :

• Précision et pertinence

• Qualité du code

• Suggestions contextuelles intelligentes

• Gratuit et puissant

Points faibles :

• Fatigue rapide (sessions courtes)

• Pas de mémoire de contexte entre chats

• Nécessite une bonne rigueur dans le prompting

Interfaces du projet

Liens utiles

👉 Frontend – GitHub
👉 Backend – GitHub
👉 Voir toute la série sur Hashnode

Suivre Ouadoud

Tu veux suivre Ouadoud et en savoir plus sur ses projets ?

• 🔗 LinkedIn

• 🔗 X

• 🔗 Site web

Prochain épisode

Suis la série ici ou abonne-toi à la newsletter pour ne rien rater 💌

In software engineering, the term “boilerplate” refers to repetitive or standardized code that appears in many projects with only minor changes. Although it might seem like a “copy-paste” approach, boilerplate is crucial for quick project setups and for enforcing best practices across a codebase. This article explores:

1. A metaphor to understand boilerplate.

2. The definition of boilerplate.

3. Types of boilerplate you might encounter.

4. The difference between boilerplate and templates.

5. Why boilerplate is important.

6. Downsides to watch out for.

7. Best practices to manage it effectively.

8. Style guide basics.

9. Real-world examples with Spring Boot and a personal Node.js/TypeScript boilerplate.

10. A conclusion and further resources.

2. A Simple Metaphor: “Blueprints vs. Pre-Fabricated Parts”

Imagine you are building a house. You have the blueprints that define the structure (rooms, floors, electrical wiring), but you also have pre-fabricated parts (windows, doors, frames) which can be used in almost any new house with little change. These pre-made parts save you a lot of time, since you don’t have to craft a new door or window from scratch for each house you build.

• Blueprint = the overall idea or plan (similar to architecture designs in software).

• Pre-fabricated parts = repeated, standardized elements (similar to boilerplate code in software).

Just as pre-fabricated parts ensure consistency and speed in construction, boilerplate code ensures reliability and efficiency in software projects.

3. What Is Boilerplate?

Historically, “boilerplate” comes from the printing industry, where steel plates (called boilerplates) were used to stamp the same text repeatedly in newspapers. In software, boilerplate is any standardized code that is frequently reused across projects, such as:

• Configuration files (e.g., application.properties in Spring or .env in Node.js).

• Basic project setup (folders like src, test, or standard classes/functions).

• Common scripts (build scripts, deployment YAML files).

Boilerplate reduces the need to rewrite the same foundational elements each time you create a new application.

4. Types of Boilerplate

Boilerplate can take different forms:

1. Framework Starter Kits

   • Example: Spring Initializr for Spring Boot (Java).

   • Example: Create React App for React (JavaScript).

2. Configuration Packages

   • A set of default config files (like ESLint/Prettier rules, .editorconfig) that ensure consistency across projects.

3. Infrastructure as Code

   • Basic Dockerfiles, Kubernetes manifests, or CI/CD pipeline scripts that can be reused across multiple microservices.

4. Company or Team Templates

   • An internal boilerplate with your team’s best practices: logging, monitoring setup, testing frameworks, etc.

5. Boilerplate vs. Templates: What’s the Difference?

Sometimes, the words “boilerplate” and “template” are used interchangeably, but there can be subtle differences:

• Boilerplate:

  • Usually refers to ready-to-use code or files that you copy into a new project.

  • Often includes standard configurations, folder structures, and common dependencies.

  • Tends to be more concrete (like actual .js or .java files).

• Template:

  • Can be more abstract—a skeleton or blueprint (could even be a written guide or partial code).

  • Sometimes uses variables or placeholders (e.g., {{projectName}}) that you fill in.

  • Focuses on providing a pattern or structure, rather than fully fleshed-out files.

In practice, people mix these terms a lot. However, you can think of templates as more general patterns, and boilerplate as more tangible, ready-made code.

6. Why Is Boilerplate Important?

1. Standardization
   With consistent boilerplate, teams share the same structure, code style, and naming conventions. This improves readability and onboarding.

2. Time Savings
   Reusing code that is proven to work reduces setup time. You can focus on business logic rather than rewriting basic functionality.

3. Reliability
   Boilerplate is often well-tested because it’s reused so many times. This can reduce bugs in critical setup steps (e.g., database configuration).

4. Promoting Best Practices
   Companies or open-source communities typically bake best practices (e.g., security, testing) into their boilerplate. Developers learn from these examples and keep their projects more robust.

7. Potential Downsides

1. Bloated or Irrelevant Code
   A “one-size-fits-all” approach may include unneeded dependencies and features that make your project heavier.

2. Lack of Understanding
   Auto-generated boilerplate can be so complete that developers don’t learn how each piece works. Troubleshooting might become harder if they don’t understand the boilerplate components.

3. Maintenance Overhead
   Dependencies change rapidly, and an outdated boilerplate can cause compatibility issues or security vulnerabilities.

8. Best Practices for Managing Boilerplate

1. Customize Carefully

   • If you generate a project with a CLI or use a base repository, remove what you don’t need to keep it lean.

2. Automate Creation

   • Create internal scripts or starter repositories for your team. For example, a shell or PowerShell script that clones your boilerplate and renames it automatically.

3. Document Everything

   • A README that explains the file structure, how to build, how to test, etc., helps new developers quickly grasp the boilerplate.

4. Assign Ownership

   • Have one or more people in charge of updating dependencies, removing obsolete files, and adding improvements.

5. Keep It Modular

   • Break your boilerplate into optional modules (e.g., authentication, database layer, etc.) so projects can pick only what they need.

9. Style Guide Basics

A style guide defines coding standards and conventions for a project or organization:

• Linting rules (e.g., ESLint, TSLint) to enforce consistent syntax and prevent errors.

• Formatting preferences (e.g., Prettier, EditorConfig) for indentation, spaces vs. tabs, etc.

• Naming conventions for files, folders, variables, classes.

Including a style guide in your boilerplate ensures every new project automatically follows consistent coding practices. This not only saves time on code reviews, but also helps unify the look and feel of the entire codebase.

10. Real-World Example 1: Spring Boot Boilerplate

Scenario: You want to build a new Java microservice using Spring Boot.

1. Use Spring Initializr:

   • Generates a base pom.xml (Maven) or build.gradle (Gradle) with your selected dependencies.

   • Creates a main application class with @SpringBootApplication.

   • Includes a default folder structure (src/main/java, src/test/java).

2. Customize:

   • Remove dependencies you don’t need (e.g., Spring Security if not required).

   • Add new dependencies for your specific database or logging framework.

3. Document:

   • Write a simple README.md explaining how to run (mvn spring-boot:run) and how your folders are structured.

4. Maintain:

   • Keep an eye on Spring Boot updates.

   • Store this boilerplate in a Git repo so others can reuse and improve it.

11. Real-World Example 2: Personal Node.js/Express/TypeScript Boilerplate

You prefer creating your own boilerplate from scratch (like me), without external scaffolding tools like Yeoman or Cookiecutter.

Project Structure

my-personal-boilerplate
├── .editorconfig
├── .eslintignore
├── .eslintrc.js
├── .gitignore
├── .prettierrc
├── package.json
├── README.md
├── scripts
│   ├── build.sh
│   └── test.sh
├── src
│   ├── app.ts
│   ├── routes
│   │   └── index.ts
│   └── server.ts
├── tsconfig.json
└── yarn.lock

• src/app.ts sets up Express middleware.

• src/server.ts defines how to start the server.

• ESLint, Prettier, and EditorConfig files ensure a consistent style guide is pre-configured.

Advantages

• Consistency: Every new Node/Express/TypeScript project starts with the same structure and linting rules.

• Time Savings: No need to set up TypeScript, ESLint, or scripts manually each time.

• Full Control: You understand every file because you built it.

• Continuous Improvement: If you discover a new best practice (CI/CD config, Dockerfile, etc.), you can add it to the boilerplate for future projects.

12. Conclusion

Boilerplate code is like pre-fabricated parts in construction repetitive, reliable, and time-saving. By reusing established patterns, you ensure faster project setups and consistent best practices. However, it’s important to understand what each piece of boilerplate does, trim unnecessary features, and maintain it as technologies evolve.

Whether you use a framework-provided starter (like Spring Initializr) or create your own personal Node.js/Express/TypeScript boilerplate, you gain efficiency, consistency, and better code quality. Adding a style guide including linting rules and formatting settings ensures your code remains uniform across multiple projects and contributors.

Remember: keep your boilerplate modular, documented, and up to date you will enjoy a smoother development process and cleaner code across all your projects.

Software development is evolving rapidly, and AI coding tools like GPT are becoming indispensable. This isn’t just a new gadget for developers; it’s like having an extra pair of hands—ones that can quickly draft code, suggest solutions, and even help troubleshoot issues. Embracing this technology means unlocking productivity and efficiency that weren’t possible before.

Getting in the Right Mindset

Think of GPT as a Partner

Imagine starting a new project. You have an assistant who knows all programming languages, can churn out code at lightning speed, and never gets tired. However, this assistant relies on you to set goals, provide context, and make key decisions. That’s GPT in a nutshell. It’s a powerful tool, but your expertise drives the outcomes.

Focus on High-Level Decisions

Let GPT handle implementation details so you can focus on:

• Choosing between WebSocket and REST APIs for real-time communication.

• Structuring backend services for scalability.

• Defining reusable components in Vue.js for the frontend.

• Ensuring the solution aligns with business requirements and user needs.

GPT can execute tasks, but it’s your guidance that ensures everything works seamlessly.

Starting Strong with GPT

Context is Key

Start by clearly explaining your project’s goals and requirements. For instance:

"We’re building an e-commerce platform. Here are the details:

• Frontend uses Vue.js.

• Backend is a Node.js API with PostgreSQL.

• The cart functionality needs to support persistent sessions and guest users.

Let’s begin with the user authentication system. I’ll show you the existing setup."

Define Your Environment

Provide GPT with the necessary context for your project:

"Here’s our setup:

1. Tests are run with npm test.

2. Code quality is enforced with ESLint and Prettier.

3. API endpoints follow the pattern: /api/[resource]/[action].

4. Docker is used for local database management."

Tackling Projects with GPT

Divide tasks into manageable steps for better collaboration:

Define a Clear Scope

Avoid vague requests like:

"Build a cart feature."

Instead, provide specifics:

"We need a shopping cart feature with these requirements:

• Items are stored in the database.

• Support guest and authenticated users.

• Include a REST API for adding/removing items.

Let’s start by designing the database schema and basic API endpoints."

Guide GPT Through the Codebase

Help GPT understand your existing codebase and patterns:

"Check these files first:

• models/Cart.js for the existing schema.

• routes/cart.js for API structure.

• utils/session.js for session handling logic.

Follow the conventions used in Cart.js for validation."

Plan the Implementation

Work with GPT to outline a detailed implementation plan. Here’s an example:

# Shopping Cart Feature

## Phase 1: Backend Setup
- [ ] Define cart schema in PostgreSQL.
- [ ] Create API endpoints for CRUD operations.
- [ ] Implement validation for cart operations.
- [ ] Write unit tests for the API.

## Phase 2: Frontend Integration
- [ ] Build the cart UI in Vue.js.
- [ ] Connect the UI to the backend API.
- [ ] Add features like item quantity updates.
- [ ] Implement error handling and user feedback.

## Phase 3: Session Management
- [ ] Support persistent carts for authenticated users.
- [ ] Implement guest cart functionality.
- [ ] Add session cleanup jobs.
- [ ] Write integration tests for session handling.

Workflow Tips

Maximize productivity by adopting a structured approach:

Take Small Steps

Focus on one task at a time:

"Let’s define the cart schema in PostgreSQL first. Can you draft it based on our existing database patterns?"

Validate as You Go

Test every piece of work before moving forward:

"Run the unit tests for this API endpoint. If there’s an issue, we’ll debug it together."

Debug Collaboratively

Work with GPT to resolve issues effectively:

"The API isn’t returning the expected data. Let’s add logs to the database query and inspect the response."

Beyond Coding: Automation with GPT

GPT can also streamline tasks beyond writing code:

Simplify Git Operations

Use GPT to handle version control tasks:

"Can you:

1. Stage all the changes?

2. Write a commit message?

3. Push to the feature/shopping-cart branch?"

Automate Environment Setup

Offload setup tasks to GPT:

"Set up a new project with:

• Node.js and TypeScript.

• Docker for PostgreSQL.

• ESLint and Prettier configurations."

Documentation Assistance

Leverage GPT for creating documentation:

"Draft a README file with:

• Instructions for local setup.

• API documentation.

• Deployment steps."

Conclusion

Using GPT as a coding partner doesn’t replace your skills—it amplifies them. By offloading repetitive tasks and leveraging GPT’s speed, you can focus on solving complex problems, refining your designs, and delivering exceptional software. Whether you’re prototyping, debugging, or automating workflows, GPT can help you work smarter and faster.

Why not let GPT handle the grunt work while you focus on innovation and creativity?

Introduction

Welcome to the first article in the "Java Foundations" series. Before we dive into the world of Spring Boot, it's essential to build a strong foundation in Java. In this article, I'll introduce you to Java, explaining its history, features, and why it's such a popular programming language. Whether you're new to programming or just new to Java, this guide will give you the context you need to start your journey.

What is Java?

Java is a high-level, class-based, object-oriented programming language that is designed to have as few implementation dependencies as possible. It's a general-purpose language intended to let application developers write once, run anywhere (WORA), meaning that compiled Java code can run on all platforms that support Java without the need for recompilation.

Key Features of Java

Platform Independence

One of Java’s primary strengths is its platform independence. The compiled Java code (bytecode) runs on any device equipped with a Java Virtual Machine (JVM). This cross-platform capability is encapsulated in the mantra “write once, run anywhere.”

Object-Oriented

Java is an object-oriented programming (OOP) language, which means it follows principles like inheritance, encapsulation, polymorphism, and abstraction. This paradigm helps in organizing complex programs and enhancing code reusability.

Robust and Secure

Java provides strong memory management through its automatic garbage collection. Additionally, it has built-in security features, such as runtime checking and static type checking, which make Java applications less prone to security vulnerabilities.

Multithreaded

Java has built-in support for multithreaded programming, allowing concurrent execution of two or more threads for maximum utilization of CPU.

Rich API

Java comes with a vast array of libraries and APIs that simplify many development tasks. From data structures to networking, from graphical user interfaces to web services, Java’s rich API set is invaluable.

Community Support

Java has a large, vibrant community of developers, which means extensive resources, libraries, frameworks, and tools are available. This community support also ensures that Java remains up-to-date with industry trends and practices.

The Java Ecosystem

The Java ecosystem is vast and includes:

• Java Development Kit (JDK): The JDK includes the Java Runtime Environment (JRE), an interpreter/loader (Java), a compiler (javac), an archiver (jar), a documentation generator (Javadoc), and other tools needed for Java development.

• Java Runtime Environment (JRE): The JRE includes the JVM, core libraries, and other components necessary to run applications written in Java.

• Java Virtual Machine (JVM): The JVM is the engine that runs Java applications. It converts bytecode into machine code, allowing Java applications to be platform-independent.

Why Learn Java?

Versatility

Java is used in various domains, from web applications (using frameworks like Spring) to mobile applications (Android development) to large-scale enterprise applications. This versatility makes Java a valuable skill for any developer.

High Demand

Java has consistently been one of the most popular programming languages and is in high demand in the job market. Learning Java can open up numerous career opportunities.

Strong Community and Resources

With a large community of developers and a plethora of resources available, finding help and learning materials for Java is easy. This support network can be incredibly beneficial as you learn and grow as a developer.

Getting Started with Java

To start with Java, you'll need to set up your development environment. For a comprehensive guide on how to install Java, follow the steps outlined in Step-by-Step Guide to Installing Java

Conclusion

Java is a powerful, versatile, and widely-used programming language that forms the backbone of many modern applications. Understanding its core concepts and features is essential before moving on to more advanced topics like Spring Boot. In the next articles, we'll delve deeper into Java's syntax, object-oriented principles, and more, laying a solid foundation for your future development projects.

Introduction

Java is a versatile and widely-used programming language. To start developing in Java, you first need to install the Java Development Kit (JDK) on your machine. This guide will walk you through the steps to install Java on Windows, macOS, and Linux.

Checking for Existing Java Installation

Before installing Java, check if it is already installed on your system.

On Windows

1. Open Command Prompt.

2. Type java -version and press Enter.

On macOS

1. Open Terminal.

2. Type java -version and press Enter.

On Linux

1. Open Terminal.

2. Type java -version and press Enter.

If Java is installed, you will see the version number. If not, proceed with the installation steps below.

Installing Java on Windows

1. Download the JDK

   • Go to the Oracle JDK download page.

   • Choose the latest JDK version and download the Windows installer (e.g., jdk-XX_windows-x64_bin.exe).

2. Run the Installer

   • Open the downloaded installer file.

   • Follow the on-screen instructions to complete the installation.

3. Set Up Environment Variables

   • Open the Start menu, search for "Environment Variables," and select "Edit the system environment variables."

   • In the System Properties window, click on "Environment Variables."

   • Under System Variables, click "New" and add a new variable:

     • Variable name: JAVA_HOME

     • Variable value: Path to your JDK installation (e.g., C:\Program Files\Java\jdk-XX).

   • Edit the Path variable and add %JAVA_HOME%\bin.

Installing Java on macOS

1. Download the JDK

   • Visit the Oracle JDK download page.

   • Download the macOS installer (e.g., jdk-XX_macos-x64_bin.dmg).

2. Install the JDK

   • Open the downloaded .dmg file.

   • Double-click the .pkg installer and follow the instructions.

3. Set Up Environment Variables

   • Open Terminal.

   • Edit the .bash_profile or .zshrc file (depending on your shell):

       nano ~/.bash_profile
     

     or

       nano ~/.zshrc
     

   • Add the following lines:

       export JAVA_HOME=$(/usr/libexec/java_home)
       export PATH=$JAVA_HOME/bin:$PATH
     

   • Save and close the file, then run source ~/.bash_profile or source ~/.zshrc.

Installing Java on Linux

1. Download the JDK

   • Visit the Oracle JDK download page.

   • Download the Linux tar.gz file (e.g., jdk-XX_linux-x64_bin.tar.gz).

2. Install the JDK

   • Open Terminal.

   • Extract the tar.gz file to /opt:

       sudo tar -xzf jdk-XX_linux-x64_bin.tar.gz -C /opt
     

   • Set up the JAVA_HOME and PATH variables by adding the following lines to your .bashrc or .zshrc file:

       export JAVA_HOME=/opt/jdk-XX
       export PATH=$PATH:$JAVA_HOME/bin
     

     Save and close the file, then run source ~/.bashrc or source ~/.zshrc.

Setting Up Environment Variables

For all operating systems, ensure the environment variables are set correctly:

• JAVA_HOME: Points to the JDK installation directory.

• PATH: Includes $JAVA_HOME/bin to ensure Java executables are available globally.

Verifying the Installation

Open a new terminal or command prompt.

1. Type java -version and press Enter.

2. You should see the installed Java version, indicating the installation was successful.

3. 

Conclusion

You've successfully installed Java on your system. Now you're ready to start developing Java applications.