Spending my Saturday going through this tutorial on how to build a React-based portfolio website with “advanced animations”.

It’s taken me an hour and a half just to create the React app, install node modules, and to figure out how to get the React app to load in localhost–and that’s from copying the tutorial! lol

This dev stuff is no joke 😅

Everyone tells me I need to build stuff rather than watch tutorials but just going and building a dApp is still too crazy to even consider doing, so I’m settling on creating my portfolio site via this tutorial first.

I have some ideas for other stuff I want to build but that will have to come after I have this portfolio site up.

Here are some of the ideas:

• A PFP NFT project that incorporates a “scratch-off function” that is triggered when a user mints an NFT. The user can burn their NFT to generate a "digital lottery ticket”, which they can scratch off in their browser, and win rewards like USDC, additional mints, and maybe other rewards.

• A bug tracker, but make it Web 3

• An dApp that makes NFTs out of your notes. Maybe it takes the metadata of your note and anyone can mint. The dApp teases your note with, say, the first 70 characters of what’s written.

I had more ideas but all I remember for now.

I’m planning on writing and publishing to this account here as I do tutorials and build stuff.

Also, I might do the EthGlobal hackathon next week. I have a teammate and have staked my 0.02 ETH, but we’ll see. At the very least I’ll attend some of the workshops Friday and eat some free pizza. I may end up solo hacking.

I’m stuck on this issue and my React app won’t compile. 😢

Compiled with problems:

ERROR in ./src/components/Layout/index.scss (./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].oneOf[7].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[1].oneOf[7].use[2]!./node_modules/resolve-url-loader/index.js??ruleSet[1].rules[1].oneOf[7].use[3]!./node_modules/react-scripts/node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[1].oneOf[7].use[4]!./src/components/Layout/index.scss)

Module build failed (from ./node_modules/react-scripts/node_modules/sass-loader/dist/cjs.js):
SassError: expected "{".
  ╷
4 │   return <>Hello</>
  │                    ^
  ╵
  src/components/Layout/index.scss 4:20  root stylesheet

I think it may have something to do with the version of the sass-loader node module I’m running. At least I have an idea where to look. There looks to be 20+ in the comments for the video that have gotten through the tutorial so at least I know it’s possible.

I did post my first StackOverflow answer though. That felt good.

Otherwise, right now I’m feeling like–

Time to go for a walk and maybe go eat some gelato.

Selfie check. This of it as a print function to check my emotional state.

Got a tummy ache but addicted to the game. Trying to figure out why my React app won’t run.

Hm…

Ok, I looked at the part two of this video and it’s still not a complete portfolio.

Meaning that even if I complete this tutorial I still won’t have a portfolio.

I guess I’m supposed to stick with this to show future employers how I will persevere in any situation, no matter the challenges but…

I’m giving myself permission to give up here. Slobodan’s portfolio page is pretty cool, but I’m in over my head and I don’t want to just copy his page.

After 3-4 hours, I’m still only 10 minutes into a 1 hour and 24-minute tutorial, after troubleshooting and trying to figure things out.

I was hoping that by doing this tutorial I’d create a portfolio page that I could use to start populating with projects but this is just too advanced for me.

That said, I did learn a lot today. I learned about:

• What it looks like to actually begin to create a React app from scratch

• I got a glimpse of how CSS animations are implemented in a project like this

• Anddd I also learned a whole lot about what I don’t know

Here’s a list of things I realized I know very little about:

• React, generally

• Building an app in React

• Creating a layout in React

• Using and importing libraries from npm, whether it’s CSS libraries, font libraries, whatever

• CSS animations

• Front-end frameworks, generally (like, what is a route and why are they used?)

Anyway, this is where I’m at. I’m going back to finish Eth Learn. That was more my speed, and then the next thing is to spend a couple weeks learning to build some nice-looking React apps.

Then, ideally combining those two things into building some nice-looking Web 3 apps, and a portfolio.

Still grinding lol.

It’s really bothering me that I can’t seem to find a project to sink my teeth into. Failing to finish the tutorial today just makes me more hungry/resolved/possessed to get these front end skills.

I do realize that after a certain point in the day, or after 3-4 hours of tutorials, my ability to focus and learn anything new kind of falls of a cliff.

That doesn’t stop me from watching tutorials and youtube videos to poke around and look for projects that are good for my skill level.

Learned about micro-front ends and microservices from this FreeCodeCamp tutorial. For some reason, I thought that micro front ends were just smaller versions of regular front ends.

Apparently, they are a modular approach to building and shipping front ends. For instance, for a large retailer like Nike, they might have a shopping cart team, a home page team, and a product display page team.

I did learn about the Atomic Design System, pictured below. Interesting way to think about UI design and building design systems. Something I know very little about but aspire to learn more.

Was trawling the FWB #developers channel to see if I could find out where all the cool kids are learning to design those slick UIs and front ends like the ones CTHDRL does.

I stumbled across this post:

While I’m not that much of a beginner, I feel like I’m more or less still trying to figure out how to get oriented and get to building things.

Here’s some of the best advice that was posted in response:

It helps a lot to read that. I have some ideas for projects that I’m excited about but I’m still kind of just overwhelmed with the prospect of building even a simple app.

I’m going to keep doing tutorials, and working on tutorials that are aligned with the project ideas that I have, until I can fly solo.