Skip to content

Latest commit

 

History

History
71 lines (52 loc) · 9.91 KB

README.md

File metadata and controls

71 lines (52 loc) · 9.91 KB
Raw

Become a 10X Developer in 3 months

This guide is intended for beginners and primarily focused on Frontend (see frontend/backend better explanation and differences here)

→ Important side-notes

  • There’s no need to pay for courses You shouldn't really pay for any courses
  • You don't need to watch every videos until the end -> Instead whenever you feel confident enough just start building something
  • Don't get frustated if you can't understand something at first glance, take your time and ...
  • Be patient
  • Learn how to identify bugs and plan a solving strategy → This shi*t is quite hard to master, I personally haven't yet
  • If you don't know some technology or piece of code explained on the videos, look it up on Google & Any AI stuff that can help
  • Please read the documentation websites for any technology or framework you choose to learn, there WILL be most of the important features and quirks, if not ...
  • Search if someone had a similar problem to yours, StackOverflow recommended, ChatGPT - (Meh), Medium blogs

→ Requirements - Install Node - Install Visual Studio Code, I may suggest some useful extensions

Visualized Roadmap (non-mandatory, just a reference)

roadmap.sh -> I guess this is a bit outdated by now, but look for Frotend → Backend

Featured channels & Tools

  • Theo's T3.gg
  • ThePrimeagen
  • JoshTriedCoding
  • BlueCollarCoder - Jack Herrington
  • WebDevSimplified

Extra tech

  • nicoalbanese's kirimase scaffolder https://github.com/nicoalbanese/kirimase/
  • create-t3-app scaffolder https://create.t3.gg/ - RECOMMENDED FOR BEGINNERS
  • TurboRepo, TurboPack
  • Check my own projects (maybe not the best but I think it's decent)
    • thearq - B2B time tracker, data visualiser thingy
    • wait4it - primarily look at the code bc Planetscale took down the DB and its not working anymore lol

Foundations

Should be done in the order shown

Tech Videos
HTML & CSS es / en
(You should REALLY do this it's not optional anymore) Tailwind CSS Framework / docs
Git / github- strongly recommended Learn Git / What's the difference
JS (javascript) es / en
React * es / en again there's no need to watch the entire video, I recommend moving to Nextjs
Projects Start building fck*ing projects → frontendMentor
Web-app deployment Vercel recommended
Typescript en / channel recommendation Jack Herrington → see No BS, TS for an even better tutorial
Nextjs By Lee Rob / alternative-TheNetNinja / JoshTriedCoding course → MOST UP TO DATE
More Projects Yeah do some more FROM SCRATCH, have fun and be creative if there's something you don't know how to do or can't, search about it on youtube, there are literally tons of videos about any tech you want
GraphQL from Apollo docs / alternative Don't do this, it's not necessary and heavily complex
TRPC This is the best way you can learn Modern Backend & DB, the JoshTriedCoding course video showed above uses this technology at its fullest
ORM (Prisma, literally the best) The hell was I thinking docs / prisma-nextjs
Drizzle ORM → THE GOAT https://orm.drizzle.team
DB -> Planetscale I love this product DBaaS https://planetscale.com - Vitess backed, Sharded, Edge - MySQL database
  1. Another note here: You should also be familiar with the Edge Runtime featured in nextjs https://nextjs.org/docs/app/building-your-application/rendering/edge-and-nodejs-runtimes because when next-auth supports it, it will become the new standard (in my opinion at least)
  2. I recommend authentication & authorization with next-auth, it's easy, reliable and fairly quick, however Lucia Auth is another option, mostly suited for more advanced devs, it however is Edge compatible which means → FUCKING FASTER, I leave this on you personal decision
  3. For your own sanity please do your research on the technologies I proposed here, and do keep in mind that the Nextjs course I recommended is based on the Pages Router (good ol' way to use next), however since v13 the team introduced new concepts around RSCs (React server components), Streaming, Server Actions (now stable in 13.5) and other nice stuff, so the best move here would be start on the Pages router and move to the App router once you're familiar & understand the differences enough

I personally just learnt the basics of React → functional components, hooks, etc; and quickly moved onto Next.js ❤ (you'll see that routing, SSR and DX (developer experience) is far better here)

Next Steps

Dive into fullstack web development and how to become one, learn other tech stacks such as AWS the edge runtime, RSCs, Next.js App router, serverless development, Rust programming language (I'm currently learning it and seems nice!) and reach out to me → linkedin or github whenever you have completed this guide or if any link is broken or doesn't work. Enjoy your ride 🤖!