Informal Engineer · Guides

My Cursor AI workflow

Sun, 01 Sep 2024 00:00:00 GMT

If you're like me, you've probably found yourself diving deep into the world of Cursor AI. The idea of turning a simple concept into functional code within minutes is nothing short of revolutionary. But before you get ahead of yourself, it's crucial to understand the best practices that can help you harness the full potential of Cursor AI.

In this post, I'll share seven essential tips that have transformed the way I use Cursor AI. These insights come from both personal experience and expert advice from seasoned developers. Whether you're a seasoned coder or just starting out, these strategies will save you hours of time and countless headaches.

Plan Before You Code
Leverage Cursor Directory for Better Prompts
Tag Relevant Documentation
Consult Other AI Models When Stuck
Use AI to Explain and Learn Code
Duplicate and Modify Existing Functionality
Utilize Existing Code Templates
Conclusion

Plan Before You Code

Measure twice, cut once. This age-old adage holds true even in the realm of AI-assisted coding. Before jumping into Cursor AI, take the time to plan your project thoroughly.

I can't stress this enough: planning is crucial. Before jumping into Cursor AI, take some time to sketch out what you want to build. Whether it's on paper, Paint, or Figma, having a visual reference makes a huge difference.

For example, when I was working on a web application recently, I drew a simple wireframe on my iPad. This helped me visualize the layout and functionality before I even started coding. Trust me, spending some time planning can save you hours later on.

Sketch Your Ideas: Use tools like Figma or even a simple pen and paper to outline your project.
Visualize with V0 (By Vercel): Platforms like V0 can help you create wireframes quickly. For example, if you're building a marketplace for bicycle sellers, V0 can generate a clean-looking interface based on your prompts.

Why This Matters: Providing Cursor AI with a clear plan and visual references gives it more context, resulting in more accurate and efficient code generation.

Leverage Cursor Directory for Better Prompts

Did you know there's a resource called Cursor Directory that can significantly improve your prompts?

Copy Expert Prompts: Find prompts tailored to the technologies you're using, such as Next.js, React, or Python.
Set Up Cursor Rules: By creating a cursor-rules file in the root of your project and pasting the appropriate prompt, you guide Cursor AI to align with your project's specific needs.

Example Prompt:

You are an expert in TypeScript, Node.js, Next.js, React, and Tailwind CSS. Follow best practices and write clean, maintainable code.

Benefits:

Improved Accuracy: Cursor AI will generate code that's consistent with the latest best practices.
Time-Saving: Reduces the need for multiple iterations and corrections.

Tag Relevant Documentation

Context is king when it comes to AI models.

Add Docs to Cursor: Use the Add Docs feature in Cursor to import relevant documentation, such as the Next.js documentation or Supabase docs.
Stay Updated: This ensures Cursor AI references the most current information, helping you avoid outdated methods or deprecated functions.

How-To:

Go to the Composer view in Cursor.
Click on Add > Docs.
Paste the URL of the documentation you want to add.
Name it appropriately for easy reference.

Outcome: With tagged documentation, Cursor AI can provide more accurate solutions and even help troubleshoot issues using the latest guidelines.

Consult Other AI Models When Stuck

Even AI has its limitations. If you find yourself stuck, don't hesitate to consult other AI models like Claude or even ChatGPT.

Steps:

Copy the Problem: Include the code that's causing issues and the solutions you've already tried.
Provide Context: Explain what you're trying to achieve and why the previous attempts didn't work.
Ask for Help: Paste this into another AI model and see what solutions it offers.

Why This Works:

Different AI models may have varying datasets and can provide alternative solutions.
Including previous attempts helps the AI avoid suggesting the same ineffective solutions.

Use AI to Explain and Learn Code

AI isn't just for generating code; it's also a fantastic learning tool.

Explain Code Snippets: Ask Cursor AI to explain complex pieces of code as if you were a beginner.
Dive Deeper: If something doesn't make sense, ask follow-up questions.

Example:

Explain this code to me like I'm a beginner. I want to understand the flow, logic, and overall how things work.

Benefits:

Accelerated Learning: Understand new technologies or frameworks quickly.
Better Documentation: Use AI-generated explanations to create documentation for your projects.

Duplicate and Modify Existing Functionality

Reusability is a cornerstone of efficient coding.

Copy Existing Code: If you have functionality that works well, copy it as a starting point for new features.
Specify Changes: Tell Cursor AI exactly what modifications you need.

Tips:

Provide Context: Mention where the code is from and what it currently does.
Detail the Changes: Be specific about what you want to alter to avoid unnecessary iterations.

Utilize Existing Code Templates

Starting from scratch isn't always the best approach.

