#84 Nuxt tutorial

[evelinabe]

What does this PR do?

This PR adds a tutorial to the website for an idea tracker with Nuxt and Appwrite

Test Plan

Related PRs and Issues

Related PRs and Issues
#84

Repo with the complete code for the tutorial: https://github.com/evelinabe/nuxt-ideas-tracker-tutorial

Have you read the Contributing Guidelines on issues?

Yes

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
website	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Nov 13, 2023 4:20pm

[gewenyu99]

@evelinabe is this ready for review?

[evelinabe]

@gewenyu99 yes

[gewenyu99]

Hey, great start! Thank you so much for helping us improve Appwrite's docs.

I've left some comments on changes, many of the comments apply to the entire tutorial so be sure to carefully apply them across the tutorial, so we can speed up the review times.

Thanks!

[gewenyu99]

@evelinabe remember to re-request review when you've finished ur changes!

[evelinabe]

@gewenyu99 Hi! Re-requesting re-review. I've changed the tone of the texts a bit, please let me know what you think. If you want some editorial changes to the texts. I'm not native in English, so all tips are welcome.

[gewenyu99]

@evelinabe Hi can you fix your builds?

[evelinabe]

@evelinabe Hi can you fix your builds?

Strange, thought I had removed the file causing the errors from the PR, but still failure 🧐 @gewenyu99

[gewenyu99]

@evelinabe Hi can you fix your builds?

Strange, thought I had removed the file causing the errors from the PR, but still failure 🧐 @gewenyu99

Please run pnpm run build.

[gewenyu99]

I tried following this tutorial but it was really confusing. I couldn't tell which file we were in, what we were implementing, and when you used ... to show skipped code, it was very confusing to see what was skipped and where the code should go.

Please take a break, and take a careful look through your tutorial from scratch. Follow your own tutorial, it'll help you iron out the kinks :D

[gewenyu99]

I would take a look at existing tutorials.

Always explain what's going to happen in a step first.

Clearly indicate new files and changes.

If possible, split the files and avoid showing a file in multiple steps, it is that much more difficult to follow.

If you must, use empty placeholder tags and functions, and clearly indicate them as we'll replace later.

Label your code snippets with comments at the top to show which file we're in.

[evelinabe]

I would take a look at existing tutorials.

Always explain what's going to happen in a step first.

Clearly indicate new files and changes.

If possible, split the files and avoid showing a file in multiple steps, it is that much more difficult to follow.

If you must, use empty placeholder tags and functions, and clearly indicate them as we'll replace later.

Label your code snippets with comments at the top to show which file we're in.

Just want to point out that when I followed the other tutorials you thought that that major code block on step 7 was to big so this was my attempt to divide it in smaller bites.

A difference is of course that the styling takes up a lot of space. It's always confusing to me with tutorials that first shows an image on what will be built but then ends up totally unstyled. It is a really disappointing thing as a beginner to get a totally different result than what I'm expecting from the first image, so I wanted to keep the styling.

I also added more explicit functions in the script sections than in the other tutorials to make it clearer what functionality is actually going on. But it takes more space.

In a real world project I'd of course have a component for the ideaform and another one for the list. But that would mean moving even further from the existing tutorials.

I'm getting the feeling that you on the one hand want me to follow the other tutorials, but if I do that you want me to to impove where they fall short. And this is an Hacktober issue after all.

I will go through it once more. I'm inclined to restore step-7 to that first major block of code to make it follow the other tutorials, though.

[evelinabe]

@gewenyu99 I have marked all the files and restructured the code a bit. Decided to add UI components to break the code up more 'naturally'. So there are more files, but I hope it's easier to follow.

[gewenyu99]

I would take a look at existing tutorials.
Always explain what's going to happen in a step first.
Clearly indicate new files and changes.
If possible, split the files and avoid showing a file in multiple steps, it is that much more difficult to follow.
If you must, use empty placeholder tags and functions, and clearly indicate them as we'll replace later.
Label your code snippets with comments at the top to show which file we're in.

Just want to point out that when I followed the other tutorials you thought that that major code block on step 7 was to big so this was my attempt to divide it in smaller bites.

A difference is of course that the styling takes up a lot of space. It's always confusing to me with tutorials that first shows an image on what will be built but then ends up totally unstyled. It is a really disappointing thing as a beginner to get a totally different result than what I'm expecting from the first image, so I wanted to keep the styling.

I also added more explicit functions in the script sections than in the other tutorials to make it clearer what functionality is actually going on. But it takes more space.

In a real world project I'd of course have a component for the ideaform and another one for the list. But that would mean moving even further from the existing tutorials.

I'm getting the feeling that you on the one hand want me to follow the other tutorials, but if I do that you want me to to impove where they fall short. And this is an Hacktober issue after all.

I will go through it once more. I'm inclined to restore step-7 to that first major block of code to make it follow the other tutorials, though.

This tutorial is inherently more complex, so we will try to make improvements where applicable :)

Better is the only way forward ;)

[gewenyu99]

Hey @evelinabe I just checked it out, amazing work.

We're down to just a few last comments, these comments are very small. The tutorial is already looking great.

I'm confident this will be the best tutorial in this repo when it's released.

I'll approve and mark accepted in case we don't get to it before Hacktoberfest ends, but please take a look at my remaining comments.

Thanks for you contribution to make Appwrite better for Nuxt developers!

[gewenyu99]

I like this a lot!

[gewenyu99]

Hey,

Due to time constraints, I'm going to mark this PR hacktoberfest-accepted for now so you get DO's Hacktoberfest rewards. We'll continue to work with you on this issue for review and merge.

When it is merged, we'll contact you for Appwrite-specific Hacktoberfest swag.

Thanks for helping us improve Appwrite!

[evelinabe]

Hey @evelinabe I just checked it out, amazing work.

We're down to just a few last comments, these comments are very small. The tutorial is already looking great.

I'm confident this will be the best tutorial in this repo when it's released.

I'll approve and mark accepted in case we don't get to it before Hacktoberfest ends, but please take a look at my remaining comments.

Thanks for you contribution to make Appwrite better for Nuxt developers!

Hi @gewenyu99 !

Hope you've had a great time since Hacktober.
Thank you so much for your kind words, it means a lot!
I've finally fixed the requested changes for you, let me know if you've discovered something else that needs to be edited.

All the best from Gothenburg.

[gewenyu99]

Great, this is perrrrfect. Thank you!

[gewenyu99]

Hey there! There were a lot of big PRs during this Hacktoberfest, and we wanted to give everyone ample time to collaborate with our engineering team. If you were able to merge your PRs during October, amazing. If it’s still not merged, don’t worry about it either. Either way, we’ve got your Hacktoberfest swag minted and ready to ship.

Please comment with your Discord username here so we can contact you about your shipping information to deliver your Hacktoberfest swag.