becomeA10xDeveloper

KO | EN

gitlite — search

#hacktoberfest #ai #typescript #llm #go #golang #android #deep-learning #awesome #kubernetes #vue #security #ios #mcp

becomeA10xDeveloper

(★ 5)

My personal recommendations for anyone willing to start a new career path on software development

becomeA10xDeveloper Latest Version Download

Download Latest Version (.zip)

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

# **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](https://www.youtube.com/watch?v=PRSyHTajxPk 'here'))_

&rarr; **Important side-notes**

- ~~There&rsquo;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** &rarr; 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
- most importantly **LEARN TO WORK ON YOUR OWN**

&rarr; **Requirements** - Install Node - Install Visual Studio Code, I may suggest some useful extensions

## Visualized Roadmap (non-mandatory, just a reference)

[roadmap.sh](https://roadmap.sh/frontend 'roadmap.sh') -> I guess this is a bit outdated by now, but look for **Frotend** &rarr; **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](https://github.com/statusunknown418/thearq) - B2B time tracker, data visualiser thingy
 	- [concard.app](https://concard.app) - B2C/B2B recent project linked to my company @StackkStudios
	- [wait4it](https://github.com/statusunknown418/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](https://www.youtube.com/watch?v=MJkdaVFHrto 'es') / [en](https://www.youtube.com/watch?v=D-h8L5hgW-w 'en') |
|      (You should **REALLY** do this it's not optional anymore)      |                                                                                                                                                   [Tailwind docs](https://tailwindcss.com/ 'docs') |
| Git / github- **strongly recommended** |                                                                                                                                                           [Learn Git](https://www.youtube.com/watch?v=RGOj5yH7evk 'Learn Git') / [What's the difference](https://kinsta.com/knowledgebase/git-vs-github/ "What's the difference") |
|            JS (javascript)             |                                                                                                                                                                                                                   [es](https://www.youtube.com/watch?v=RqQ1d1qEWlE 'es') / [en](https://www.youtube.com/watch?v=PkZNo7MFNFg 'en') |
|                React \*                |                                                                                                                                 [es](https://www.youtube.com/watch?v=T_j60n1zgu0 'es') / [en](https://www.youtube.com/watch?v=0mVbNp1ol_w 'en') _again there's no need to watch the entire video, I recommend moving to **Nextjs**_ |
|              **Projects**              |                                                                                                                                                                                                                    **Start building fck\*ing projects** &rarr; [frontendMentor](https://www.frontendmentor.io/ 'frontendMentor') |
|           Web-app deployment           |                                                                                                                                                                                                                                                                            [Vercel](https://vercel.com/ 'Vercel') **recommended** |
|               Typescript               | [en](https://www.youtube.com/watch?v=gp5H0Vw39yw 'en') / channel recommendation [Jack Herrington](https://www.youtube.com/channel/UC6vRUjYqDuoUsYsku86Lrsw 'Jack Herrington') &rarr; see [No BS, TS](https://www.youtube.com/watch?v=LKVHFHJsiO0&list=PLNqp92_EXZBJYFrpEzdO2EapvU0GOJ09n 'No BS, TS') for an even better tutorial |
|                 Nextjs                 |                                                                                 [By Lee Rob](https://www.youtube.com/playlist?list=PL6bwFJ82M6FXgctyoWXqj7H0GK8_YIeF1 'By Lee Rob') /[ alternative-TheNetNinja ](https://www.youtube.com/watch?v=A63UxsQsEbU&list=PL4cUxeGkcC9g9gP2onazU5-2M-AzA8eBw ' alternative-TheNetNinja ') / [JoshTriedCoding course](https://www.google.com/search?q=joshtriedcodeing+nextjs+course&sourceid=chrome&ie=UTF-8#) &rarr; **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](https://www.apollographql.com/docs/tutorial/introduction/ 'from Apollo docs') / [alternative](https://www.youtube.com/watch?v=AqUYKGLSGxg '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  |               Databases                |                                          [What's SQL](https://www.youtube.com/watch?v=zsjvFFKOm3c "What's SQL") / [MySQL (PlanetScale)](https://planetscale.com/ 'MySQL (PlanetScale)') or / [PostgreSQL](https://www.youtube.com/watch?v=eMIxuk0nOkU 'PostgreSQL') or/and / [MongoDB](https://university.mongodb.com/ 'MongoDB') |
|  ~~ORM (Prisma, **literally the best**)~~ The hell was I thinking  |                                                                                                                                                                                                       ~~[docs](https://www.prisma.io/ 'docs') / [prisma-nextjs](https://www.youtube.com/watch?v=0mg2zD_DaOU&t=908s 'prisma-nextjs')~~ |
|Drizzle ORM &rarr; **THE GOAT**| https://orm.drizzle.team |
|DB -> Planetscale| I love this product DBaaS https://planetscale.com - Vitess backed, Sharded, Edge - MySQL database |
| DB - SQLite -> Turso | This is so much better than plantscale (IT'S FREE!!!!!)|

> 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 &rarr; **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 &rarr; 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](https://aws.amazon.com/ '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** &rarr; [linkedin](https://www.linkedin.com/in/alvaro-dev-ad/ 'linkedin') or [github](https://github.com/AlvaroAquijeDiaz 'github') whenever you have completed this guide _or if any link is broken or doesn't work_. Enjoy your ride 🤖!

becomeA10xDeveloper

becomeA10xDeveloper Latest Version Download

Today's picks

Was this content helpful?

Recent Feedback

becomeA10xDeveloper

becomeA10xDeveloper Latest Version Download

Today's picks

Was this content helpful?

Recent Feedback

Download README