Use Starter Kits: Templates often include essential features like authentication, database integration, and basic UI components.
Customize: Build on top of these templates to suit your specific needs.

Resources:

GitHub: Search for reputable starter templates related to your tech stack.
Community Contributions: Many developers share their own templates, which can be a goldmine for getting started quickly.

Advantages:

Saves Time: Skip the boilerplate and focus on unique features.
Reduces Errors: Templates are often vetted by the community, minimizing bugs.

Conclusion

Harnessing the power of Cursor AI isn't just about jumping in and coding; it's about setting yourself up for success through careful planning and leveraging all the tools at your disposal.

Remember, the journey to mastering AI-assisted coding is a marathon, not a sprint. Embrace the learning process, and don't be afraid to explore new methods and resources. As someone who's navigated massive infrastructure projects and complex engineering challenges, I can attest that the time you invest in planning and learning today will pay dividends in the future.

By implementing these tips, I've been able to get the most out of Cursor AI and significantly improve my coding workflow. I hope these insights help you on your journey as well.

If this tutorial helped you out, I'd really appreciate it if you signed up for my newsletter.

Feel free to share your thoughts or ask questions in the comments below. You can also reach out to me on X (Formerly Twitter) @MeshRHM

Build a website with Ghost, Cloudflare, and DigitalOcean

Sun, 19 Jun 2022 00:00:00 GMT

Starting your own website can be really stressful. There are many options you may be tempted to go with, and rightly so. Different platforms will offer different benefits.

I have always hosted my impulse business and personal websites on my own shared reseller hosting account. My main stack in the past has always been CPanel and Wordpress. I recently came across Ghost, and it has been a game changer for my main website.

I have always wanted to be able to host my website on my own machines and since Ghost can be spun up on literally any ubuntu virtual machine, I decided to do it on Digital Ocean for its speed and reliability (Plus I have a student credit with GitHub!). In the future, I plan to transition the website to my own lab - be on the lookout for an updated tutorial on how to do this on your own home server!

Running my own ghost site was a random weekend obsession I fell into, so I am sharing it in the hopes that it will save another poor soul countless hours of frustration of figuring it out.

Treat this as an answer key to your self hosted ghost problems.

The Stack

In this section I would like to clarify my website stack:

Ghost - Content Management System.
Cloudflare - Creates a proxy IP to your website. Helps protect your website by adding another layer of protection.
Namecheap - Domain Name Registrar.
Digital Ocean - Server Hosting.

Namecheap - Domain Name

I used Namecheap to buy my domain name. I have used it for a very long time, I have used it heavily to purchase impulse business ideas for many years. It is nice, simple and easy - Not much else to it.

Buying domain names on namecheap

Feel free to use your own domain provider, the following steps will work even if you used other providers such as domains.google. Once you have purchased and registered your domain name, you can move onto the next step of getting digital ocean set up.

CloudFlare - SSL and CDN

I like CloudFlare, there are plenty of resources on what it does and why you should use it. Here is why I like to use CloudFlare

Makes it harder to perform a DDOS attack against your website by creating a proxy link to your site.
Offers a free Global Content Delivery Network to improve the performance of your site.
Allows you to create SSL certificates that never expire.

You're going to want to create a free account and go through the process of adding a site.

CloudFlare makes the free option a little hard to find, it will be below all of the paid options:

After you do this, the site will ask you to check your records, instead you want to click on the overview tab and follow those instructions on your Namecheap account.

