We heavily recommend using a macbook for development. You don’t need to buy one. Lease it instead

Otherwise, any machine with a linux-based operating system will work just fine.

If, however, you’re on Windows; keep in mind that some of our recommendations below can be slightly more difficult to setup (or won’t be applicable - some tools are only available for MacOS for example). You’ll have to either ignore those recommendations or search for equivalent instructions/tools online. The choice is yours.

Need more help? Book an onboarding call with one of our team members and we’ll help you get everything set up: https://app.reclaim.ai/m/obaid-ur-rahmaan/onboarding

1

Terminal Setup

The terminal is a software engineer’s way to interact with their computer. Knowing how to use it to get around is important. You’ll be using it a lot.

The default MacOS Terminal is good, but you can make it better. It might seem a little over-the-top, but we can do just a bit of configuration to make it more readable. You’ll thank yourself later.

For windows users, you can install WSL2 to get a linux-based terminal.

2

Node.js Setup

Node.js is required for modern web development.

It’s a JavaScript runtime environment that allows you to run JavaScript code outside of a web browser. It’s essential for:

  • Running modern web development tools and build systems
  • Managing project dependencies through package managers
  • Running development servers for local testing
  • Building full-stack JavaScript applications

Don’t worry if this doesn’t make sense right now. You’ll understand it better as you start the roadmap.

There are different versions of Node.js. We’ll be using nvm - a popular Node Version Manager - to manage different versions of Node.js on our machine.

Node.js Mac Installation Guide

Verify installation by running this command in your terminal:

node --version

Next, install pnpm (a faster, more efficient package manager):

curl -fsSL https://get.pnpm.io/install.sh | sh -

Verify pnpm installation:

pnpm --version

We’ll be using pnpm to install and manage dependencies when building our projects. It’s faster and more efficient than npm.

3

Code Editor Setup

A code editor is a specialized text editor designed specifically for writing and editing code. It’s like a google doc, but for programming. Key features include:

  • Syntax highlighting (colors different parts of code for better readability)
  • Auto-completion (suggests code as you type)
  • Error detection (finds mistakes in your code)
  • File management (organize your project files)
  • Extensions (add extra features)
  • Integrated terminal (run commands without leaving the editor)
  • Git integration (manage code versions)
  • AI assistance (get help while coding)

We recommend Cursor because it combines all these features with powerful AI capabilities built-in to help you code faster and learn better.

  1. Download Cursor - AI Code Editor
  2. Master Cursor - AI Code Editor

See Editor setup in Efficiency

4

Essential Tools

We’ll be using these additional tools to enhance your development workflow:

  1. AI Assistants:

  2. Diagramming Tools:

  3. Browser:

    • Chrome - Works fine for most use-cases
    • (Optional) Sizzy - Specialized development browser with responsive design preview

  4. Mac-Specific Tools:

    • WispFlow - Voice to Text Transcription so you can talk to your computer instead of typing
    • Raycast - Spotlight alternative (better search, clipboard history, etc.)

​
Optimizing Cursor for Development

  1. Cursor Rules Configuration

    Paste the following into Cursor’s system prompt settings:

    DO NOT GIVE ME HIGH LEVEL ANSWERS, IF I ASK FOR A FIX OR EXPLANATION, I WANT ACTUAL CODE OR EXPLANATION!!! I DON'T WANT "Here's how you can blablabla"
- Be casual unless otherwise specified
- Be terse
- Suggest solutions that I didn't think about--anticipate my needs
- Treat me as an expert
- Be accurate and thorough
- Give the answer immediately. Provide detailed explanations and restate my query in your own words if necessary after giving the answer
- Explain why you made the changes you did so that it's super easy for me to understand and learn new patterns and concepts
- Value good arguments over authorities, the source is irrelevant
- Consider new technologies and contrarian ideas, not just the conventional wisdom
- You may use high levels of speculation or prediction, just flag it for me
- No moral lectures
- Discuss safety only when it's crucial and non-obvious
- If your content policy is an issue, provide the closest acceptable response and explain the content policy issue afterward
- Cite sources whenever possible at the end, not inline
- No need to mention your knowledge cutoff
- No need to disclose you're an AI
- Please respect my prettier preferences when you provide code
- Split into multiple responses if one response isn't enough to answer the question
- If I ask for adjustments to code I have provided you, do not repeat all of my code unnecessarily. Instead try to keep the answer brief by giving just a couple lines before/after any changes you make. Multiple code blocks are ok.

  2. AI Interaction Best Practices

    • Use Chat for high-level questions and planning the changes
    • Use Composer for actually making the code changes
    • Make changes step-by-step, one task at a time
    • Commit your changes often (See ‘Git for version control’ in the roadmap)

  3. AI Model Selection

    • Use o1-preview for just explaining and coming up with a plan for ambiguous or complex issues that affect the entire codebase
    • Use claude-3-5-sonnet-20240620 when you have a plan and the problem is now more narrowly scoped and requirements are well-defined
    • Use gemini-2.0-flash-exp for editing in-line (Both Cmd+K in the terminal or in-line editing with Cmd+M)