So in your Namecheap account, you can navigate to manage the domain you just registered and add the Cloudflare name servers as shown below: (Don't forget to save)

While we wait for the name servers to propagate, we can get started with getting the digital ocean account and droplets set up.

Digital Ocean - Host Server

Create a Digital Ocean account. If you are a student I recommend checking out the GitHub Student Developer Pack, specifically the intro to web developer package. If you have a student email that is associated with Github you should be able to utilize the following deal:

There are plenty of other amazing offers such as Canva Pro free for 12 months, I absolutely recommend you check this amazing resource out.

Okay, back to Digital Ocean, create a project and create a droplet within that project.

Instead of using Digital Ocean's over the counter distributions, you want to go to marketplace and search for Ghost and proceed the rest of the installation with that selected.

For the plan, you can go with the smallest plan available at ($6). However, going with 1GB ram is insufficient for updates and will require you to upgrade to the 2GB ram CPU whenever you want to update your Ghost distribution. So personally, I am going with the ($12/mo) option.

For the data centre locations, choose whichever is closest to you.

Create an authentication password or SSH key if you are comfortable with that.

Once you create your droplet you want to add your domain here and point your CloudFlare DNS to the following IP on your Digital Ocean droplet.

So do not SSH into your IP yet.

Go back to CloudFlare, navigate to DNS and we will have you add two records with the IP address that you received in the step prior to this.

Additionally, you should also create a CNAME Record and have the name point to www.

Once these are created, I suggest turning off proxy status for both the CNAME and the A DNS. I have run into a lot of issues getting the initial bit set up without them turned off, you can turn it back on when your website is up and live.

Navigate to SSL/TLS and select encryption mode as Off.

I suggest going to the overview page of cloudflare and purging the cache. Purging everything should be sufficient.

Perfect, we will set up a few other things like SSL later on. For the time being go back to your digital ocean and you will see a get started with ghost button next to your droplet, follow that prompt.

Going forward, I will be using the terminal on MacOS, but you can also use power shell or PuTTY on windows.

Once the terminal is done with the 1-click loading, you will be required to press enter, before you do so, you want to make sure that the IP of your site and the Domain name of your site brings you to this page:

Once this is the page you get to with your domain, press enter on terminal and let the fun start.

Just follow the prompts for your blog URL and email address.

When you get to this page, you are good to go, welcome to your new ghost site!

Once all that is complete, your website should be live!

Let's get SSL set up with Cloudflare, if you were building your site without Cloudflare, you could just ignore this part.

First you will need to create a SSL Origin Certificate:

Once you create the certificate, I like to first SSH into my server, and make sure I change the user to ghost-mgr.

sudo -i -u ghost-mgr

CD into the /etc/ssl/ directory. Then create a directory with your website address as the name.

cd /etc/ssl/
sudo mkdir yourdomain.com
cd yourdomain.com

You are going to create two files in this directory.

sudo nano yourdomain.com.crt

Paste in the origin certificate that you just created on Cloudflare. Press CTRL-X then Y to Save it. Then we are going to create another file.

sudo nano yourdomain.com.key

Copy the private key in there and save it the same way as we suggested above.

If you do an ls command in your folder, you should find the following.

Time to configure your ghost NGINX Server Block.

By this point, you might be sitting here thinking, why would anyone do this over getting the GhostPro subscription service. You would be correct in thinking this is a tutorial for the select few who enjoy complications in their lives.

You will want to nano your configuration in the following location:

sudo nano /etc/nginx/sites-available/yourdomain.com-ssl.conf

This is what you will see:

server {
    listen 443 ssl http2;
    listen [::]:443 ssl http2;

    server_name yourdomain.com;
    root /var/www/ghost/system/nginx-root; # Used for acme.sh SSL verification (https://acme.sh)

    ssl_certificate /etc/letsencrypt/yourdomain.com/fullchain.cer;
    ssl_certificate_key /etc/letsencrypt/yourdomain.com/yourdomain.com.key;
    include /etc/nginx/snippets/ssl-params.conf;

    location / {
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header X-Forwarded-Proto $scheme;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header Host $http_host;
        proxy_pass http://127.0.0.1:2368;

    }

    location ~ /.well-known {
        allow all;
    }

    client_max_body_size 50m;
}

You want to direct your ssl_certificate and key to the files you created earlier, additionally, I would add the www.yourdomain.com and increase the body size to 100m.

server {
    listen 443 ssl http2;
    listen [::]:443 ssl http2;

    server_name yourdomain.com www.yourdomain.com;
    root /var/www/ghost/system/nginx-root; # Used for acme.sh SSL verification (https://acme.sh)

    ssl_certificate /etc/ssl/yourdomain.com/yourdomain.com.crt;
    ssl_certificate_key /etc/ssl/yourdomain.com/yourdomain.com.key;
    include /etc/nginx/snippets/ssl-params.conf;

    location / {
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header X-Forwarded-Proto $scheme;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header Host $http_host;
        proxy_pass http://127.0.0.1:2368;

    }

    location ~ /.well-known {
        allow all;
    }

    client_max_body_size 100m;
}

Save this file.

Go to your Cloudflare and change your SSL to Strict.

Back to your terminal, we are going to test the NGINX config.

sudo nginx -t

After you get a successful test result run the following command to restart NGINX.

sudo systemctl restart nginx

Finally, back on CloudFlare, go into DNS and don't forget to turn on the proxy's for your website. Once you turn it on, don't forget to purge your cache.

With that, you are officially done! Your ghost website will serve users via CloudFlare SSL and you will not have to worry about the renewal of the certificate.

Congratulations! You have created a new Ghost Publication using Digital Ocean and CloudFlare.

If this tutorial helped you out, I simply ask you sign up for my newsletter, where you will get plenty of actionable advice to grow your passions!

I want to thank you for reading. If you need any assistance, please reach out to me on twitter @MeshRHM and I will do my best to help you out.